Most AI applications still showcase the model as a chat box. That interface is simple, but it hides what agents are actually doing, such as planning steps, calling tools, and updating state. Generative UI is about letting the agent drive real interface elements, for example tables, charts, forms, and progress indicators, so the experience feels like a product, not a log of tokens.
What is Generative UI?
The CopilotKit team explains Generative UI as to any user interface that is partially or fully produced by an AI agent. Instead of only returning text, the agent can drive:
- stateful components such as forms and filters
- visualizations such as charts and tables
- multistep flows such as wizards
- status surfaces such as progress and intermediate results
The key idea is that the UI is still implemented by the application. The agent describes what should change, and the UI layer chooses how to render it and how to keep state consistent.
Three main patterns of Generative UI:
- Static generative UI: the agent selects from a fixed catalog of components and fills props
- Declarative generative UI: the agent returns a structured schema that a renderer maps to components
- Fully generated UI: the model emits raw markup such as HTML or JSX
Most production systems today use static or declarative forms, because they are easier to secure and test.
You can also download the Generative UI Guide here.
But why is it needed for Devs?
The main pain point in agent applications is the connection between the model and the product. Without a standard approach, every team builds custom web-sockets, ad-hoc event formats, and one off ways to stream tool calls and state.
Generative UI, together with a protocol like AG-UI, gives a consistent mental model:
- the agent backend exposes state, tool activity, and UI intent as structured events
- the frontend consumes those events and updates components
- user interactions are converted back into structured signals that the agent can reason over
CopilotKit packages this in its SDKs with hooks, shared state, typed actions, and Generative UI helpers for React and other frontends. This lets you focus on the agent logic and domain specific UI instead of inventing a protocol.
How does it affect End Users?
For end users, the difference is visible as soon as the workflow becomes non-trivial.
A data analysis copilot can show filters, metric pickers, and live charts instead of describing plots in text. A support agent can surface record editing forms and status timelines instead of long explanations of what it did. An operations agent can show task queues, error badges, and retry buttons that the user can act on.
This is what CopilotKit and the AG-UI ecosystem call agentic UI, user interfaces where the agent is embedded in the product and updates the UI in real time, while users stay in control through direct interaction.
The Protocol Stack, AG-UI, MCP Apps, A2UI, Open-JSON-UI
Several specifications define how agents express UI intent. CopilotKit’s documentation and the AG-UI docs summarize three main generative UI specs:
- A2UI from Google, a declarative, JSON based Generative UI spec designed for streaming and platform agnostic rendering
- Open-JSON-UI from OpenAI, an open standardization of OpenAI’s internal declarative Generative UI schema for structured interfaces
- MCP Apps from Anthropic and OpenAI, a Generative UI layer on top of MCP where tools can return iframe based interactive surfaces
These are payload formats. They describe what UI to render, for example a card, table, or form, and the associated data.
AG-UI sits at a different layer. It is the Agent User Interaction protocol, an event driven, bi-directional runtime that connects any agent backend to any frontend over transports such as server sent events or WebSockets. AG-UI carries:
- lifecycle and message events
- state snapshots and deltas
- tool activity
- user actions
- generative UI payloads such as A2UI, Open-JSON-UI, or MCP Apps
MCP connects agents to tools and data, A2A connects agents to each other, A2UI or Open-JSON-UI define declarative UI payloads, MCP Apps defines iframe based UI payloads, and AG-UI moves all of those between agent and UI.
Key Takeaways
- Generative UI is structured UI, not just chat: Agents emit structured UI intent, such as forms, tables, charts, and progress, which the app renders as real components, so the model controls stateful views, not only text streams.
- AG-UI is the runtime pipe, A2UI and Open JSON UI and MCP Apps are payloads: AG-UI carries events between agent and frontend, while A2UI, Open JSON UI, and MCP UI define how UI is described as JSON or iframe based payloads that the UI layer renders.
- CopilotKit standardizes agent to UI-wiring: CopilotKit provides SDKs, shared state, typed actions, and Generative UI helpers so developers do not build custom protocols for streaming state, tool activity, and UI updates.
- Static and declarative Generative UI are production friendly: Most real apps use static catalogs of components or declarative specs such as A2UI or Open JSON UI, which keep security, testing, and layout control in the host application.
- User interactions become first class events for the agent: Clicks, edits, and submissions are converted into structured AG-UI events, the agent consumes them as inputs for planning and tool calls, which closes the human in the loop control cycle.
Generative UI sounds abstract until you see it running.
If you’re curious how these ideas translate into real applications, CopilotKit is open source and actively used to build agent-native interfaces – from simple workflows to more complex systems. Dive into the repo and explore the patterns on GitHub. It’s all built in the open.
You can find here additional learning materials for Generative UI. You can also download the Generative UI Guide here.
