evo-ai/frontend/README.md

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/)