Agent Battle Arena

Agent Battle Arena is a turn-based tactical battle game where two autonomous AI
agents — one controlling the player, one controlling the enemy — reshape the
entire interface after every single action. This goes far beyond text chat:
every turn produces a live A2UI component payload that drives HP bars, energy
meters, a special move tracker, win-probability charts, damage history charts,
stat cards, and a real-time battle log — all rendered dynamically by the agent,
not by static screens.

The core innovation is a two-agent LangGraph state machine. A player_node
resolves the human’s chosen action, then an enemy_node immediately counters using
a difficulty-aware rule engine (Easy / Medium / Hard). Both nodes share a single
BattleState TypedDict and emit AG-UI state snapshots independently — so the
frontend receives two live UI updates per turn, one when the player hits and one
when the enemy hits back. The interface feels like a live tactical exchange, not
a form submission.

Stack breakdown:

— LangGraph (LangChain): Two-node StateGraph (player_node → enemy_node) with
MemorySaver checkpointing. All game logic is deterministic — no LLM calls
during battle resolution. Fast, predictable, testable.

— CopilotKit + AG-UI: CopilotRuntime v2 runs in a Hono BFF (port 4010) and
streams BattleState snapshots to the React frontend via AG-UI transport.
useCoAgent subscribes to state changes and triggers re-renders on every node
completion.

— A2UI (Google DeepMind): The agent emits a structured component schema every
turn — an array of { type, id, data } objects. A2UIRenderer on the frontend
maps each type to a React component (StatCard, AnimatedBar, WinProbChart,
ActionForm, BattleLog). The agent owns the layout; the frontend owns the
component implementations. This is the declarative generative UI tier.

— Manufact MCP: Three MCP tools registered as mcpApps in the BFF —
calculate_probability, apply_damage, and pick_enemy_move. These give the
agent a clean tool surface and demonstrate MCP as a live battle utility layer.

— CopilotKit Intelligence (Postgres + Redis): Every battle is a durable thread.
Closing and reopening the tab resumes the exact battle state — same HP, same
turn number, same log.

All three generative UI tiers are used in one session: Controlled (pre-built
React components), Declarative (A2UI schema-driven rendering every turn), and
Open-ended (MCP App generating the end-of-battle narrative summary as live HTML).
A full battle demo runs in under two minutes.

The project was built entirely during the hackathon on top of the
Generative-UI-Global-Hackathon-Starter-Kit
(github.com/jerelvelarde/Generative-UI-Global-Hackathon-Starter-Kit),
which provided the base monorepo structure, Hono BFF scaffold, LangGraph
Deep Agent scaffold, Manufact MCP server scaffold, and CopilotKit Intelligence
setup. All game logic, agent design, A2UI integration, UI components, and
battle mechanics were created during the hackathon.