AgenticAgent: The Debate Arena

• 

  homepage

• 

  agent selection screen

• 

  debate screen

• 

  victory screen

Inspiration

After looking through all the different domains on name.com, agenticagent.chat stood out the most. Typically, agents are built to assist us, but I wanted to build something where they could compete against one another. A debate format felt like the perfect arena: structured enough to be fair, open enough to be surprising, and inherently dramatic. Every round is a miniature experiment in how an AI personality shapes its reasoning under pressure.

I also wanted to explore what human-in-the-loop actually meant in such a project. Not a checkbox in a settings menu, but actually rewriting the agent's strategy before the next debate round fires.

What It Does

AgenticAgent: The Debate Arena is a real-time AI debate platform. You pick a topic, deploy two AI agents with distinct personalities, and watch them argue it out round by round.

Each round, both agents stream their arguments live token by token with typewriter audio feedback. A neutral judge scores the round and explains their reasoning. Three spectator agents react in character: The Heckler, The Superfan, and The Undecided. The Undecided returns a lean score from 0 to 100 driving a live persuasion meter, and a momentum trendline plots their lean across all rounds.

A Haiku-powered strategy briefing prepares each agent for the next round, surfacing their opponent's weakest claim and a suggested counter-tactic. In Coach Mode, you can edit that briefing before the round fires, injecting your own instructions directly into the agent's system prompt.

After 2+ rounds, a final verdict declares a decisive winner with a best line quote and shareable text. Win/loss records persist via localStorage so agents build reputations across sessions.

How We Built It

Backend: Node.js + Express using the Anthropic SDK with Server-Sent Events for streaming. Each round fires a pipeline:

• Character 1 streams via client.messages.stream() → SSE char1_token events
• Character 2 sees Character 1's argument and counter-streams → char2_token events
• Three parallel Haiku calls run simultaneously: judge scoring, three audience reactions, and two strategy briefings

Frontend: React + Vite + Tailwind CSS v3.

• useRef to capture streaming argument text across SSE closures without stale state
• Web Audio API for all sounds: typewriter clicks, score chimes, crowd murmur. Zero audio dependencies
• requestAnimationFrame with cubic ease-out for animated score counting
• SVG sparkline for the momentum chart, canvas-confetti for the verdict

Models: claude-sonnet-4-5 for arguments and judging, claude-haiku-4-5-20251001 for all parallel post-round calls.

Challenges

Streaming history state. React's closure model means useState values inside SSE event handlers are stale by the time later events fire. Character 2 needed access to Character 1's completed text, but the state hadn't propagated by the time char2_done fired. We fixed it using a useRef that synchronously captured the argument as tokens arrived.

Scores stuck at 0/0. The judge was being called with the initial conversation history before either argument was appended. The fix required restructuring the entire round pipeline: build history1, stream argument 1, build history2 including argument 1, stream argument 2, build judgeHistory from both completed arguments, then call the judge.

Keeping Coach Mode honest. Strategy edits needed to actually reach the model, not just update UI state. We solved this by converting the strategy object into a natural-language coach note string at request time and appending it to the agent's system prompt.

Accomplishments

The Coach Mode loop. The full human-in-the-loop cycle works: AI generates strategy → human edits it → edited text reaches the model as a system prompt injection → agent's next argument reflects the change. Genuinely interactive, not cosmetic.

Parallel post-round architecture. Judge, three audience agents, and two strategy agents all resolve concurrently. What could be six sequential LLM calls completes in the time of the slowest single call.

The momentum trendline. Plotting the Undecided's lean score across rounds turns a snapshot metric into a story. You can see a turning point, a comeback, a collapse.

What We Learned

Adversarial framing unlocks engagement that single-agent assistants never achieve. Two agents disagreeing is genuinely watchable in a way that one agent being helpful never is.

Structured JSON from small models is reliable when the prompting is tight. Enforcing JSON-only responses and stripping code fences before parsing turned a fragile pipeline into a stable one.

Human-in-the-loop is most powerful when the loop is tight. Coach Mode works because the edit happens in the natural pause between rounds, making intervention feel intentional rather than interruptive.

What's Next

• Live multiplayer: two humans each coaching one agent in real time, seeing each other's momentum meter but not each other's strategy notes
• Audience voting: real spectators submit their lean before The Undecided speaks, creating a prediction vs. AI judgment gap
• Persistent ELO ratings: move win/loss records to a database so agents build reputations across all users
• Debate formats: Oxford style, Lincoln-Douglas, or timed Speed Round with a visible countdown
• Replay and share: encode full debates into a shareable URL

Built With

• claude
• css
• express.js
• html
• javascript
• node.js
• react
• svg
• tailwind
• vercel
• vite