Skip to main content

​
What is Generative UI?

Generative UI refers to any user interface that is partially or fully produced by an AI agent, rather than being exclusively hand-crafted by developers. Instead of building every UI component in advance, the agent dynamically determines what appears on the screen, how information is structured, and how the layout is composed. In CopilotKit, generative UI allows agents to:
  • Display rich visual components inline in the chat
  • Show structured data beyond plain text
  • Render interactive controls that users can manipulate
  • Create dynamic, context-aware interfaces

​
The Three Types of Generative UI

CopilotKit supports three distinct approaches to generative UI, each with different tradeoffs in flexibility, control, and developer experience:

Static AG-UI Protocol

Agents choose from a fixed set of hand-built React components. You register components with useRenderTool or useComponent, and the agent decides when to invoke them. This provides maximum visual polish and consistency.Best for: Production apps requiring brand consistency, mission-critical surfaces, high-traffic features

Declarative A2UI

Agents return a structured UI specification using a JSON-based schema. The A2UI spec defines cards, lists, forms, and layouts that your frontend interprets and renders. This balances flexibility with structure.Best for: Multi-platform apps, scalable UIs, cases where you need wide expression without custom components for each use case

Open-ended MCP Apps

Agents return arbitrary HTML/JavaScript UI served from MCP servers. This provides unlimited creative freedom, allowing agents to render complete interactive widgets without any frontend code.Best for: Rapid prototyping, third-party integrations, complex visualizations, cases where development speed trumps visual consistency

​
Key Attributes: Freedom vs Control

The three types differ along two critical dimensions:

​
Freedom of Expression

How much visual variety can the UI represent?
  • Static (Limited): Only predefined components
  • Declarative (Moderate): Structured vocabulary of cards, lists, forms, layouts
  • Open-ended (Unlimited): Arbitrary HTML, CSS, JavaScript

​
Who Has Control

Who decides what UI gets rendered?
  • Programmer Control: Developer defines components/schemas, agent just populates data
  • Agent Control: LLM generates the UI structure and content
  • Hybrid: Developer provides templates or constraints, agent customizes within them
All three types support different control models. Even with static components, you can either:
  • Hardcode when specific components appear (programmer control)
  • Let the LLM decide which component to use (agent control)

​
Comparison Table

ApproachFreedomSetup ComplexityMaintainabilityCross-PlatformBrand Consistency
Static AG-UILowMediumHigh effortExcellentExcellent
Declarative A2UIMediumMediumMedium effortExcellentGood
Open-ended MCPHighLowLow effortWeb-onlyVariable

​
How CopilotKit Supports All Three

CopilotKit is generative UI agnostic and works seamlessly with all three approaches through the AG-UI protocol:
  1. Static AG-UI: Use useRenderTool and useComponent hooks to register React components
  2. Declarative A2UI: Use createA2UIMessageRenderer to interpret A2UI specifications
  3. Open-ended MCP: Use MCPAppsMiddleware to render HTML/JavaScript from MCP servers
You can even mix approaches in the same application:
  • Use static components for core features
  • Use A2UI for dynamic data displays
  • Use MCP Apps for third-party integrations

​
Which Approach Should I Use?

Choose based on your priorities:

​
Use Static AG-UI when:

  • Brand consistency is critical
  • You need pixel-perfect design control
  • You’re building production features for high-traffic surfaces
  • You want strong TypeScript typing and IDE support

​
Use Declarative A2UI when:

  • You need to support multiple platforms (web, mobile, desktop)
  • You want scalability without writing custom components for every use case
  • You need a balance between flexibility and structure
  • You want cleaner separation between logic and presentation

​
Use Open-ended MCP Apps when:

  • Development speed is the top priority
  • You’re prototyping or building internal tools
  • You need arbitrary visualizations or complex interactions
  • You’re integrating third-party MCP servers
  • Your app is web-only

​
Next Steps

Static AG-UI

Learn how to use React components with useRenderTool and useComponent

Declarative A2UI

Explore JSON-based UI specifications with A2UI

MCP Apps

Render interactive HTML from MCP servers

Build docs developers (and LLMs) love

Get started for freeTalk to us