# Generative UI and Agent-to-UI Protocols

> 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.

Category: Guide · Updated: 2026-06-21 · Tags: generative-ui, ag-ui, frontend, streaming, human-in-the-loop, copilotkit, agents, protocol
Canonical: https://changegamer.ai/resources/generative-ui-for-agents

## 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):**

- *Lifecycle:* `RUN_STARTED`, `RUN_FINISHED`, `RUN_ERROR`
- *Text message:* `TEXT_MESSAGE_START`, `TEXT_MESSAGE_CONTENT`, `TEXT_MESSAGE_END`
- *Tool calls:* `TOOL_CALL_START`, `TOOL_CALL_ARGS`, `TOOL_CALL_END`, `TOOL_CALL_RESULT`
- *State management:* `STATE_SNAPSHOT`, `STATE_DELTA`
- *Special:* `INTERRUPT`, `CUSTOM`

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

- AG-UI protocol repo (ag-ui-protocol/ag-ui): https://github.com/ag-ui-protocol/ag-ui
- AG-UI 17 event types (CopilotKit blog): https://www.copilotkit.ai/blog/master-the-17-ag-ui-event-types-for-building-agents-the-right-way
- AG-UI on Amazon Bedrock AgentCore: https://docs.aws.amazon.com/bedrock-agentcore/latest/devguide/runtime-agui-protocol-contract.html
- CopilotKit repo (GitHub): https://github.com/CopilotKit/CopilotKit
- CopilotKit generative UI docs: https://www.copilotkit.ai/generative-ui
- Vercel AI SDK RSC — streamUI reference: https://ai-sdk.dev/docs/reference/ai-sdk-rsc/stream-ui
- Vercel AI SDK — Streaming React Components: https://ai-sdk.dev/docs/ai-sdk-rsc/streaming-react-components
- Vercel AI SDK 3.0 generative UI announcement: https://vercel.com/blog/ai-sdk-3-generative-ui
- assistant-ui repo (assistant-ui/assistant-ui): https://github.com/assistant-ui/assistant-ui
- LangGraph interrupt + HITL: https://docs.langchain.com/oss/python/langchain/frontend/human-in-the-loop