ChangeGamer

← All resources

Generative UI and Agent-to-UI Protocols

Guide · updated 2026-06-21 · Markdown variant

How agents drive UI dynamically: the AG-UI protocol, framework options (Vercel AI SDK, CopilotKit, assistant-ui, LangGraph), streaming component patterns, and human-in-the-loop UI design.

What generative UI means for agents

Classical agents return text. Generative UI agents render or drive interface components dynamically at runtime — streaming partial UI, triggering tool-call-driven component swaps, surfacing agent state visually, and pausing for human approval before continuing. The result is a UI whose structure is determined at inference time, not hardcoded at build time.

This is architecturally distinct from chat streaming (plain text deltas). An agent's output is a mixed stream of text chunks, tool calls, state snapshots, and lifecycle signals. The frontend needs a standard way to receive and render all of those incrementally. For the underlying streaming mechanics see /resources/streaming-for-agents.

The agent↔UI protocol problem

Without a protocol, every team builds a bespoke event contract between their agent backend and their frontend. This leads to tight coupling: the UI breaks when the agent framework changes, and any new agent framework requires a new frontend adapter.

A dedicated agent↔UI event protocol solves this by defining a typed event vocabulary — the same way MCP defines agent↔tool communication and A2A defines agent↔agent communication. For the full protocol-layering picture see /resources/mcp-vs-a2a.

AG-UI: the Agent-User Interaction Protocol

AG-UI (github.com/ag-ui-protocol/ag-ui) is an open, lightweight, event-based protocol that standardizes how AI agents connect to user-facing applications. It is maintained by the ag-ui-protocol organization on GitHub and originated from CopilotKit, which remains the primary steward. As of June 2026 the repo has 14k+ stars and 27+ releases; the protocol has been adopted by Google, LangChain, AWS (Amazon Bedrock AgentCore), Microsoft, Mastra, and PydanticAI.

How it works. The frontend sends a single HTTP POST to the agent endpoint and then listens to a Server-Sent Events (SSE) stream. The agent emits typed events describing its actions; the frontend reacts to them. The protocol is transport-agnostic (SSE, WebSocket, or WebHook); SSE is the canonical transport.

Verified event categories and types (16 total):

The STATE_DELTA event enables bi-directional state sync: both the agent backend and UI components can read from and write to a shared state layer in real time. INTERRUPT is the HITL mechanism — the agent pauses, emits an interrupt payload, and waits for the UI to send a resume command.

AG-UI complements rather than replaces MCP (agent↔tools) and A2A (agent↔agent): the three protocols address different edges of the agent graph.

Framework approaches (verified)

Vercel AI SDK — streamUI / AI SDK RSC (ai-sdk.dev). The streamUI function streams React Server Components alongside LLM output: tool calls can return React components directly, enabling tool-call-as-UI. Status as of 2026: AI SDK RSC is experimental and development is paused; Vercel recommends useChat (AI SDK UI, client-side hooks) for production. A newer json-render pattern replaces direct RSC streaming with schema-validated JSON that the client maps to registered components.

CopilotKit (docs.copilotkit.ai). The primary maintainer of AG-UI. Provides React hooks and components for generative UI, shared state, and HITL flows on top of the AG-UI event stream. Supports React, Angular, Vue, React Native, and Slack. Includes useCopilotAction for rendering interactive approval components mid-flight.

assistant-ui (assistant-ui.com). Open-source TypeScript/React component library (Radix-UI-inspired composable primitives) for building agent chat UIs. First-class integrations with LangGraph and Vercel AI SDK. Handles streaming, auto-scroll, retries, tool-call rendering, markdown, and accessibility out of the box.

LangGraph streaming + interrupt model (docs.langchain.com). LangGraph emits state deltas via stream_mode="updates" (preferred; bandwidth-efficient) or full state via stream_mode="values". Interrupt nodes pause graph execution at predefined checkpoints; the useStream hook in compatible frontends surfaces stream.interrupt for rendering approval UI. Persistence is handled via checkpointers for durable HITL.

Key patterns and concerns

Streaming partial UI. Render a skeleton/loading component immediately when a tool call starts; swap in the real component when the tool result arrives. Avoids blank states during long agent operations.

Tool-call-as-UI. An agent tool call is a UI action: show_chart(data) triggers a chart component, not a text description. Tool schemas define the contract between agent and UI.

Human-in-the-loop approval components. HITL pauses are a first-class pattern: the agent emits an INTERRUPT (AG-UI) or a checkpointed interrupt node (LangGraph), the UI renders an approve/reject/edit form, and execution resumes on user confirmation. See /resources/multi-agent-orchestration-patterns for HITL architecture.

State synchronization. AG-UI's STATE_SNAPSHOT / STATE_DELTA events enable the frontend to track agent-side state without polling. Both sides can write to the shared state, making collaborative UIs (agent + human editing the same document) tractable.

Agent-driven UI as an elevated risk surface. An agent that can render arbitrary components or execute UI actions on behalf of the user is a higher-privilege principal than a chatbot. Validate all tool-call inputs against a strict schema before rendering; treat agent-generated UI content as untrusted data, not trusted code. See /resources/agentic-security-checklist.

Verified sources

#generative-ui #ag-ui #frontend #streaming #human-in-the-loop #copilotkit #agents #protocol

Category: Guide