Generative UI

Generative UI is when an AI system dynamically generates the interface shown to a user — cards, forms, charts, tables, buttons — rather than a designer laying out every screen in advance. The model decides, on each turn, whether the best response to a request is plain text, a structured component, or some combination of both, and then produces the actual interface rather than a static description of one.

The shift in framing is small but significant: instead of asking what a page should look like at design time, generative UI asks what interface best answers a specific question right now, at inference time. That distinction matters more as AI agents take on tasks that used to require a purpose-built screen — booking a slot, comparing products, tracking an order — because a wall of text is a poor substitute for the interactive component a person would normally reach for.

How generative UI works

A generative UI system generally has three parts. The first is a component library: a set of pre-built, styled, brand-safe UI elements — product cards, order summaries, forms, calendars, maps — that the model is allowed to compose from. The model is never generating raw pixels or arbitrary markup; it is selecting and configuring from a fixed, vetted set of building blocks.

The second part is a model that outputs structure instead of prose. Rather than free-form HTML, the model produces a structured description, typically JSON, that specifies which components to render and what data to pass into them.

The third part is a renderer on the client that interprets that structured output and mounts the corresponding components. In a React application, this is often a lookup table that maps component names returned by the model to actual React components.

The practical result is that instead of returning a paragraph describing an order's status, the system returns an actual order-status card with a tracking number and a delivery estimate.

Instead of describing available meeting times in a sentence, it returns a time picker populated with real open slots.

Where generative UI is being used

Order status and account lookups are the most common early use case: a customer asking about a shipment gets a rendered card with an icon, a tracking number, and an expected delivery date rather than the same information buried in a sentence.

Booking and scheduling requests follow the same pattern — a request to find time on a calendar returns a picker showing actual available slots rather than a list of options typed out in text.

Product discovery is another strong fit: a request for a specific type of item under a price threshold can render as a filterable grid instead of a bulleted description of items, which is meaningfully faster for a user to scan and act on.

Analytics and reporting requests benefit similarly — a question about how a metric trended over a period is better served by an actual rendered chart than a paragraph attempting to describe the same trend in words.

Generative UI compared to traditional chat interfaces and design tools

Traditional chat interfaces answer almost entirely in text bubbles, and rich media appears only in narrow, explicitly coded special cases — a developer decided in advance that a particular intent renders a particular card. Generative UI removes that fixed mapping: the model itself decides, on every turn, whether the right output is text, a card, a form, a chart, or some mix, based on the specific request rather than a predetermined flow.

It is also worth distinguishing generative UI from AI design tools that produce mockups for a human to later implement. Those tools operate at design time and produce an artifact a developer still has to build. Generative UI operates at inference time and produces the interface a user actually sees on that turn, with no human in the loop for that specific screen.

What makes generative UI reliable in production

Letting a model generate free-form HTML or CSS directly is both a security risk and a brand-consistency problem, so production systems constrain the model to a fixed, vetted component library with strongly typed props rather than open-ended markup generation. Structured-output features — JSON schema enforcement, or a provider's native structured-output mode — are what make that constraint reliable rather than aspirational.

Grounding is just as important here as it is in any other generative system: any data shown inside a rendered card has to come from a real backend call, never from the model's guess, or the interface just becomes a more convincing way to present a hallucination. A sensible fallback path also matters — if the model cannot produce a valid component for a given request, the system should degrade gracefully to a plain text response rather than rendering something broken or empty.

Where generative UI fits in an AI stack

Generative UI relies on the same underlying primitive as tool calling: the model selects a UI-generating tool, populates its parameters from retrieved data grounded in a real backend (see AI grounding), and hands the result to a renderer rather than typing an answer directly. In practice it behaves like any other action a model can take mid-conversation, just with a visual component as the output instead of a backend side effect.

For an AI agent handling customer support, generative UI is what turns a long, uncertain back-and-forth into a fast, confident interaction: rather than a paragraph explaining a shipment's status and asking whether the customer wants tracking updates, the agent renders a single order card with a live tracker, an update-me button, and a start-a-return link in one turn. As support agents take on more of what used to be dedicated account and self-service pages, generative UI is the mechanism that lets a single conversational interface still deliver a purpose-built screen when one is actually the better answer.