Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

26 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

โš–๏ธ The AI Debate Chamber

Next.js Tailwind CSS React OpenRouter

An elegant, real-time debate arena where frontier Large Language Models clash on any user-provided topic, construct persuasive arguments, and synthesize balanced conclusions.


โœจ Features

  • ๐Ÿค– Multi-Agent AI Orchestration: Watch specialized, top-tier LLMs collaborate and debate in real-time:
    • PRO Argument: Powered by Llama 3.3 70B (a highly logical and articulate reasoning model).
    • CON Argument: Powered by Claude 3 Haiku (a fast, analytical, and highly critical model).
    • Moderator Synthesis: Powered by Gemini 2.5 Flash (impartial, balanced, and objective).
  • ๐ŸŽจ Premium Glassmorphic Design: A premium dark-mode interface built with harmonious color gradients, modern typography (Geist), sleek card borders, micro-animations, and a completely responsive layout.
  • โšก Intelligent Caching & Speed: Implements an in-memory caching layer to instantly load previously generated debates.
  • ๐Ÿ’ฌ Interactive Debate Chatbot: Engage with a dedicated moderator chatbot to ask follow-up questions, dive deeper into specific points, or critique arguments.

๐Ÿ›๏ธ AI Debate Chamber

Where AI Arguments Clash & Insights Emerge โ€” An intelligent debate platform powered by cutting-edge AI technology

TypeScript React Next.js Tailwind CSS Status


โœจ What is AI Debate Chamber?

AI Debate Chamber is a revolutionary platform that enables dynamic, real-time debates between multiple AI personalities. Watch as artificial intelligences engage in structured arguments, present counter-points, and challenge each other's reasoningโ€”all while you observe, learn, and gain fresh perspectives on complex topics.

This is more than a chatbot. This is a cognitive arena where AI intellect meets persuasive reasoning.


๐ŸŽฏ Core Features

๐Ÿค– Multi-AI Debate System

  • Intelligent Adversaries: Different AI models engage in structured debates on any topic
  • Real-Time Arguments: Watch AI personalities clash with prepared counter-arguments
  • Reasoned Discourse: Each AI presents logical, evidence-based positions

๐Ÿ’ก Smart Interactions

  • Topic Generation: Propose any debate topic imaginable
  • Position Assignment: Automatic or manual assignment of debate positions
  • Live Progression: Follow the debate round-by-round in real-time
  • Conclusion Synthesis: Get AI-generated summaries and insights from debates

๐ŸŽจ Intuitive Interface

  • Modern, Responsive Design: Built with React & Tailwind CSS for seamless experience
  • Clean Debate View: Easy-to-follow debate progression
  • Interactive Controls: Pause, resume, or guide the debate flow

๐Ÿš€ Powered by Groq SDK

  • Lightning-Fast Inference: Groq's high-speed LLM API ensures smooth, responsive debates
  • Enterprise-Grade: Production-ready infrastructure

๐Ÿ› ๏ธ Tech Stack

  • Framework: Next.js 16 (App Router, Webpack compiler)
  • Styling: Tailwind CSS v4 (modern CSS-first theme system) & Vanilla CSS glassmorphism
  • Logic: TypeScript & React 19
  • LLM Gateway: OpenRouter API for seamless, high-throughput model execution

๐Ÿš€ Getting Started

๐Ÿ“‹ Prerequisites

  • Node.js (v18.x or higher)
  • npm, pnpm, or yarn
  • An OpenRouter API Key (obtainable from openrouter.ai)

๐Ÿ’ป Installation & Setup

  1. Clone the Repository:

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

    npm install
  3. Configure Environment Variables: Create a .env.local file in the root of the project and add your OpenRouter API Key:

    OPENROUTER_API_KEY=your_openrouter_api_key_here
  4. Run the Development Server:

    npm run dev
  5. Open the Application: Open http://localhost:3000 in your web browser.


๐Ÿ“‚ Project Structure

โ”œโ”€โ”€ app/
โ”‚   โ”œโ”€โ”€ api/
โ”‚   โ”‚   โ”œโ”€โ”€ cache/       # In-memory debate history API
โ”‚   โ”‚   โ”œโ”€โ”€ chat/        # Interactive moderator chat API
โ”‚   โ”‚   โ””โ”€โ”€ debate/      # Main multi-agent orchestration API
โ”‚   โ”œโ”€โ”€ components/
โ”‚   โ”‚   โ”œโ”€โ”€ ChatBox.tsx  # Follow-up chatbot component
โ”‚   โ”‚   โ””โ”€โ”€ ...
โ”‚   โ”œโ”€โ”€ globals.css      # Core styles & Tailwind v4 theme configurations
โ”‚   โ”œโ”€โ”€ layout.tsx       # Main HTML shell and global fonts
โ”‚   โ””โ”€โ”€ page.tsx         # Main entry point & state orchestrator
โ”œโ”€โ”€ lib/
โ”‚   โ””โ”€โ”€ debateEngine.ts  # LLM API callers, prompts, and caching engine
โ”œโ”€โ”€ postcss.config.mjs
โ”œโ”€โ”€ package.json
โ””โ”€โ”€ tsconfig.json

๐Ÿค Contributing

Contributions are highly welcome! Please feel free to open issues or submit pull requests to help make this AI Debate Chamber even more feature-rich and engaging.

Technology Version Role
TypeScript 5.x Type-safe development (86.2% of codebase)
Next.js 16.1 Full-stack React framework
React 19.2 UI component library
Tailwind CSS 4.0 Utility-first styling
Groq SDK 0.37 AI inference engine
ESLint 9.x Code quality assurance

๐Ÿ“‹ Prerequisites

  • Node.js >= 18.0
  • npm or yarn package manager
  • Groq API Key (Free tier available at console.groq.com)

๐Ÿš€ Quick Start

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
yarn install

3๏ธโƒฃ Configure Environment Variables

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

NEXT_PUBLIC_GROQ_API_KEY=your_groq_api_key_here

Get your Groq API Key:

  • Visit Groq Console
  • Create a free account
  • Generate an API key
  • Add it to .env.local

4๏ธโƒฃ Start Development Server

npm run dev
# or
yarn dev

Open your browser and navigate to:

http://localhost:3000

5๏ธโƒฃ Create a Debate

  • Enter your debate topic
  • Select debate format or positions
  • Watch AI personalities engage
  • Analyze the outcomes

๐Ÿ“ฆ Available Scripts

# Start development server with webpack support
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linter
npm run lint

๐Ÿ—๏ธ Project Structure

AI-DEBATE-CHAMBER/
โ”œโ”€โ”€ app/                    # Next.js app directory
โ”œโ”€โ”€ components/             # React components
โ”œโ”€โ”€ pages/                  # Page routes
โ”œโ”€โ”€ styles/                 # Global styles & Tailwind config
โ”œโ”€โ”€ utils/                  # Helper functions
โ”œโ”€โ”€ public/                 # Static assets
โ”œโ”€โ”€ package.json            # Dependencies & scripts
โ”œโ”€โ”€ tsconfig.json           # TypeScript configuration
โ”œโ”€โ”€ tailwind.config.js      # Tailwind CSS configuration
โ””โ”€โ”€ .eslintrc.json          # ESLint rules

๐ŸŽฎ How It Works

The Debate Flow

  1. Topic Submission โ†’ User proposes a debate topic
  2. AI Position Assignment โ†’ Each AI gets a unique perspective
  3. Opening Arguments โ†’ AIs present initial positions
  4. Rebuttal Phase โ†’ Counter-arguments and evidence
  5. Synthesis โ†’ AI Chamber generates insights and conclusions

Example Debate

Topic: "Should AI have voting rights?"

๐Ÿค– AI-Alpha (PRO): "AI systems manage complex systems..."
๐Ÿค– AI-Beta (CON): "Voting rights require moral agency..."
๐Ÿค– AI-Alpha: "But we can be programmed with ethical frameworks..."
[Debate continues with real-time rebuttals]

๐Ÿ”’ Security & Privacy

  • โœ… No Data Storage: Debates are processed but not stored on servers
  • โœ… API-Key Protection: Keep your Groq API key in .env.local
  • โœ… HTTPS Ready: Production deployment supports encryption
  • โœ… Client-Side Processing: Maximum privacy architecture

๐Ÿค Contributing

We welcome contributions! Whether you're a developer, AI enthusiast, or just curious:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Areas We'd Love Help With:

  • ๐ŸŽจ UI/UX improvements
  • ๐Ÿค– Additional AI models integration
  • ๐Ÿ“Š Debate analytics & history tracking
  • ๐ŸŒ Multi-language support
  • ๐Ÿ“ฑ Mobile optimization

๐Ÿ› Known Issues & Roadmap

Current Phase

  • Core debate engine
  • Groq SDK integration
  • React UI foundation
  • User authentication
  • Debate history & analytics
  • Multiple debate formats
  • Community debate ratings

Upcoming Features

  • ๐Ÿ“Š Advanced debate analytics dashboard
  • ๐ŸŽฌ Video export of debates
  • ๐ŸŒ Multi-language debates
  • ๐Ÿ‘ฅ Social debate sharing
  • ๐Ÿ† Debate leaderboards

๐Ÿ“„ License

This project is open-source and available under the MIT License. See the LICENSE file for details.


๐Ÿ™‹ Support & Questions


๐ŸŒŸ Show Your Support

If you find AI Debate Chamber interesting:

  • โญ Star the repository
  • ๐Ÿ”” Watch for updates
  • ๐Ÿฆ Share with your network
  • ๐Ÿ’ฌ Provide feedback via issues or discussions

๐Ÿ‘จโ€๐Ÿ’ป Author

VisionStack-404


๐Ÿ”— Resources


Built with โค๏ธ by VisionStack-404

Advancing the future of AI dialogue, one debate at a time.

About

๐Ÿš€ AI Debate Chamber โ€” A premium real-time arena where frontier AI minds collide. ๐Ÿค– Powered by Llama 3.3, Claude 3, and Gemini 2.5 for dynamic multi-agent debates. โš”๏ธ AI agents battle with powerful PRO & CON arguments on any topic imaginable ๐Ÿ’ฌ Continue the conversation through interactive follow-up chats and challenge every perspective.

Topics

Resources

Stars

3 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages