Frontend Agent UX in 7 Days: From Streaming to Generative UI

What Makes Agent Frontends Hard: an Event Protocol and Your First Stream in the Browser

Start with the three things that separate an agent interface from an ordinary chat interface, meet AG-UI as the open event protocol between backend and frontend, then read your first stream in the browser with plain fetch and ReadableStream, and understand why EventSource fails at step one.

Streaming Without Jank: Render Storms, Incremental Markdown, and Scroll Anchoring

Models emit dozens to hundreds of deltas per second, and the naive approach re-renders React on every one of them while dragging down the input the user is typing into. Work through render storms, incomplete Markdown, and stolen scroll position so streaming stays smooth even in long sessions.

Tool Call Visualization and Humans in the Loop: Interruption Is Not Local Interception

Merge the three-part tool call events into a stateful card so users can see what the agent is doing, then implement human-in-the-loop approval and get right the thing most teams get wrong: approval is an interrupt and resume of a run, not a modal the frontend throws up to block a request.

Reasoning and Shared State: a Collapsible Thinking Panel and Incremental Sync

First render the model's reasoning as a collapsed-by-default panel, then introduce what really separates an agent frontend from a chat interface: a state shared with the backend, seeded by full snapshots and updated by JSON Patch, so the interface can show progress that lives outside the transcript.

Three Paradigms of Generative UI: From Component Mapping to Declarative Interfaces

There are three ways to let an agent decide what the interface looks like, handing control progressively from the frontend to the model. Implement all three, focusing on their security boundaries and why the most flexible one is usually the most dangerous in production.

Session Control and Long Tasks: Stopping, Retrying, Branching, and Subagents

Turn one-shot question and answer into a session people can actually work in: stop mid-run, retry after failure, edit and resend the last turn, branch from any point. Then handle progress for long tasks, subagent visualization, and how to resume a cut stream without producing duplicate messages.

Accessibility and Performance Budgets: Making Streaming Interfaces Work for Everyone

Streaming output is a disaster for screen readers, and pointing a live region at the streaming element is both the most common and the most wrong fix. Solve it with sentence-level announcement, set a performance budget for the whole workbench, and package seven days of work into a portfolio project.