AI Battle Arena (Multi-LLM Head-to-Head Benchmark) ⚔️🤖

A cybernetic, real-time benchmark arena that pits frontier large language models (Google Gemini, Mistral, Cohere) head-to-head using LangGraph stateful agent orchestration to evaluate, score, and deliver automated referee verdicts on complex prompts.

---

🌟 Key Features

• Side-by-Side LLM Duels: Dispatch prompts simultaneously across multiple top-tier AI models (Google Gemini, Mistral AI, Cohere Command).
• LangGraph Referee Engine: An autonomous agentic graph evaluates responses across accuracy, depth, conciseness, and creativity to declare a definitive round winner.
• Cyberpunk Arena Visuals: High-octane dark arena aesthetic featuring neon glass cards, GSAP-powered verdict reveal meters, and animated winner podiums.
• Granular Reasoning Breakdowns: Detailed ReasoningFooter displaying step-by-step scoring metrics, token considerations, and judge critiques.
• Rich Output Rendering: Markdown syntax highlighting, code block parsing, table rendering via react-markdown and remark-gfm.

---

🛠️ Tech Stack

Frontend

• Framework: React 19, Vite
• Styling: Tailwind CSS v4 (@tailwindcss/vite), Custom Cyberpunk Theme
• Animations: GSAP 3, Framer Motion 12
• Markdown: react-markdown, remark-gfm, remark-breaks
• Routing & Icons: React Router DOM v7, Lucide React, React Icons

Backend

• Runtime: Node.js with TypeScript & tsx
• AI Agent Graph: LangGraph (@langchain/langgraph), LangChain Core (@langchain/core)
• LLM Integrations: @langchain/google, @langchain/mistralai, @langchain/cohere
• Server & Schema: Express v5, Zod

---

📁 Repository Architecture

06 - Battle Arena/
├── backend/
│   ├── src/
│   │   ├── ai/              # LangGraph workflow (graph.ai.ts, model.ai.ts)
│   │   ├── config/          # Environment & API configurations
│   │   └── app.ts           # Express endpoints
│   ├── server.ts            # Server bootstrap
│   └── package.json
└── frontend/
    ├── public/
    │   └── neon-arena-bg.png
    ├── src/
    │   ├── components/      # SolutionCard, VerdictBar, ReasoningFooter
    │   ├── pages/           # Arena battle view, loading screen, auth
    │   ├── app/App.jsx
    │   └── main.jsx
    └── package.json

---

🚀 Getting Started

Prerequisites

• Node.js (v18+)
• API Keys for Google AI (Gemini), Mistral AI, and Cohere

1. Configure & Run Backend

cd backend
npm install

Create .env in backend/:

PORT=5000
GOOGLE_API_KEY=your_google_gemini_api_key
MISTRAL_API_KEY=your_mistral_api_key
COHERE_API_KEY=your_cohere_api_key

Start server:

npm run dev

2. Configure & Run Frontend

cd ../frontend
npm install
npm run dev

---

📡 API Overview

Route	Method	Description
/api/battle	POST	Submits user prompt to LangGraph duel engine
/api/models	GET	Returns available contender LLM configurations

---

📄 License

ISC License. Built for portfolio showcase.