Evo AI - AI Agents Platform (Frontend)

Evo AI is an open-source platform for creating and managing AI agents, enabling integration with different AI models and services.

🚀 Overview

The Evo AI frontend platform enables:

• User-friendly interface for creating and managing AI agents
• Integration with different language models
• Client management
• Visual configuration of MCP servers
• Custom tools management
• JWT authentication with email verification
• Agent 2 Agent (A2A) Protocol Support: Interface for interoperability between AI agents following Google's A2A specification
• Workflow Agent with ReactFlow: Visual interface for building complex agent workflows
• Secure API Key Management: Interface for encrypted storage of API keys
• Agent Organization: Folder structure for organizing agents by categories

🧩 Agent Creation Interface

The frontend offers intuitive interfaces for creating different types of agents:

1. LLM Agent (Language Model)

Interface for configuring agents based on models like GPT-4, Claude, etc. with tools, MCP servers, and sub-agents.

2. A2A Agent (Agent-to-Agent)

Interface for implementing Google's A2A protocol for agent interoperability.

3. Sequential Agent

Interface for executing sub-agents in a specific order.

4. Parallel Agent

Interface for executing multiple sub-agents simultaneously.

5. Loop Agent

Interface for executing sub-agents in a loop with a defined number of iterations.

6. Workflow Agent

Visual interface based on ReactFlow for creating complex workflows between agents.

🛠️ Technologies

• Next.js - React framework for production
• React - JavaScript library for building user interfaces
• Tailwind CSS - Utility-first CSS framework
• Shadcn UI - UI component library
• Radix UI - Unstyled, accessible components
• TypeScript - Typed JavaScript
• React Query - Data fetching and state management
• Zustand - Global state management
• React Flow - Library for building node-based visual workflows
• Axios - HTTP client for API communication

📋 Requirements

• Node.js 18+ (LTS recommended)
• npm, yarn, or pnpm package manager
• Evo AI backend running

🔧 Installation

1. Clone the repository:

git clone https://github.com/EvolutionAPI/evo-ai-frontend.git
cd evo-ai-frontend

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Configure environment variables:

cp .env.example .env
# Edit the .env file with your settings

🚀 Running the Project

# Development mode
npm run dev
# or
yarn dev
# or
pnpm dev

# Production build
npm run build
# or
yarn build
# or
pnpm build

# Start production server
npm run start
# or
yarn start
# or
pnpm start

The project will be available at http://localhost:3000

🔐 Authentication

The frontend implements JWT authentication integrated with the backend:

• User Registration: Form for creating new accounts
• Email Verification: Process for verifying via email
• Login: Authentication of existing users
• Password Recovery: Complete password recovery flow
• Secure Storage: Tokens stored in HttpOnly cookies

🖥️ Main Interface Features

Dashboard

Main dashboard showing:

• Agent overview
• Usage statistics
• Recent activities
• Quick links for agent creation

Agent Editor

Complete interface for:

• Creating new agents
• Editing existing agents
• Configuring instructions
• Selecting models
• Setting up API keys

Workflow Editor

Visual editor based on ReactFlow for:

• Creating complex workflows
• Connecting different agents
• Defining conditionals and decision flows
• Visualizing data flow

API Key Manager

Interface for:

• Adding new API keys
• Securely encrypting keys
• Managing existing keys
• Rotating and updating keys

Agent Organization

System for:

• Creating folders and categories
• Organizing agents by type or use case
• Searching and filtering agents

🔄 Backend Integration

The frontend communicates with the backend through:

• RESTful API: Endpoints for resource management
• WebSockets: Real-time communication for agent messages
• Response Streaming: Support for streaming model responses

🐳 Docker Support

The project includes Docker configuration for containerized deployment:

# Build the Docker image
./docker_build.sh
# or
docker build -t nextjs-frontend .

# Run the container
docker run -p 3000:3000 nextjs-frontend

🤝 Contributing

We welcome contributions from the community! Here's how you can help:

1. Fork the project
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Make your changes and add tests if possible
4. Run tests and make sure they pass
5. Commit your changes following conventional commits format (feat: add amazing feature)
6. Push to the branch (git push origin feature/AmazingFeature)
7. Open a Pull Request

Please read our Contributing Guidelines for more details.

📄 License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

Trademark Notice: The name "Evo AI" and related branding are protected trademarks. Unauthorized use is prohibited.

👨‍💻 Development Commands

• npm run dev - Start the development server
• npm run build - Build the application for production
• npm run start - Start the production server
• npm run lint - Run ESLint to check code quality
• npm run format - Format code with Prettier

🙏 Acknowledgments

• Next.js
• React
• Tailwind CSS
• Shadcn UI
• ReactFlow