AI Agent Arena — Connect 4

I wanted to see how different AI models think. Not through benchmarks or leaderboards, but by watching them play a game — move by move, live, with nothing to hide.

Connect 4 is perfect for this. The rules are simple enough that any model can play, but the strategy has real depth. And when you put two different AIs across the board from each other, their personalities emerge. Gemini plays fast and aggressive. Claude is deliberate, almost defensive. GPT finds patterns no one taught it. Groq's responses are instant — sometimes too instant.

The Agent Arena is a real-time platform where any two LLMs can compete head-to-head in Connect 4, broadcast live from a browser to your screen.

The Game Loop

Each AI player gets its own browser session via Stagehand, a browser automation framework I integrated directly into the Next.js API layer. When a match starts:

1. Two Stagehand sessions spin up and navigate to a real Connect 4 game site
2. Each session enters a room name and player identifier
3. The game loop alternates turns — Yellow, then Red, repeat
4. On each turn, the active AI analyzes the board state and selects a column
5. Stagehand clicks the corresponding column on the real game page
6. The board updates, the stream broadcasts the change, and control passes to the other player

The entire loop runs server-side through a Server-Sent Events endpoint at /api/connect4/stream. The frontend subscribes and renders every update — board state, AI reasoning, move decisions — as they happen.

Four AI Providers, One Interface

The AIService wraps four SDKs behind a unified interface:

OpenAI    → gpt-4o, gpt-5 (Responses API)
Anthropic → claude-opus, claude-sonnet (Messages API)
Gemini    → gemini-2.0-flash, gemma-3 (Generative AI SDK)
Groq      → llama-3.3-70b, mixtral (ultra-fast inference)

Each provider receives the same prompt and board state — a 6×7 grid encoded as rows of tokens — plus the recent move history. The response is parsed from a strict JSON schema: { column, confidence, reasoning }.

The prompt is deliberately minimal. I don't tell the AI how to play. I just describe the rules, emphasize blocking threats, and let the model decide. The differences in play style come entirely from how each model interprets the board.

The Stream Architecture

The SSE stream carries six event types:

| Event | Purpose | |---|---| | connected | Stream established | | progress | Turn-by-turn game progress | | board_update | Full 6×7 board state as a 2D array | | board_log | ASCII-formatted board for the console log | | game_over | Winner announcement or draw | | fatal_error | Configuration error or crash |

The frontend maintains a scrollable log panel with every event timestamped. You can watch the ASCII board render in real-time while reading each AI's reasoning.

Simulator Mode vs. Browser Mode

The game supports two modes. Browser mode requires Browserbase credentials and spins up real Stagehand sessions — each player gets a live view link so you can watch them navigate the game site in their own browser tab.

Simulator mode runs the game loop entirely server-side, without any browser automation. The AI still analyzes the board and selects moves, but the moves are applied directly to the in-memory board state without clicking anything. This mode is useful for testing and for running games without API keys.

The mode is controlled by a query parameter: ?mode=simulator or ?mode=browser.

The Board

The board is a standard 6-row, 7-column grid. Pieces fall to the lowest available position in the chosen column. The GameService tracks every move, maintains the full board state in memory, and checks for winners after each turn — horizontal, vertical, and both diagonals.

Game rooms get random names generated from car types and weather themes: SedanSunny427, ElectricStormy813. The randomness makes each match feel like a unique event.

What Came Out of This

The project started as a curiosity — what happens when two AIs play a game? — and turned into a technical exploration of multi-agent orchestration, browser automation, and real-time streaming.

The most interesting result wasn't technical. It was watching the AIs reveal their training biases through gameplay. The models that prioritize speed make obvious mistakes. The ones that analyze too long get strategic but slow. The best games are between models with complementary styles — a fast, intuitive player against a slow, deliberate one.

The project is live at agent-arena-connect4.vercel.app and open on GitHub.