Enter a topic and watch an Optimist and a Skeptic AI take turns, search the web on their own, and hand off to a Moderator who sums up every round and writes a final report. I built this final project to test LangGraph multi-agent flows: FastAPI streams over SSE, and the Next.js frontend runs on Cloudflare Pages.
DebateAI in about a minute. The cover and characters are AI-generated (Codex), the narration is an AI voice (Gemini TTS), and the dialogue is illustrative.
This was my final project for Advanced Web Programming in the first semester of junior year. I wanted to build something where several AIs work together, not a single LLM call.
I was curious about LangGraph at the time. It promises to manage multiple AI roles, tool calls and turn-taking as one graph, but I had never used it. Instead of reading the docs, I decided to build a product that could not work without those features.
A debate turned out to be a good fit:
The other half of the motivation was simpler: I wanted to see what two AIs arguing with each other would actually look like.
| Role | Stance | What it does |
|---|---|---|
| 🟢 Optimist (for) | Supports the topic | Speaks first with arguments and data; 2–3 sentences per turn, no conceding |
| 🔴 Skeptic (against) | Challenges the topic | Looks for holes and asks for evidence; searches the web first when it needs to |
| 🔵 Moderator (summarizer) | Neutral | Writes an 80–120 character summary after every round, and a 200–300 character final report: both sides’ arguments, disagreements, assessment and recommendations |
Both debaters decide for themselves whether to search. Only the titles and snippets of the top 3 results go to the model, and a status bar shows “Optimist is searching: …” as it happens.
Home: type a topic and press Start. The sidebar starts a new debate and lists the five most recent ones.
Text streams in token by token over SSE. When a debater decides to search, the status bar shows the query.
After each round the Moderator lists the main arguments and unresolved points before the next round starts.
After three rounds the Moderator writes a final report: both sides’ arguments, disagreements, assessment and recommendations, rendered with react-markdown.
To be honest, I can’t capture that screen right now: the live site hits the Groq account’s limit of 8,000 tokens per minute (HTTP 429) in round two or three, and the code does not wait and retry on 429, so the debate stops.
The history page lists ten debates per page; open one to replay it. A debate is only saved when it finishes, so after the quota interruptions it is currently empty.
Settings: theme (light / dark / system) and language (Chinese / English).
The About page. Its "sources with confidence scores", "issue matrix" and "one-click export" were plans; the code never implemented them.
The pricing page was a productization exercise; its footer says the prices are examples, and nothing is charged.
The system has three layers:
fetch and a ReadableStream, so no WebSocket is needed.status, speaker, token, tool_start, tool_end, speaker_end, complete, error), and the frontend updates the screen by event type.One debate is one state graph:
The whole debate shares one state: messages, topic, current speaker, round number, search count, last speaker and the debate’s language. Conditional edges decide every next step, so the code needs no pile of if statements to track whose turn it is.
web_search_tool tries Tavily first, then DuckDuckGo. If both come back empty, it returns a note telling the debater to argue from what it already knows, so the debate never stalls.
The main model is gpt-oss-120b on Groq, falling back to kimi-k2-instruct and then llama-3.1-8b-instant. At first the fallback did not work at all; the next section explains why.
| When | What |
|---|---|
| Late November | Picked the topic, created a monorepo with FastAPI and Next.js, and confirmed the two ends could talk |
| Early December | Built SSE streaming with fake data first to make sure the frontend could render token by token, then switched to real Groq streaming; deployed both ends |
| Mid December | Rebuilt the debate flow as a LangGraph StateGraph, with the search tool and the Moderator |
| Late December | History, bilingual UI, themes, model fallback, automated tests |
| Early January | Wrap-up and final review |
\\n\\n instead of real newlines, so the browser never saw event boundaries. I wrote an sse_event() helper to produce the SSE format consistently..env.local took priority over the production variables, so the deployed frontend still called the local API. Sorting out the load order fixed it.astream_events v2 exposed the tool events, and I added a limit of three searches per role.gpt-oss-120b was reliable.max_retries above 0, the Groq SDK kept retrying the same model internally and swallowed rate-limit errors, so LangChain’s with_fallbacks() never got a chance. Setting max_retries to 0 let errors surface immediately, and the fallback finally worked.with_fallbacks() before bind_tools() left the fallback without tools. The fix was to bind_tools() on each model first, then wrap the fallback./history/[id], so they use a ?id= query parameter with Suspense.The full DebateAI source: FastAPI backend, LangGraph flow, Next.js frontend and CI setup.
Type a topic and start a debate.
The framework that manages the AI roles, tool calls and turn state.