docs/content/docs/learn/generative-ui/index.mdx
import Image from "next/image" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Callout } from "fumadocs-ui/components/callout" import { TwoColumnSection } from "@/components/react/generative-ui/two-column-section" import { AttributeCards } from "@/components/react/generative-ui/attribute-cards" import { PatternCard } from "@/components/react/generative-ui/pattern-card" import { EcosystemTable } from "@/components/react/generative-ui/ecosystem-table" import { IntegrationsGrid } from "@/components/react/integrations";
<TwoColumnSection imagePosition="right" imageSrc="/images/generative-ui/generative-ui-light.png" imageSrcDark="/images/generative-ui/generative-ui-dark.png" imageAlt="Generative UI Overview Diagram" imageWidth={600} imageHeight={400}
Generative UI refers to any user interface that is partially or fully produced by an AI agent, rather than authored exclusively by human designers and developers. Instead of the UI being hand-crafted in advance, the agent plays a role in determining what appears on the screen, how information is structured, and in some cases even how the layout is composed.
The core idea is simple: as agents become more capable, an agentic application's UI itself becomes more of a dynamic output of the system — able to adapt, reorganize, and respond to user intent and application context. This can be done in very different ways, each with its own tradeoffs.
This page covers:
Generative UI can be implemented with any agentic backend, with each integration offering different approaches for creating dynamic, AI-driven interfaces.
Choose your integration to see specific implementation guides and examples, or scroll down to learn more about Generative UI.
<IntegrationsGrid targetPage="generative-ui" /> </div>Generative UI can surface in different parts of an application depending on how users interact with the agent and how much the application mediates that interaction. These surfaces shape the UX, developer responsibilities, and where generative UI appears.
<TwoColumnSection imagePosition="right" imageSrc="/images/generative-ui/chat-surface.png" imageAlt="Chat Surface - Threaded Interaction" imageWidth={300} imageHeight={200}
A Slack-like conversational interface where the app brokers each turn. Generative UI appears inline as cards, blocks, or tool responses.
Key traits:
Examples: Slack bots, Discord bots, Intercom AI Agent, Zendesk AI, GitHub Copilot Chat, Notion AI Chat.
</TwoColumnSection><TwoColumnSection imagePosition="left" imageSrc="/images/generative-ui/chat-plus-surface.png" imageAlt="Chat+ Surface - Co-Creator Workspace" imageWidth={600} imageHeight={400}
A side-by-side or multi-pane layout: chat in one pane, a dynamic canvas in another. The canvas becomes a shared working space where agent-generated UI appears and evolves.
Key traits:
Examples: Figma AI, Notion AI workspace, Google Workspace Duet side-panel, Replit Ghostwriter paired editor.
</TwoColumnSection><TwoColumnSection imagePosition="right" imageSrc="/images/generative-ui/chatless-surface.png" imageAlt="Chatless Surface - Integrated Application UI" imageWidth={300} imageHeight={200}
The agent doesn't talk directly to the user. Instead, it communicates with the application through APIs, and the app renders generative UI from the agent as part of its native interface.
Key traits:
Examples: Microsoft 365 Copilot (inline editing), Linear Insights, Superhuman AI triage, HubSpot AI Assist, Datadog Notebooks AI panels.
</TwoColumnSection>Types of Generative UI, and even individual uses vary greatly in terms of two attributes: freedom, and control.
<AttributeCards cards={[ { title: "Attribute: Freedom of Expression", content: "The generative UI types are highly differentiated by what they can represent - their visual "freedom". On the fixed end of the spectrum, static generative UI's return only predefined components. On the other end of this axis, open-ended UI can include arbitrary HTML, making any kind of interaction possible, in theory. Declarative UI sits in the middle, with a wider, but still constrained visual vocabulary from which both the programmer and the agent can choose.", imageSrc: "/images/generative-ui/freedom.svg", imageAlt: "Generative UI Freedom Spectrum" }, { title: "Attribute: Who has Control", content: "A more subtle, and tricker to manage, attribute of generative UI lies in who decides on the representation: the Agent (LLM) or the Programmer (Application Developer). To take open-ended generative UI as an example, the agent has the ability to present arbitrary HTML. But where does the HTML come from? It can be predefined in code which is returned by the agent, or it can be fully generated by an LLM. In many cases the application developer would want to define what the agent can deliver in order to feel native to the app, even though the programmer might want to use HTML for its richness. Even with static generative UI, there are control choices to be made. You can hardcode the agent to present a specific generative UI when something specific happens, or let an LLM choose to surface it from scratch.", imageSrc: "/images/generative-ui/control.svg", imageAlt: "Generative UI Control Spectrum" } ]} />
<PatternCard id="static" index={1} title="Static" subtitle="Agents choose from a fixed set of hand-built components" description="Static generative UI allows engineers to hand-craft specific visual components, and agents simply decide which of those components to use. The agent does not generate arbitrary UI; instead, it maps generated data to existing UI components." fullDescription="In this model, the front end defines every detail of the experience — the layouts, the styles, the interaction patterns, and the constraints. The backend or agent contributes information and intent, but the rendering ultimately comes from a predefined set of components." whyUse={[ "Guarantees high visual polish and consistency.", "Ideal for high-traffic, mission-critical surfaces where predictability matters." ]} tradeoffs={[ "The more use cases, the more components you must build and maintain.", "The frontend codebase grows proportionally to the number of agent capabilities." ]} exampleTitle="Example: Using CopilotChat with AG-UI" examples={[ { src: "/images/generative-ui/static-example-code.png", alt: "Static Generative UI Example - Agent code with AG-UI connecting to frontend", caption: "The agent defines tools, AG-UI handles the connection, and the frontend renders predefined components.", width: 1400, height: 600 }, { src: "/images/generative-ui/static-example-ui.png", alt: "Static Generative UI Result - Weather card UI", width: 800, height: 800 } ]} />
<PatternCard id="open-ended" index={2} title="Open-Ended" subtitle="Agents return arbitrary UI (HTML, iframes, free-form content)" description="Open-ended generative UI represents the opposite end of the spectrum. Here, agents generate complete UI surfaces — often as HTML, iframes, or free-form markup. Instead of choosing from predefined components, the agent can respond with an entire UI payload that the frontend simply displays." fullDescription="This approach provides unparalleled flexibility of expression. Agents can render a calendar, a custom table, an animated visualization, or an interactive HTML widget, either generated by the LLM, or predefined by an application developer." whyUse={[ "Any type of UI can be part of an agent response, whether predefined by the programmer or generated by the agent.", "Minimal coupling between frontend code and agent behavior.", "Supports rapid prototyping and complex workflows without frontend engineering cycles." ]} tradeoffs={[ "Security and performance considerations when rendering arbitrary content.", "Typically web-first and difficult to port to native environments.", "Styling consistency and brand alignment become challenging." ]} exampleTitle="Example: Using MCP-UI & ChatGPT Apps SDK" examples={[ { src: "/images/generative-ui/open-ended-example.png", alt: "Open-ended Generative UI Example - HTML/iframe with map interface", caption: "The agent returns complete HTML/iframes that render arbitrary UI, giving maximum flexibility.", width: 1400, height: 600 } ]} />
<PatternCard id="declarative" index={3} title="Declarative" subtitle="Agents return a structured UI specification (cards, lists, forms, widgets)" description="Declarative generative UI balances structure and flexibility by having agents return a structured specification rather than arbitrary UI code. Instead of free-form HTML, agents emit a well-defined schema — such as a collection of cards, lists, forms, or widgets defined by a declarative standard." fullDescription="This approach preserves consistency while giving agents far greater expressive power than purely static component libraries. It creates a middle ground where UI is not handcrafted for each use case, but is also not fully free-form." whyUse={[ "Supports a wide range of use cases without requiring custom components for each.", "Developers can render the same spec across multiple frameworks (React, mobile, desktop, etc.).", "Cleaner separation between application logic and presentation." ]} tradeoffs={[ "Custom UI patterns may not be possible.", "Visual differences can still occur if specs are interpreted differently." ]} exampleTitle="Example: Using Open-JSON-UI" examples={[ { src: "/images/generative-ui/declarative-example.png", alt: "Declarative Generative UI Example - Card specification with airline card", caption: "The agent returns a structured spec (like a Card) that the frontend interprets and renders consistently.", width: 1400, height: 600 } ]} />