AI-DEBATE-CHAMBER

⚖️ AI Debate Chamber

Next.js Tailwind CSS React TypeScript Groq License

Where AI Arguments Clash & Insights Emerge 🚀 A premium real-time arena where frontier AI minds collide. 🤖⚔️

🎯 Overview

AI Debate Chamber is a revolutionary platform that brings the power of multiple frontier Large Language Models together in structured, dynamic debates. Experience how different AI personalities engage in real-time arguments, present compelling counter-points, and synthesize balanced conclusions on any topic imaginable.

This is more than a chatbot—it’s a cognitive arena where artificial intelligence meets persuasive reasoning, designed for users seeking diverse perspectives on complex topics.

✨ Core Features

🤖 Multi-Agent AI Orchestration

Experience debates powered by cutting-edge LLMs working in harmony:

🎨 Premium Glassmorphic Design

⚡ Intelligent Caching & Performance

💬 Interactive Debate Chatbot

🛠️ Tech Stack

Category Technology
Frontend Framework Next.js 16.1, React 19.2
Language TypeScript 5.0
Styling Tailwind CSS v4.0
API SDKs Groq SDK, OpenRouter
LLM Models Llama 3.3, Claude 3, Gemini 2.5
Dev Tools ESLint, PostCSS, Webpack

📋 Prerequisites

Before you begin, ensure you have:

🚀 Quick Start Guide

1. Clone the Repository

git clone https://github.com/VisionStack-404/AI-DEBATE-CHAMBER.git
cd AI-DEBATE-CHAMBER

2. Install Dependencies

npm install
# or if you prefer yarn
yarn install

3. Configure Environment Variables

Create a .env.local file in the project root:

touch .env.local

Add your API keys to .env.local:

# OpenRouter API Key (for Llama 3.3 and Gemini 2.5)
OPENROUTER_API_KEY=your_openrouter_api_key_here

# Groq API Key (for Claude 3 Haiku - client-side usage)
NEXT_PUBLIC_GROQ_API_KEY=your_groq_api_key_here

# Optional: Development Environment Flag
NEXT_PUBLIC_API_ENV=development

⚠️ Security Notes:

4. Start the Development Server

npm run dev

Open http://localhost:3000 in your browser to see the application running.

5. Build for Production

# Build the application
npm run build

# Start the production server
npm start

💻 How to Use

  1. Enter a Topic: Type any subject you’d like the AI models to debate
  2. Watch the Debate Unfold: Three AI personalities present their arguments in real-time
  3. View Synthesized Insights: See the moderator’s balanced analysis and common ground
  4. Ask Follow-up Questions: Use the interactive chatbot to explore deeper
  5. Challenge Perspectives: Dive into nuance and explore different viewpoints

📁 Project Structure

AI-DEBATE-CHAMBER/
├── app/                          # Next.js App Router Directory
│   ├── api/                     # API routes for LLM integration
│   │   ├── debate/              # Main debate generation endpoint
│   │   └── chat/                # Chatbot interaction endpoint
│   ├── layout.tsx               # Root layout wrapper
│   ├── page.tsx                 # Home/main debate page
│   └── globals.css              # Global styles
├── components/                   # Reusable React Components
│   ├── DebateArena/             # Debate display and management
│   ├── ChatBot/                 # Interactive chatbot interface
│   ├── ArgumentCard/            # Individual argument component
│   └── UI/                      # Shared UI elements
├── lib/                         # Utility Functions & Helpers
│   ├── api/                     # API client functions
│   ├── types/                   # TypeScript interfaces
│   └── utils/                   # Helper utilities
├── styles/                      # Global CSS & Tailwind Config
├── public/                      # Static assets (images, fonts)
├── .env.local                   # Environment variables (local only)
├── .env.example                 # Example environment template
├── .gitignore                   # Git ignore rules
├── next.config.ts               # Next.js configuration
├── tailwind.config.ts           # Tailwind CSS configuration
├── tsconfig.json                # TypeScript configuration
├── package.json                 # Dependencies and scripts
└── README.md                    # This file

🔌 API Integration Details

Supported LLM Providers

Model Provider Gateway Purpose
Llama 3.3 70B Meta OpenRouter PRO Arguments
Claude 3 Haiku Anthropic Groq CON Arguments
Gemini 2.5 Flash Google OpenRouter Moderation & Synthesis

API Endpoints

Generate Debate

POST /api/debate
Content-Type: application/json

{
  "topic": "Should AI be regulated?",
  "language": "en"
}

Chat Follow-up

POST /api/chat
Content-Type: application/json

{
  "debateId": "debate_123",
  "question": "Can you elaborate on...",
  "conversationHistory": []
}

📊 Available npm Scripts

# Development
npm run dev              # Start dev server with hot module reloading

# Production
npm run build            # Build optimized production bundle
npm start                # Start production server

# Code Quality
npm run lint             # Run ESLint for code style checking

🌐 Deployment Guide

Vercel is optimized for Next.js applications:

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel --prod

Or connect your GitHub repository to Vercel for automatic deployments.

Deploy to Other Platforms

Netlify

AWS Amplify

Self-Hosted (Docker)

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

🔐 Security & Best Practices

✅ Environment Variables

✅ API Security

✅ Performance

✅ Monitoring

🤝 Contributing

We welcome contributions from the community! Here’s how to get involved:

  1. Fork the Repository 
    git clone https://github.com/YOUR_USERNAME/AI-DEBATE-CHAMBER.git
  2. Create a Feature Branch 
    git checkout -b feature/amazing-feature
  3. Make Your Changes
    • Write clean, readable code
    • Follow the existing code style
    • Add comments where necessary
  4. Commit Your Changes 
    git commit -m 'Add amazing feature'
  5. Push to Your Branch 
    git push origin feature/amazing-feature
  6. Open a Pull Request
    • Describe your changes in detail
    • Reference any related issues

🆘 Troubleshooting

Issue: “API Key Not Found” Error

Solution:

Issue: Slow Debate Generation

Solution:

Issue: Tailwind Styles Not Applying

Solution:

Issue: TypeScript Compilation Errors

Solution:

Issue: CORS Errors

Solution:

📈 Performance Tips

🎯 Roadmap

📞 Support & Community

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

🙏 Acknowledgments

### 🚀 Building the Future of AI-Powered Intelligent Discourse **[⭐ Star this repo](https://github.com/VisionStack-404/AI-DEBATE-CHAMBER)** if you find it useful! Made with ❤️ by [VisionStack-404](https://github.com/VisionStack-404)