---
title: Generative UI Overview
icon: "lucide/Sparkles"
description: The different types of Generative UI, and how AG-UI and CopilotKit work with them all.
---

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";

---

## What Is Generative UI?

<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:

- **[Application Surfaces](#application-surfaces-for-generative-ui)** - where Generative UI shows up within an agentic application.
- **[Attributes](#attributes-of-generative-ui)** - how different Generative UI types and uses vary and why.
- **[Types](#types-of-generative-ui)** - the prominent types of Generative UI, their uses and tradeoffs.
- **[Ecosystem Mapping](#ecosystem-mapping)** - how the different types of Generative UI are used in the ecosystem.
- **[AG-UI and CopilotKit](#ag-ui-and-copilotkit-are-gen-ui-agnostic)** - how AG-UI and CopilotKit work with the different types of Generative UI.

</TwoColumnSection>

<Callout type="info">
  **Prefer to learn by building?** [Build Interactive Agents with Generative UI](https://www.deeplearning.ai/short-courses/build-interactive-agents-with-generative-ui/) is a free DeepLearning.AI short course taught by CopilotKit's CEO. It walks through the Controlled, Declarative, and Open-Ended Generative UI patterns end-to-end with React, LangChain, and AG-UI.
</Callout>

---

<div>

## Ready to Get Started? Choose your Integration!

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>

---

## Application Surfaces for Generative UI

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.

### 1. Chat (Threaded Interaction)

<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:**
- Turn-based, message-driven flow.
- App mediates all agent communication.
- Great for support, Q&A, debugging, and guided workflows.

**Examples:** Slack bots, Discord bots, Intercom AI Agent, Zendesk AI, GitHub Copilot Chat, Notion AI Chat.

</TwoColumnSection>

### 2. Chat+ (Co-Creator Workspace)

<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:**
- Chat remains present but secondary.
- Canvas displays structured outputs and previews.
- Generative UI can appear in the canvas or chat space.
- Ideal for creation, planning, editing, and multi-step tasks.

**Examples:** Figma AI, Notion AI workspace, Google Workspace Duet side-panel, Replit Ghostwriter paired editor.

</TwoColumnSection>

### 3. Chatless (Generative UI integrated into application UI)

<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:**
- No chat surface at all.
- App decides when and where generative UI appears.
- Feels like a built-in product feature, rather than a conversation.
- Ideal for dashboards, suggestions, and autonomous task helpers.

**Examples:** Microsoft 365 Copilot (inline editing), Linear Insights, Superhuman AI triage, HubSpot AI Assist, Datadog Notebooks AI panels.

</TwoColumnSection>

---

## Attributes of Generative UI

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"
    }
  ]}
/>

---

## Types of Generative UI

<div className="flex flex-col md:flex-row items-start gap-6 md:gap-8 w-full mb-8">
  <div className="w-full md:w-1/2">
    <div className="w-full rounded-lg border border-border bg-card p-6 md:p-8">
      <table className="w-full">
        <tbody>
          <tr className="border-b border-border">
            <td className="py-3 pr-4 text-sm md:text-base font-semibold align-top">
              Static
            </td>
            <td className="py-3 text-sm md:text-base text-muted-foreground">
              UI is chosen from a fixed set of hand-built components.
            </td>
          </tr>
          <tr className="border-b border-border">
            <td className="py-3 pr-4 text-sm md:text-base font-semibold align-top whitespace-nowrap">
              Open-Ended
            </td>
            <td className="py-3 text-sm md:text-base text-muted-foreground">
              Arbitrary UI (HTML, iframes, free-form content) is passed between agent and frontend.
            </td>
          </tr>
          <tr>
            <td className="py-3 pr-4 text-sm md:text-base font-semibold align-top">
              Declarative
            </td>
            <td className="py-3 text-sm md:text-base text-muted-foreground">
              A structured UI specification (cards, lists, forms, widgets) is used between agent and frontend.
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div className="w-full md:w-1/2 flex flex-col gap-4 text-sm md:text-base">
    <p>
      Generative UI approaches fall into three broad categories, each with distinct tradeoffs in developer experience, UI freedom, adaptability, and long-term maintainability.
    </p>
    <p>
      As described above, these types are differentiated by their freedom/vocabulary of UI expression, but any of the types can be controlled by the application programmer, or left up to the agent to define.
    </p>
  </div>
</div>

---

### Static Generative UI

<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
    }
  ]}
/>

### Open-Ended Generative UI

<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
    }
  ]}
/>

### Declarative Generative UI

<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
    }
  ]}
/>

---

## Ecosystem Mapping

<div className="flex flex-col md:flex-row items-center gap-6 md:gap-8 w-full mb-8">
  <div className="w-full md:w-1/3 space-y-3 text-sm md:text-base">
    <p>
      Several recently announced [Generative UI Specifications](/learn/generative-ui/specs), have added richness (and some confusion) to generative UIs. These include [MCP-Apps](https://mcpui.dev/), [Open JSON UI](https://json-schema.org/), and the newly released [A2UI](/learn/generative-ui/specs/a2ui).
    </p>
    <p>
      The generative UI styles map cleanly to the ecosystem of tools and these standards.
    </p>
    <p>
      This mapping highlights that no single approach is superior — the best choice depends on your application's priorities, surfaces, and UX philosophy.
    </p>
  </div>

  <div className="w-full md:w-2/3">
    <EcosystemTable
      data={[
        {
          approach: "Static",
          examples: "AG-UI, CopilotChat, useAgent",
          strengths: "Fidelity, reliability, brand control",
          weaknesses: "Engineering intensive, linear growth"
        },
        {
          approach: "Open-Ended",
          examples: "MCP-Apps, ChatGPT Apps",
          strengths: "Unlimited creativity",
          weaknesses: "Hard to secure, web-first"
        },
        {
          approach: "Declarative",
          examples: "Open-JSON-UI, A2UI",
          strengths: "Balanced, scalable, multi-renderer",
          weaknesses: "Limited full customization"
        }
      ]}
    />
  </div>
</div>

---

## AG-UI and CopilotKit are Gen UI Agnostic

<div className="flex flex-col md:flex-row items-center gap-6 md:gap-8 w-full mb-8">
  <div className="w-full md:w-1/2 space-y-3 text-sm md:text-base">
    <p>
      **AG-UI is designed to support the full spectrum of generative UI techniques** while adding important capabilities that unify them.
    </p>
    <p>
      AG-UI integrates seamlessly with all types: static, declarative, and open-ended generative UI approaches. Whether teams prefer handcrafted components, structured schemas, or agent-authored surfaces, AG-UI can support the workflow.
    </p>
    <p>
      But AG-UI adds **shared primitives** — interaction models, context synchronization, event handling, a common state framework — that standardize how agents and UIs communicate across all surface types.
    </p>
    <p>
      CopilotKit works with any generative UI, and uses AG-UI to connect the agent to the frontend.
    </p>
    <p>
      This creates a **consistent mental model for developers** while empowering agents to take advantage of the capabilities of any generative UI pattern.
    </p>
  </div>

  <div className="w-full md:w-1/2 flex flex-col items-center gap-4">
    <Image
      src="/images/gen-ui-specs-light.png"
      alt="AG-UI supporting multiple generative UI specifications"
      width={600}
      height={400}
      className="rounded-lg w-full h-auto block dark:hidden"
    />
    <Image
      src="/images/gen-ui-specs-dark.png"
      alt="AG-UI supporting multiple generative UI specifications"
      width={600}
      height={400}
      className="rounded-lg w-full h-auto hidden dark:block"
    />
    <p className="text-sm md:text-base text-muted-foreground text-center italic">
      AG-UI acts as a universal runtime that works with A2UI, MCP-UI, Open-JSON-UI, and custom specs of any type.
    </p>
  </div>
</div>

<Callout type="info">
  Learn more about implementing Generative UI with the [AG-UI Protocol](/ag-ui-protocol) and explore [Generative UI Specifications](/learn/generative-ui/specs).
</Callout>

