What is Evo Ai Frontend

Evo AI is an open-source platform designed for creating and managing AI agents, allowing seamless integration with various AI models and services.

Use cases

Use cases include developing conversational agents, automating workflows between agents, creating complex agent interactions, and managing multiple AI models in a structured manner.

How to use

Users can utilize the Evo AI frontend by accessing its intuitive interface to create different types of AI agents, configure settings, and manage workflows visually.

Key features

Key features include user-friendly agent creation interfaces, integration with language models, client management, visual configuration of MCP servers, JWT authentication, A2A protocol support, and secure API key management.

Where to use

Evo AI can be applied in various fields such as AI development, automation, customer service, and any domain requiring intelligent agent management and integration.

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