⚖️ AI Debate Chamber

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:

PRO Argument: Llama 3.3 70B
Highly logical, articulate reasoning model that constructs compelling supportive arguments
CON Argument: Claude 3 Haiku
Fast, analytical model providing critical, well-reasoned counter-arguments
Moderator Synthesis: Gemini 2.5 Flash
Impartial, balanced model that synthesizes insights and identifies common ground

🎨 Premium Glassmorphic Design

Dark-mode interface with harmonious color gradients
Modern typography with Geist font family
Sleek card borders and elegant micro-animations
Fully responsive layout (mobile, tablet, desktop)
Accessible, user-friendly UI components

⚡ Intelligent Caching & Performance

In-memory caching layer for instant debate retrieval
Optimized API calls to reduce latency
Lightning-fast, responsive user interactions
Seamless real-time debate generation

💬 Interactive Debate Chatbot

Engage with a dedicated moderator chatbot
Ask follow-up questions and dive deeper into topics
Critique arguments and explore nuance
Continue conversations seamlessly with context awareness

🛠️ 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:

Node.js v18.0 or higher
npm or yarn package manager
API keys from:
- Groq Console – For Claude 3 Haiku access
- OpenRouter – For Llama 3.3 and Gemini 2.5 access
A modern web browser (Chrome, Firefox, Safari, Edge)

🚀 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:

Never commit .env.local to version control (already protected by .gitignore)
Always restart the dev server after changing environment variables
Use NEXT_PUBLIC_ prefix only for client-side accessible variables
Keep API keys secure and never share them publicly

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

Enter a Topic: Type any subject you'd like the AI models to debate
Watch the Debate Unfold: Three AI personalities present their arguments in real-time
View Synthesized Insights: See the moderator's balanced analysis and common ground
Ask Follow-up Questions: Use the interactive chatbot to explore deeper
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

Deploy to Vercel (Recommended)

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

Connect GitHub repo to Netlify
Set build command: npm run build
Set publish directory: .next

AWS Amplify

Push to GitHub/GitLab
Create Amplify app
Configure build settings for Next.js

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

Store all secrets in .env.local (never in code)
Use .gitignore to prevent accidental commits
Rotate API keys regularly

✅ API Security

Implement rate limiting on API endpoints
Validate all user inputs server-side
Use HTTPS in production

✅ Performance

Enable caching headers
Minify CSS and JavaScript
Optimize images and assets

✅ Monitoring

Log API errors and failures
Monitor API rate limits
Track application performance

🤝 Contributing

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

Fork the Repository

git clone https://github.com/YOUR_USERNAME/AI-DEBATE-CHAMBER.git

Create a Feature Branch
```
git checkout -b feature/amazing-feature
```
Make Your Changes
- Write clean, readable code
- Follow the existing code style
- Add comments where necessary
Commit Your Changes
```
git commit -m 'Add amazing feature'
```
Push to Your Branch
```
git push origin feature/amazing-feature
```
Open a Pull Request
- Describe your changes in detail
- Reference any related issues

🆘 Troubleshooting

Issue: "API Key Not Found" Error

Solution:

Verify .env.local exists in project root
Check that API keys are valid and not expired
Restart the dev server: npm run dev

Issue: Slow Debate Generation

Solution:

Check API rate limits on OpenRouter and Groq
Use cached results for repeated topics
Ensure stable internet connection

Issue: Tailwind Styles Not Applying

Solution:

Clear Next.js cache: rm -rf .next
Reinstall dependencies: rm -rf node_modules && npm install
Rebuild the project: npm run build

Issue: TypeScript Compilation Errors

Solution:

Update TypeScript: npm update typescript
Check tsconfig.json configuration
Ensure all types are properly imported

Issue: CORS Errors

Solution:

Verify API endpoints are accessible
Check Groq and OpenRouter CORS settings
Use server-side API routes for sensitive calls

📈 Performance Tips

Use Caching: Enable browser caching for static assets
Optimize Images: Compress and optimize images before deployment
Code Splitting: Next.js automatically optimizes route-based code splitting
API Optimization: Batch API calls and reuse cached results
Monitor Metrics: Use Web Vitals to track performance

🎯 Roadmap

📞 Support & Community

Issues: GitHub Issues
Discussions: GitHub Discussions
Email: Contact via GitHub profile

📄 License

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

🙏 Acknowledgments

Llama 3.3 by Meta AI
Claude 3 by Anthropic
Gemini 2.5 by Google DeepMind
Next.js by Vercel
Tailwind CSS by Tailwind Labs
All contributors and users

🚀 Building the Future of AI-Powered Intelligent Discourse

⭐ Star this repo if you find it useful!

Made with ❤️ by VisionStack-404

Name		Name	Last commit message	Last commit date
app		app
lib		lib
public		public
.gitignore		.gitignore
Daily		Daily
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation

⚖️ AI Debate Chamber

🎯 Overview

✨ Core Features

🤖 Multi-Agent AI Orchestration

🎨 Premium Glassmorphic Design

⚡ Intelligent Caching & Performance

💬 Interactive Debate Chatbot

🛠️ Tech Stack

📋 Prerequisites

🚀 Quick Start Guide

1. Clone the Repository

2. Install Dependencies

3. Configure Environment Variables

4. Start the Development Server

5. Build for Production

💻 How to Use

📁 Project Structure

🔌 API Integration Details

Supported LLM Providers

API Endpoints

Generate Debate

Chat Follow-up

📊 Available npm Scripts

🌐 Deployment Guide

Deploy to Vercel (Recommended)

Deploy to Other Platforms

Netlify

AWS Amplify

Self-Hosted (Docker)

🔐 Security & Best Practices

🤝 Contributing

🆘 Troubleshooting

Issue: "API Key Not Found" Error

Issue: Slow Debate Generation

Issue: Tailwind Styles Not Applying

Issue: TypeScript Compilation Errors

Issue: CORS Errors

📈 Performance Tips

🎯 Roadmap

📞 Support & Community

📄 License

🙏 Acknowledgments

🚀 Building the Future of AI-Powered Intelligent Discourse

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages