238 lines
6.1 KiB
Markdown
238 lines
6.1 KiB
Markdown
# 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](https://nextjs.org/) - React framework for production
|
|
- [React](https://reactjs.org/) - JavaScript library for building user interfaces
|
|
- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
|
|
- [Shadcn UI](https://ui.shadcn.com/) - UI component library
|
|
- [Radix UI](https://www.radix-ui.com/) - Unstyled, accessible components
|
|
- [TypeScript](https://www.typescriptlang.org/) - Typed JavaScript
|
|
- [React Query](https://tanstack.com/query/latest) - Data fetching and state management
|
|
- [Zustand](https://zustand-demo.pmnd.rs/) - Global state management
|
|
- [React Flow](https://reactflow.dev/) - Library for building node-based visual workflows
|
|
- [Axios](https://axios-http.com/) - 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:
|
|
|
|
```bash
|
|
git clone https://github.com/EvolutionAPI/evo-ai-frontend.git
|
|
cd evo-ai-frontend
|
|
```
|
|
|
|
2. Install dependencies:
|
|
|
|
```bash
|
|
npm install
|
|
# or
|
|
yarn install
|
|
# or
|
|
pnpm install
|
|
```
|
|
|
|
3. Configure environment variables:
|
|
|
|
```bash
|
|
cp .env.example .env
|
|
# Edit the .env file with your settings
|
|
```
|
|
|
|
## 🚀 Running the Project
|
|
|
|
```bash
|
|
# 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](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:
|
|
|
|
```bash
|
|
# Build the Docker image
|
|
./docker_build.sh
|
|
# or
|
|
docker build -t nextjs-frontend .
|
|
|
|
# Run the container
|
|
docker run -p 3000:3000 nextjs-frontend
|
|
```
|
|
|
|
# 🐳 Docker Compose
|
|
```bash
|
|
# Copy the .env file
|
|
cp .env.example .env
|
|
|
|
# Build and deploy
|
|
docker-compose up -d --build
|
|
```
|
|
|
|
## 🤝 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](CONTRIBUTING.md) for more details.
|
|
|
|
## 📄 License
|
|
|
|
This project is licensed under the Apache License 2.0 - see the [LICENSE](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](https://nextjs.org/)
|
|
- [React](https://reactjs.org/)
|
|
- [Tailwind CSS](https://tailwindcss.com/)
|
|
- [Shadcn UI](https://ui.shadcn.com/)
|
|
- [ReactFlow](https://reactflow.dev/)
|