Multi-Agent AI Debate System

A sophisticated debate platform powered by multiple AI agents that analyze and compare technologies in real-time with streaming responses.

✨ Features

• � Multi-Agent Architecture: Router, Moderator, Advocates, and Judge agents working together
• 🔄 Real-time Streaming: See the debate unfold step-by-step as agents respond
• 🌐 Web Search Integration: Advocates research the latest information
• 🎨 Modern UI: Beautiful, responsive interface with live updates
• 🔌 Multi-Provider Support: Works with Anthropic Claude, OpenAI GPT, and Google Gemini
• ⚙️ Flexible Configuration: Easily switch between different model configurations

�🎯 Objective

To quickly obtain a functional prototype using the best available API models for each role, maximizing quality by structuring instructions (prompts).

🏗️ Architecture

Technical Stack

• Backend: TypeScript + LangGraph.js + Express
• Frontend: React + TypeScript + Vite + TailwindCSS
• Orchestration: LangGraph.js manages the debate flow, states, and transitions between agents
• Streaming: Server-Sent Events (SSE) for real-time updates

Agents

1. Router Agent

   • First point of contact
   • Filters simple requests
   • Cost control
   • Default: Gemini 2.5 Flash Lite

2. Moderator Agent

   • Prepares the debate
   • Reformulates the question
   • Identifies technologies to be compared
   • Default: Gemini 2.5 Flash Lite

3. Advocate Agents (x2)

   • Argumentation and persuasion
   • Active web search capability
   • Construction of biased arguments
   • Default: Gemini 2.5 Flash Lite

4. Judge Agent

   • Impartial synthesis
   • In-depth reasoning
   • Final recommendation
   • Default: Gemini 2.5 Pro

📊 Data Flow

User Input
  ↓
Router (Filters simple queries)
  ↓
Moderator (Structures debate)
  ↓
Advocate A & Advocate B (Argue + Research)
  ↓
Judge (Final verdict)
  ↓
Streaming Results → User Interface

🚀 Installation

Quick Method (Recommended)

# At the project root
npm install              # Install concurrently
npm run install:all      # Install all dependencies
npm run check            # Check the configuration

# Configure API keys
cd backend
cp .env.example .env
# Edit .env with your API keys (at least one provider required)

# Launch backend + frontend
cd ..
npm run dev              # Launches both in parallel!

Manual Method

Backend

cd backend
npm install
cp .env.example .env
# Edit .env with your API keys
npm run dev

Frontend

cd frontend
npm install
npm run dev

🔑 Configuration

API Keys

You need at least one AI provider configured. Get your API keys:

• Google Gemini (Current default): https://makersuite.google.com/app/apikey
• Anthropic Claude: https://console.anthropic.com/
• OpenAI GPT: https://platform.openai.com/
• Tavily Search (Required for web research): https://tavily.com/

Model Configuration

The system supports multiple pre-configured setups. See backend/CONFIG.md for detailed configuration options:

• GOOGLE_CONFIG (Default): Google Gemini models
• ECONOMIC_CONFIG: Cost-effective Anthropic setup (~$0.03/debate)
• PREMIUM_CONFIG: Maximum quality mix (~$0.15/debate)
• OPENAI_ONLY_CONFIG: OpenAI-exclusive setup
• MIXED_CONFIG: Best models from all providers

To change configuration, edit backend/src/config/models.ts.

💻 Usage

Available NPM Scripts

At the project root:

npm run install:all      # Install all dependencies
npm run dev              # Launch backend + frontend in parallel
npm run build            # Production build
npm run check            # Check the configuration
npm run test             # Test the API

Using the Application

1. Start the application: npm run dev
2. Open your browser: Navigate to http://localhost:5173
3. Enter a question: Type a comparative question (e.g., "React vs Vue.js for an e-commerce project")
4. Watch the debate unfold:
   • See real-time updates as each agent processes
   • Router analyzes your query
   • Moderator structures the debate
   • Advocates research and argue their positions
   • Judge delivers the final verdict
5. Review results: Each section appears progressively with smooth animations

API Endpoints

Standard endpoint (returns complete result):

POST http://localhost:3000/api/debate
Content-Type: application/json

{
  "query": "React vs Vue.js"
}

Streaming endpoint (real-time updates via SSE):

POST http://localhost:3000/api/debate/stream
Content-Type: application/json

{
  "query": "React vs Vue.js"
}

The frontend automatically uses the streaming endpoint for the best user experience.

📁 Project Structure

debat-ia-agents/
├── backend/                 # Backend TypeScript + LangGraph.js
│   ├── src/
│   │   ├── agents/         # Agent implementation
│   │   │   ├── router.ts
│   │   │   ├── moderator.ts
│   │   │   ├── advocate.ts
│   │   │   └── judge.ts
│   │   ├── graph/          # LangGraph Workflow
│   │   │   ├── state.ts
│   │   │   └── workflow.ts
│   │   ├── tools/          # External tools
│   │   │   └── webSearch.ts
│   │   ├── config/         # Configuration and prompts
│   │   │   └── prompts.ts
│   │   └── server.ts       # Express API
│   ├── package.json
│   └── tsconfig.json
├── frontend/               # Frontend React + TypeScript
│   ├── src/
│   │   ├── components/    # React components
│   │   ├── App.tsx
│   │   └── main.tsx
│   ├── package.json
│   └── vite.config.ts
└── README.md

🧪 Tests

# Backend
cd backend && npm test

# Frontend
cd frontend && npm test

📝 License

MIT