AI Debater Arena 🎭

An interactive platform where three leading AI models - Claude (Anthropic), ChatGPT (OpenAI), and Gemini (Google) - engage in structured debates on topics of your choice.

Features

• Multi-AI Debate: Watch Claude, ChatGPT, and Gemini debate in real-time
• Round-Robin Format: Each AI takes turns presenting arguments in a structured manner
• Moderator Control: You control the pace of the debate
• Beautiful UI: Modern, responsive interface with gradient designs
• Real-time Updates: See arguments as they're generated

Tech Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• AI APIs:
  • Anthropic API (Claude)
  • OpenAI API (ChatGPT)
  • Google Generative AI (Gemini)

Prerequisites

Before you begin, you'll need API keys for all three AI services:

1. Anthropic API Key - Get it from Anthropic Console
2. OpenAI API Key - Get it from OpenAI Platform
3. Google API Key - Get it from Google AI Studio

Installation

1. Clone the repository:

   git clone <your-repo-url>
   cd Debaite

2. Install dependencies:

   npm install

3. Set up environment variables:

   Create a .env file in the root directory:

   cp .env.example .env

   Edit .env and add your API keys:

   ANTHROPIC_API_KEY=your_anthropic_api_key_here
   OPENAI_API_KEY=your_openai_api_key_here
   GOOGLE_API_KEY=your_google_api_key_here

4. Run the development server:

   npm run dev

5. Open your browser:

   Navigate to http://localhost:3000

Usage

1. Start a Debate:

   • Enter a debate topic in the input field
   • Click "Start Debate"

2. Moderate the Debate:

   • Click "Next Argument" to hear from the next AI
   • The AIs will take turns: Claude → ChatGPT → Gemini → Claude...
   • Each complete cycle is considered one round

3. End the Debate:

   • Click "End Debate" when you're satisfied with the discussion

Example Topics

Try these debate topics:

• "Is artificial intelligence more beneficial or harmful to society?"
• "Should social media platforms be regulated by governments?"
• "Is remote work better than in-office work for productivity?"
• "Should we prioritize space exploration or ocean exploration?"
• "Is cryptocurrency the future of money?"

Project Structure

Debaite/
├── app/
│   ├── api/
│   │   └── debate/
│   │       └── route.ts          # API endpoint for debate management
│   ├── globals.css                # Global styles
│   ├── layout.tsx                 # Root layout
│   └── page.tsx                   # Main page component
├── components/
│   ├── DebateControls.tsx         # Control buttons
│   └── DebateMessage.tsx          # Message display component
├── lib/
│   ├── ai-clients/
│   │   ├── claude.ts              # Claude API integration
│   │   ├── chatgpt.ts             # ChatGPT API integration
│   │   └── gemini.ts              # Gemini API integration
│   ├── debate-orchestrator.ts     # Debate logic and round-robin management
│   └── types.ts                   # TypeScript types
├── .env.example                   # Example environment variables
├── next.config.js                 # Next.js configuration
├── package.json                   # Dependencies
├── tailwind.config.js             # Tailwind CSS configuration
└── tsconfig.json                  # TypeScript configuration

How It Works

1. Debate Orchestrator: Manages the debate flow, keeping track of rounds and which AI should speak next
2. Round-Robin Logic: Ensures each AI gets equal opportunity to speak in a predictable order
3. Context Management: Each AI receives the full conversation history to maintain context
4. API Integration: Each AI service is called with appropriate prompts and conversation history

API Costs

Please note that using this application will incur costs on your API accounts:

• Anthropic: Pay-per-token pricing
• OpenAI: Pay-per-token pricing
• Google: Free tier available, then pay-per-token

Monitor your usage on each platform's dashboard to avoid unexpected charges.

Customization

Adjust AI Models

Edit the AI client files to use different models:

• lib/ai-clients/claude.ts: Change claude-3-5-sonnet-20241022 to another Claude model
• lib/ai-clients/chatgpt.ts: Change gpt-4-turbo-preview to another OpenAI model
• lib/ai-clients/gemini.ts: Change gemini-1.5-pro to another Gemini model

Modify Response Length

Adjust the max_tokens parameter in each AI client file to control response length.

Change Agent Order

Edit the AGENT_ORDER array in lib/debate-orchestrator.ts to change the speaking order.

Troubleshooting

API Key Issues

If you see authentication errors:

• Verify your API keys are correctly set in .env
• Make sure there are no extra spaces or quotes around the keys
• Check that your API keys are active and have sufficient credits

Build Errors

If you encounter build errors:

rm -rf .next node_modules
npm install
npm run dev

Rate Limiting

If you hit rate limits:

• Add delays between API calls
• Consider upgrading your API tier
• Implement caching for repeated debates

Contributing

Contributions are welcome! Feel free to:

• Add new AI models
• Improve the UI/UX
• Add features like debate scoring
• Implement debate history/saving
• Add more sophisticated prompting strategies

License

MIT License - feel free to use this project for learning and experimentation.

Acknowledgments

• Built with Next.js and TypeScript
• Powered by Claude (Anthropic), ChatGPT (OpenAI), and Gemini (Google)
• Styled with Tailwind CSS

---

Note: This is an educational project. Please use responsibly and be mindful of API costs.