Arena — Productivity skill for Claude Code

**This repository is no longer actively maintained.** The source code has been moved to [browserbase/gtm-demos](https://github.com/browserbase/gtm-demos/tree/main/apps/arena).

Arena

[Demo Website](https://arena.browserbase.com)

A side-by-side comparison playground for AI browser automation agents. Compare how different AI models (Google, OpenAI, Anthropic) control browsers using natural language through Stagehand and Browserbase.

Features

• 🥊 Side-by-Side Comparison: Run Google vs OpenAI or Google vs Anthropic simultaneously
• 🤖 Multiple AI Models: Google Computer Use, OpenAI Computer Use, and Anthropic Claude
• 🌐 Real Browser Environment: Powered by Browserbase with actual Chrome instances
• 🎯 Natural Language Commands: Describe tasks in plain English
• 📊 Real-time Streaming: Watch both agents work in parallel with live updates
• 🔄 Flexible Provider Selection: Switch right-side provider between OpenAI and Anthropic

Tech Stack

• Frontend: Next.js 15 with TypeScript, React 19, and Tailwind CSS
• AI Models:
  • Google: computer-use-preview-10-2025
  • OpenAI: computer-use-preview-2025-03-11
  • Anthropic: claude-sonnet-4-5-20250929
• Browser Automation: Browserbase + Stagehand
• Streaming: Server-Sent Events (SSE) for real-time updates
• UI Components: Framer Motion animations, Lucide React icons
• Analytics: PostHog for user tracking

Prerequisites

• Node.js 18.x or later
• pnpm (recommended) or npm
• API keys for Google AI Studio, OpenAI, Anthropic, and Browserbase

Getting Started

1. **Clone the repository:**

   git clone https://github.com/browserbase/arena
   cd arena

2. **Install dependencies:**

   pnpm install

3. **Set up environment variables:**

   cp .env.example .env.local

   Then edit `.env.local` with your API keys:

   # AI Provider API Keys
   GOOGLE_API_KEY=your_google_api_key_here
   OPENAI_API_KEY=your_