What is generative UI?
Generative UI is a rendering architecture in which an AI model selects an interface pattern from a trusted component system. The model returns structured intent—such as “show a comparison,” “request approval,” or “render a filtered table”—and the application validates that intent before rendering code written and tested by the product team.
This is safer and more useful than asking a model to produce arbitrary HTML. The model decides what information pattern fits the task. The application remains responsible for how that pattern behaves.
Why is chat alone a bottleneck?
Text is excellent for explanation, ambiguity, and follow-up questions. It is inefficient for tasks that depend on visual scanning or precise control.
Consider these requests:
- “Compare the three plans and highlight what changes.”
- “Show the failed deployments by service and owner.”
- “Move this meeting, but let me approve the new time.”
- “Review the invoice anomalies and open the evidence.”
A paragraph can describe each result. A table, timeline, form, or approval card lets the user understand and act on it. The best AI products use conversation as one interface primitive, not the entire interface.
How does the architecture work?
The reliable pattern separates reasoning from rendering.
1. The model emits a UI intent
Define a small schema containing approved component types and their properties. For example:
{
"component": "ComparisonTable",
"title": "Deployment options",
"columns": ["Option", "Risk", "Effort"],
"rows": []
}
Structured Outputs can constrain compatible model responses to a supplied JSON Schema. Schema compliance is necessary, but it is not authorization: the server must still validate values and user permissions.
2. The server resolves trusted data
Do not ask the model to carry prices, account balances, permissions, or record identifiers as truth. Resolve those fields from application APIs after the intent is accepted. Treat model-provided IDs as untrusted references.
3. A component registry renders the result
Map the approved component name to a local implementation:
const registry = {
ComparisonTable,
ApprovalCard,
Timeline,
RecordList,
};
Unknown components fail closed. Each registered component owns accessibility, responsive behavior, analytics, empty states, and error handling.
4. The interaction returns structured events
When the user filters, confirms, or edits, send a typed event back to the application. The next model turn should receive the authoritative result of the action, not a guess based on button text.
Which components should be generative?
Start with information patterns that appear repeatedly:
| Component | Good use | Avoid when |
|---|---|---|
| Comparison table | A small set of options with shared attributes | The options use unrelated criteria |
| Approval card | A consequential action needs explicit confirmation | The action details are incomplete |
| Timeline | Events have order and status | Exact timestamps are unavailable |
| Form | Missing structured fields block the task | The model cannot explain why data is needed |
| Dashboard card | A stable metric has a defined source | The number is model-generated |
Do not make every visual decision dynamic. Navigation, brand structure, privacy controls, account settings, and critical workflows should remain predictable.
How do you prevent unsafe or broken interfaces?
Constrain the vocabulary
Give the model a small catalog of components. Avoid props that accept arbitrary code, CSS, URLs, or event handlers. Prefer enumerated variants and typed data.
Separate display from authority
A rendered “Approve transfer” card does not grant transfer permission. The action endpoint must verify identity, role, resource ownership, current state, and an idempotency key.
Validate every state
Test loading, empty, partial, error, stale-data, and permission-denied states. Generative systems reach unusual combinations that hand-designed happy paths often miss.
Keep a text equivalent
Every generated interface should preserve a concise textual explanation. This helps accessibility, audit logs, support teams, and recovery when the rich component cannot render.
Never execute model-authored interface code
Render only application-owned components from an allow-listed registry. Sanitize rich text, restrict external URLs, validate props, and keep tool execution behind server-side authorization.
What accessibility rules apply?
Generated interfaces do not get an accessibility exemption. They increase the need for consistent components.
- Preserve a logical heading order.
- Keep keyboard focus predictable when content appears.
- Use native controls before custom widgets.
- Announce asynchronous status changes with appropriate live-region semantics.
- Ensure charts and visual states have text alternatives.
- Do not rely on color alone for selection, risk, or progress.
- Respect reduced-motion preferences.
The WAI-ARIA Authoring Practices Guide documents interaction patterns for complex widgets, while WCAG guidance explains how status messages should be exposed to assistive technology.
How should teams evaluate generative UI?
Evaluate the complete task, not only the model response:
- Did the chosen component match the user’s intent?
- Were all displayed facts grounded in authoritative data?
- Could the user identify what changed?
- Did keyboard and screen-reader behavior remain correct?
- Was a consequential action clearly described before approval?
- Could the system recover from an invalid component or stale record?
Store the intent, validated payload, rendered component version, user event, and resulting tool response in the trace. That evidence makes regressions reproducible.
A safe implementation sequence
Begin with read-only components such as summaries, comparisons, and record lists. Add reversible interactions such as filtering and drafting. Introduce approval cards only after authorization and audit paths are tested. Reserve direct action components for workflows with clear ownership, rollback, and human review.
Generative UI succeeds when the experience feels adaptive while the system underneath remains deliberately constrained.