What generative UI is (and isn't)

The one-sentence definition

Generative UI is an interface whose structure is decided by a model at runtime, for a particular person, moment and intent.

Every word in that sentence is doing work.

• Structure, not just content. A chatbot that fills a fixed bubble with text is generating content. When the model decides that the answer should be a table with a filter, a form with three fields, or a map, it is deciding structure. That is the line.
• At runtime. The screen is composed while the person is using the product, not by a developer at build time. Using an AI tool to write a React component that ships next Tuesday is AI-assisted development. It is adjacent and important, but it is not the same thing.
• For a particular person, moment and intent. A generated interface is disposable by default. It exists because this person asked this thing now. That is why it can be more specific than any screen a designer would ship to everyone.

A useful shorthand: traditional software ships the same screens to everyone; generative UI ships a system that can compose the right screen for each request. The design work moves from drawing screens to designing the vocabulary the system composes from and the rules it must obey.

Two directions, one field

Most writing treats generative UI as one-directional: a model produces an interface for a person. In practice there are two flows, and an expert keeps both in view.

1. Agent → person. The model composes UI so a person can understand, decide and act: the chart instead of the paragraph, the approval card instead of "reply YES to confirm".
2. Agent → interface. An agent operates an interface built for people: clicking through a checkout, filling a form, reading a dashboard. This is computer use and browser agents, and increasingly pages that expose tools to agents directly (WebMCP).

They meet in the middle. The interface an agent generates for you is increasingly one another agent will later read and operate. Components that work for both audiences — named, labelled, with explicit actions and declared consequences — are the shared foundation. That is the idea behind Agentable UI, and Lab 08 lets you see a page both ways.

Three questions that classify any system

When you meet a new product, demo or protocol, ask these three questions. They sort almost everything.

1. When is the interface generated?

	Design time	Run time
Who sees the output first	a developer or designer	the end user
Review before users see it	yes, a human reviews code	no, or only automated checks
Examples	v0, Lovable, Bolt, Figma Make	Gemini's dynamic views, ChatGPT apps, CopilotKit in your product

Design-time generation produces code that goes through your normal review and release process. Run-time generation has no human between the model and the user, which is why catalogs, sandboxes and evaluation matter so much more there.

2. What does the model actually emit?

This is the most important axis, and CopilotKit's framing of static, declarative and open-ended generative UI captures it well:

• Selection (static). The model calls a tool such as showExpenseApproval({ amount, submitter }), and your pre-built component renders it. The model chooses which component and what data. Maximum control, minimum surprise.
• Specification (declarative). The model emits a description of UI as data — a tree of components from a catalog you defined, with props and bindings. A renderer turns it into native components. This is the territory of A2UI and json-render. More expressive, still bounded by the catalog.
• Code (open-ended). The model writes HTML, CSS and JavaScript that runs in a sandbox: Claude artifacts, MCP Apps and the OpenAI Apps SDK's iframes. Anything is possible, which is both the point and the risk.

3. Who hosts it, and with what authority?

The same component means different things depending on where it runs. Rendered inside your app, it inherits your session, your design system and your permissions. Rendered inside a host like ChatGPT or Claude, it runs in a sandboxed iframe and talks to the host through a narrow bridge. Rendered by an agent framework in someone else's product, it is bounded by whatever that framework allows. Authority — what the generated UI is allowed to do — follows the host, not the pixels.

The seven-rung spectrum

Put the axes together and you get a ladder. Each rung gives the model more freedom and gives you less control.

Rung	What the model controls	Typical stack	You keep
1. Text	words	any chat API	everything
2. Markdown	words + basic structure	any chat UI	layout, styling
3. Static components	which component, what data	tool calls → your components (CopilotKit, AI SDK, assistant-ui)	design system, behaviour
4. Declarative specs	composition within a catalog	A2UI, json-render, OpenUI-style languages	components, allowed actions
5. Open-ended code	the whole surface, sandboxed	MCP Apps, Apps SDK, artifacts	the sandbox and the bridge
6. Whole apps	an application	v0, Lovable, Bolt, Replit	review before release
7. Agents operate UI	your existing interface, as a user	computer use, browser agents, WebMCP	what the page exposes

Two things to notice. First, most production generative UI today lives on rungs 3 and 4, because that is where the trade-off between flexibility and trust is easiest to defend. Second, the rung is chosen per surface, not per product. A banking assistant can use rung 5 for an exploratory chart and rung 3 for the transfer confirmation, in the same conversation. Lab 01 walks one intent up all seven rungs.

Why now

Generative UI was demoed for years before it was practical. Four things changed between 2024 and 2026.

1. Structured output and tool calling became reliable. Once a model could be trusted to emit valid JSON against a schema, "the model picks a component and fills its props" stopped being a party trick.
2. Streaming reached the UI layer. Frameworks learned to render tool arguments and specs while they stream, so generated interfaces stopped feeling slower than text (Lab 03).
3. Models got good at frontend code. Open-ended generation (rung 5) went from fragile to routinely usable for charts, small tools and visual explanations.
4. Protocols arrived. AG-UI standardised the event stream between agents and frontends; A2UI and json-render standardised UI-as-data; MCP Apps standardised sandboxed UI inside AI hosts; WebMCP started standardising how pages expose tools to agents. Distribution followed: interfaces built once can now appear inside the largest AI products.

The result is that "should the answer be a screen?" is now a real product decision with real infrastructure behind it.

What generative UI is not

• Not personalisation by rules. Showing a different banner to returning users is targeting. Nothing is composed.
• Not markdown in a chat bubble. Markdown is rung 2: useful, but the model is formatting text, not building interface.
• Not "the model writes React on every request". Most serious systems never let the model emit executable code in the main app. They let it select or specify.
• Not the death of design. The design work moves up a level, to the component vocabulary, the rules of composition, the tone, and the consequences each action is allowed to have. Bad vocabularies produce bad screens at scale.
• Not only chat. Chat is one shell. Generated UI shows up inline in documents, on canvases, in side panels, in notifications, and inside other apps.

Misconceptions experts correct

"One protocol will win." The main standards sit on different layers: AG-UI moves events between an agent and a frontend; A2UI and json-render describe UI as data; MCP Apps hosts UI inside AI clients. A single product can use all three. Module 02 maps the stack.

"Generated UI is inherently unsafe." Risk depends on the rung, the catalog, the sandbox and — most of all — on whether consequential actions require the right confirmation before they take effect. A generated delete button behind a proper consent flow is safer than a hand-built one without it. Lab 05.

"Screenshots tell you if it works." Two screens can be pixel-identical and do different things when clicked. Quality in generative UI is about behaviour, which is why evaluation has to execute the interface, not just look at it. This is the premise behind RUI.

"Users want chat." Users want outcomes. Chat is a good way to state intent, and a poor way to inspect, compare, adjust and confirm. Generative UI is largely about giving the second half of that loop a better surface.

Vocabulary

• Catalog — the set of components (and their props and allowed actions) a model may use. The contract between the model and the renderer.
• Spec — a declarative description of UI, as data, that references a catalog.
• Tool call — a structured request from the model to run a function. In generative UI, often rendered as a component.
• Frontend tool — a tool executed in the browser (e.g. ask the person to confirm), not on the server.
• Shared state — state that both the agent and the interface read and write, kept in sync by snapshots and deltas.
• Snapshot / delta — a full copy of state, and a small patch (usually JSON Patch) that changes it.
• Interrupt — a point where an agent pauses for a human decision and resumes with the answer.
• Host — the application a generated interface runs inside (your app, ChatGPT, Claude, an IDE).
• Sandbox — an isolated environment (typically an iframe with a restrictive policy) that limits what generated code can reach.
• Bridge — the narrow message channel between sandboxed UI and its host.
• Reverse channel — how an agent perceives and operates an interface: accessibility tree, DOM, screenshots, or declared tools.
• Reversibility class — how undoable an action's effect is; it decides what consent the interface must show first.

Check yourself

1. A sales tool lets reps type a question and get a chart they can filter. The chart is a pre-built component chosen by a tool call. Which rung is it, and what does the model control?
2. Why does design-time generation need less runtime safety machinery than run-time generation?
3. Give one surface in the same product that should sit on rung 3 and one that could sit on rung 5. Defend both.
4. Explain to a colleague, in two sentences, why AG-UI and A2UI are not competitors.
5. Two "Delete" dialogs look identical. One soft-deletes, one hard-deletes. Why can't a screenshot test tell them apart, and what should differ in the interface?
6. Name the two directions of generative UI and one thing that serves both.

Go deeper

• Labs: 01 · the spectrum, 08 · the page as an agent reads it
• Next: 01 · The raw materials — structured output, tool calls, streaming and message parts.
• The protocol docs, to skim now and study in Module 02: AG-UI, A2UI, Model Context Protocol, json-render.
• The research and essays behind this module are collected in the Library.