Common Ground

💡 Inspiration

The prompt for this hackathon asked us to build something that amplifies human creativity, helps people find meaning, or supports cultural expression. That framing — combined with Dario Amodei's essay Machines of Loving Grace — pointed me toward a problem that feels increasingly urgent: we have almost no tools that help us genuinely understand people we disagree with politically.

Most political content online is designed to inflame, not illuminate. Algorithms reward outrage. Comment sections are battlegrounds. And yet Amodei's essay envisions a future where AI actively strengthens democracy — not by picking sides, but by helping people reason better together. I wanted to build something that made that concrete and tangible. Not an AI that tells you what to think, but one that slows the conversation down and shows you the human values on both sides.

The core insight was simple: if you truly understood the strongest version of the argument you oppose, you'd be a more informed citizen — and probably a less angry one.

🔨 How I Built It

I built Common Ground entirely with Claude Code, using a multi-agent architecture powered by three parallel Claude instances (claude-sonnet-4-20250514).

The app is a React + Vite frontend with Tailwind CSS — no backend, no database. The Anthropic API is called directly from the browser, with the user supplying their own API key at runtime.

The three-agent system works like this:

• Debater A and B receive the same system prompt but opposite positions. They're instructed to reason inside <thinking> tags before speaking — exploring multiple argument frames, anticipating counterarguments, choosing the most persuasive framing — then deliver a 3–4 sentence argument outside the tags.
• Rebuttal rounds pass each agent the opponent's prior output as context, so they're genuinely responding to each other rather than talking past each other.
• The Moderator receives the full four-turn transcript and produces a structured six-section report: an overview, a steelmanned case for each side, shared values, the genuine point of disagreement, and why the tension matters for democracy.

The debate is paced turn-by-turn with a Continue button — so users are forced to actually read each argument before the next one loads. A live audience reaction meter drifts toward whichever agent is currently speaking, giving the experience a live-TV energy. Clash detection flags when both debaters invoke the same terrain (rights, safety, economy), and every agent's raw <thinking> stream is captured and shown in a collapsible feed so users can read how the AI formed its argument.

🧗 Challenges

The streaming parser was the hardest technical piece. Claude streams tokens one at a time via SSE, and I needed to split the output into two separate UI layers in real time — routing <thinking> content to the reasoning feed and everything after </thinking> to the conclusion panel. Building a stateful character-by-character parser that handles partial tag boundaries across chunk boundaries took several iterations to get right.

The reasoning display broke early on — each tiny SSE chunk (sometimes a single character) was being pushed as a separate array element and rendered as individual lines, making the thinking feed completely unreadable. The fix was straightforward once diagnosed — storing thinking as an accumulated string rather than an array of fragments — but it was a good reminder that streaming UIs have failure modes that only appear at runtime.

Pacing the debate was a design challenge more than a technical one. The first version fired all three agents in parallel, which looked impressive but made the output nearly impossible to read. Slowing it down to a turn-by-turn format with an explicit Continue button felt like a step backward at first, but it completely changed how the app felt to use — it became something you actually engaged with rather than watched scroll by.

Prompt engineering for the moderator required the most iteration. Early versions produced generic "both sides have valid points" summaries that weren't useful to anyone. The breakthrough was giving the moderator a specific six-section structure with explicit ## headers, instructing it to name the specific belief someone would need to update to switch sides — that framing produced dramatically more honest and useful analysis.

📚 What I Learned

Building this taught me that the most interesting use of multi-agent AI isn't parallelism — it's perspective. Running three agents simultaneously was technically straightforward. What was hard, and interesting, was designing agents that genuinely inhabit different roles: one that argues passionately, one that argues the opposite with equal conviction, and one that steps back and synthesizes with intellectual honesty.

I also came away with a much deeper appreciation for streaming UX as a design medium. The fact that you can watch an AI reason in real time — see it consider and discard framings, notice when it pivots — changes the relationship between user and output. It feels less like receiving a verdict and more like watching someone think. That transparency, I think, is part of what makes the tool feel trustworthy rather than oracular.

Most of all, I learned that Claude is genuinely capable of the kind of charitable, nuanced political reasoning that most humans struggle to do in the heat of an argument. That's either very exciting or a little humbling, depending on how you look at it.

Built With

• anthropic
• claude-code
• react
• tailwind
• vercel
• vite