### Project Installation and Setup

Source: https://github.com/evolutionapi/evo-ai/blob/main/frontend/README.md

Steps to clone the Evo AI frontend repository, install project dependencies using npm, yarn, or pnpm, and configure environment variables by copying the example file.

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

```Bash
npm install
# or
yarn install
# or
pnpm install
```

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

--------------------------------

### Frontend Dependency Installation

Source: https://github.com/evolutionapi/evo-ai/blob/main/README.md

Guides the user through navigating to the frontend directory and installing dependencies using recommended package managers like pnpm, npm, or yarn.

```bash
# Navigate to frontend directory
cd frontend

# Install dependencies using pnpm (recommended)
pnpm install

# Or using npm
# npm install

# Or using yarn
# yarn install
```

--------------------------------

### Backend Database Setup

Source: https://github.com/evolutionapi/evo-ai/blob/main/README.md

Initializes the database schema using Alembic and seeds the database with essential initial data, including admin users and sample clients.

```bash
# Initialize database and apply migrations
make alembic-upgrade

# Seed initial data (admin user, sample clients, etc.)
make seed-all
```

--------------------------------

### Docker Full Stack Installation

Source: https://github.com/evolutionapi/evo-ai/blob/main/README.md

Builds Docker images for all services (backend, database, redis) and starts them using Docker Compose. Includes database initialization with seed data.

```bash
# Build and start all services (backend + database + redis)
make docker-build
make docker-up

# Initialize database with seed data
make docker-seed
```

--------------------------------

### Backend Environment Configuration

Source: https://github.com/evolutionapi/evo-ai/blob/main/README.md

Copies the example environment file and prompts the user to configure backend settings such as database and Redis connection details.

```bash
# Copy and configure backend environment
cp .env.example .env
# Edit the .env file with your database, Redis, and other settings
```

--------------------------------

### Running the Evo AI Project

Source: https://github.com/evolutionapi/evo-ai/blob/main/frontend/README.md

Commands to run the Evo AI frontend project in development mode, build it for production, and start the production server. It also specifies the default access URL.

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

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

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

--------------------------------

### Frontend Development Commands

Source: https://github.com/evolutionapi/evo-ai/blob/main/README.md

Lists key commands for frontend development, enabling users to start the development server, build for production, run the production server, and perform linting.

```bash
# From frontend directory
cd frontend

# Development
pnpm dev                        # Start development server
pnpm build                      # Build for production
pnpm start                      # Start production server
pnpm lint                       # Run ESLint
```

--------------------------------

### Running Application in Production Mode

Source: https://github.com/evolutionapi/evo-ai/blob/main/README.md

Builds and starts the application for production. The backend runs with multiple workers for scalability, and the frontend is built and served.

```bash
# Backend
make run-prod    # Production with multiple workers

# Frontend
cd frontend
pnpm build && pnpm start

# Or using npm/yarn
# npm run build && npm start
# yarn build && yarn start
```

--------------------------------

### Frontend Environment Configuration

Source: https://github.com/evolutionapi/evo-ai/blob/main/README.md

Copies the frontend example environment file and instructs the user to set the API URL, typically pointing to the backend service.

```env
# Copy and configure frontend environment
cp .env.example .env
# Edit .env with your API URL (default: http://localhost:8000)
```

```env
NEXT_PUBLIC_API_URL=http://localhost:8000
```

--------------------------------

### Backend Virtual Environment and Dependencies

Source: https://github.com/evolutionapi/evo-ai/blob/main/README.md

Sets up a Python virtual environment and installs backend development dependencies using make commands. Ensures a clean and isolated environment for development.

```bash
# Create and activate virtual environment
make venv
source venv/bin/activate  # Linux/Mac
# or on Windows: venv\Scripts\activate

# Install development dependencies
make install-dev
```

--------------------------------

### Running Application in Development Mode

Source: https://github.com/evolutionapi/evo-ai/blob/main/README.md

Starts both the backend and frontend applications in development mode. The backend runs on port 8000 and the frontend on port 3000.

```bash
# Start Backend (Terminal 1)
# From project root
make run
# Backend will be available at http://localhost:8000

# Start Frontend (Terminal 2)
# From frontend directory
cd frontend
pnpm dev

# Or using npm/yarn
# npm run dev
# yarn dev

# Frontend will be available at http://localhost:3000
```

--------------------------------

### Docker Frontend Installation

Source: https://github.com/evolutionapi/evo-ai/blob/main/README.md

Builds a Docker image for the frontend application and runs it as a container, configuring the API URL via environment variables. Also shows how to use docker-compose for the frontend.

```bash
# From frontend directory
cd frontend

# Build frontend image
docker build -t evo-ai-frontend .

# Run frontend container
docker run -p 3000:3000 -e NEXT_PUBLIC_API_URL=http://localhost:8000 evo-ai-frontend

# Or using the provided docker-compose:
# From frontend directory
cd frontend
docker-compose up -d
```

--------------------------------

### Evo AI Development Commands

Source: https://github.com/evolutionapi/evo-ai/blob/main/frontend/README.md

A set of npm scripts provided for managing the development workflow of the Evo AI project. These commands cover starting the development server, building the application, running the production server, code linting, and code formatting.

```shell
npm run dev
# Start the development server
```

```shell
npm run build
# Build the application for production
```

```shell
npm run start
# Start the production server
```

```shell
npm run lint
# Run ESLint to check code quality
```

```shell
npm run format
# Format code with Prettier
```

--------------------------------

### Clone Evo AI Repository and Navigate

Source: https://github.com/evolutionapi/evo-ai/blob/main/README.md

Clones the Evo AI project repository from GitHub and navigates into the project directory. This is the initial step for setting up the project locally.

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

--------------------------------

### Docker Deployment Commands

Source: https://github.com/evolutionapi/evo-ai/blob/main/frontend/README.md

Instructions for building the Evo AI frontend Docker image using a script or Dockerfile, running the container, and deploying using Docker Compose.

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

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

```Bash
# Docker Compose
# Copy the .env file
cp .env.example .env

# Build and deploy
 docker-compose up -d --build
```

--------------------------------

### Backend Development Commands

Source: https://github.com/evolutionapi/evo-ai/blob/main/README.md

Provides essential commands for backend development, including database migration management, running seeders, and code quality checks like linting and formatting.

```bash
# Database migrations
make alembic-upgrade            # Update database to latest version
make alembic-revision message="description"  # Create new migration

# Seeders
make seed-all                   # Run all seeders

# Code verification
make lint                       # Verify code with flake8
make format                     # Format code with black
```

--------------------------------

### Configure Langfuse Tracing Environment Variables

Source: https://github.com/evolutionapi/evo-ai/blob/main/README.md

Sets up essential environment variables for integrating Evo AI with Langfuse for tracing and observability. Requires Langfuse public and secret keys and the OTel endpoint.

```env
LANGFUSE_PUBLIC_KEY="pk-lf-..."
LANGFUSE_SECRET_KEY="sk-lf-..."
OTEL_EXPORTER_OTLP_ENDPOINT="https://cloud.langfuse.com/api/public/otel"
```

--------------------------------

### Backend Configuration (.env)

Source: https://github.com/evolutionapi/evo-ai/blob/main/README.md

Details the key environment variables for backend configuration, including database connection strings, Redis settings, AI engine selection, JWT secrets, email provider, and encryption keys.

```env
# Database settings
POSTGRES_CONNECTION_STRING="postgresql://postgres:root@localhost:5432/evo_ai"

# Redis settings
REDIS_HOST="localhost"
REDIS_PORT=6379

# AI Engine configuration
AI_ENGINE="adk"  # Options: "adk" (Google Agent Development Kit) or "crewai" (CrewAI framework)

# JWT settings
JWT_SECRET_KEY="your-jwt-secret-key"

# Email provider configuration
EMAIL_PROVIDER="sendgrid"  # Options: "sendgrid" or "smtp"

# Encryption for API keys
ENCRYPTION_KEY="your-encryption-key"
```

--------------------------------

### Evo AI Page Styling (CSS)

Source: https://github.com/evolutionapi/evo-ai/blob/main/src/templates/emails/base_email.html

Provides the core CSS styling for the Evo AI project's web pages or emails. It defines styles for body, containers, headers, content sections, buttons, links, and footers, ensuring a consistent and branded user experience. Includes responsive adjustments for smaller screens.

```css
body { font-family: "Segoe UI", Arial, sans-serif; background-color: #f7f7f7; color: #222; margin: 0; padding: 0; }
.container { max-width: 480px; margin: 32px auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); padding: 0; overflow: hidden; }
.header { background: #f7f7f7; border-bottom: 1px solid #e5e5e5; padding: 32px 0 16px 0; text-align: center; }
.header h1 { color: #155a2c; font-size: 2rem; margin: 0; letter-spacing: 1px; }
.content { padding: 32px 24px 24px 24px; }
.button { background: linear-gradient(90deg, #155a2c 0%, #1f7d3dff 100%); color: #fff !important; padding: 14px 0; border-radius: 6px; text-decoration: none; display: block; font-weight: bold; text-align: center; font-size: 1.1rem; margin: 32px 0 0 0; transition: filter 0.2s; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08); }
.button:hover { filter: brightness(1.08); }
.footer { font-size: 12px; text-align: center; color: #888; background: #f7f7f7; border-top: 1px solid #e5e5e5; padding: 20px 0 10px 0; }
.link { color: #155a2c; text-decoration: underline; word-break: break-all; }
.warning { color: #b91c1c; background: #fee2e2; border-radius: 4px; padding: 12px; margin-top: 20px; }
@media (max-width: 600px) {
  .container { max-width: 98vw; margin: 8px; }
  .content { padding: 18px 8px 16px 8px; }
}
```

--------------------------------

### Evo AI Page Template Structure

Source: https://github.com/evolutionapi/evo-ai/blob/main/src/templates/emails/base_email.html

Defines the block structure for the Evo AI project's HTML templates. It specifies placeholders for the page title, header content, main body content, and footer messages, allowing for dynamic content injection.

```html
{% block title %}Evo AI{% endblock %}

{% block additional_styles %}{% endblock %}

{% block header %}Evo AI{% endblock %}
======================================

{% block content %}{% endblock %}

{% block footer_message %}This is an automated email, please do not reply.{% endblock %}

© {{ current_year }} Evo AI. All rights reserved.
```

--------------------------------

### Frontend Configuration (.env)

Source: https://github.com/evolutionapi/evo-ai/blob/main/README.md

Specifies the environment variable for frontend configuration, primarily the URL of the backend API service.

```env
# API Configuration
NEXT_PUBLIC_API_URL="http://localhost:8000"  # Backend API URL
```

--------------------------------

### Evo AI Password Reset Email Template

Source: https://github.com/evolutionapi/evo-ai/blob/main/src/templates/emails/password_reset.html

This snippet represents an HTML email template using Jinja templating for password reset functionality. It includes dynamic fields for the user's name and a unique reset link, along with important security notices regarding link validity and session management.

```jinja
{% extends "base\_email.html" %} {% block title %}Password Reset - Evo AI{% endblock %} {% block header %}Evo AI{% endblock %} {% block content %}

Password Reset
--------------

Hello {{ user_name }},

We received a request to reset the password for your account on the Evo AI platform. If you didn't request this change, please ignore this email or contact our support team if you have any questions.

To reset your password, click the button below:

[Reset My Password]({{ reset_link }})

This reset link is valid for **24 hours**. After this period, you will need to request a new password reset.

For security reasons, after resetting your password, you will be logged out of all active sessions and will need to log in again on all devices.

If you can't click the button above, copy and paste the following URL into your browser:

{{ reset_link }}

Best regards,  
Evo AI Team

{% endblock %} {% block footer_message %}This is an automated email. Please do not reply to this message.{% endblock %}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.