Skip to main content
Generative UI allows agents to render rich, interactive interface components as part of their responses. Instead of returning only text, agents can create progress bars, data tables, charts, forms, and approval workflows that users can interact with directly.

​
The Problem

Traditional agent responses are text-only: 
User: "What's the status of our deployments?"
Agent: "Deployment A: 85% complete. Deployment B: 100% done.
        Deployment C: Failed at step 3."
This works, but for complex data it’s hard to scan, lacks interactivity, and doesn’t feel like a modern application.

​
The Solution

With Generative UI, the same agent can render structured components: The agent creates a live interface with progress bars showing completion, status badges for each deployment, and an action button to retry the failed one.

​
How It Works

Generative UI is built on the A2UI Protocol (Agent-to-User Interface), a message-based protocol for agents to create and update UI surfaces.

​
Surfaces

A surface is a named container for UI components. Agents can create multiple surfaces, each with its own set of components and data model.

​
Message Flow

The protocol uses four server-to-client message types:
  1. createSurface — Initialize a new UI surface with a catalog ID
  2. updateComponents — Add or update components within a surface
  3. updateDataModel — Change data values that components are bound to
  4. deleteSurface — Remove a surface when no longer needed
And three client-to-server message types:
  1. userAction — User clicked a button, submitted a form, etc.
  2. clientUiCapabilities — Client reports which catalogs it supports
  3. error — Client reports a rendering error

​
Data Binding

Components can bind to a shared data model using path references. When the data model updates, bound components re-render automatically: 
Component: Progress bar
  value: {"path": "/deploy/progress"}    ← bound to data model
  label: {"path": "/deploy/name"}

Data Model Update:
  path: "/deploy/progress"
  value: 85

Result: Progress bar updates to 85% without replacing the component
This enables real-time updates — an agent can push data changes and the UI responds reactively.

​
Component Catalogs

Generative UI supports two component catalogs:

​
Standard A2UI 0.9

The open standard catalog with common UI primitives:
  • Display — Text, Image, Icon, Video, AudioPlayer
  • Layout — Row, Column, List, Card, Tabs, Divider, Modal
  • Input — Button, CheckBox, TextField, DateTimeInput, ChoicePicker, Slider

​
Noorle Extended (Default)

Includes everything in Standard A2UI 0.9, plus purpose-built components for agent workflows:
  • NoorleProgress — Progress bar with label and percentage
  • NoorleStatus — Status indicator (success, error, warning, info, loading)
  • NoorleCodeBlock — Syntax-highlighted code display
  • NoorleDataTable — Structured data table with columns and rows
  • NoorleChart — Visualizations (line, bar, pie, doughnut, area, scatter)
  • NoorleForm — Dynamic forms with field validation and status tracking
  • NoorleApprovalForm — Human-in-the-loop approval with pending/approved/rejected states
  • NoorleAccordion — Collapsible sections for organizing content

​
Stateful Components

Some Noorle components support in-place status updates, which is essential for interactive workflows: NoorleApprovalForm cycles through: pending → approved or rejected NoorleForm cycles through: pending → submitted → success or error This means an agent can show a form, process the submission, and update the same component to show success — without replacing the entire UI.

​
Configuration

Generative UI is configured per-agent. Key settings:
  • Enabled — Master toggle for A2UI protocol
  • Catalog — Choose between Noorle Extended (default) or Standard A2UI 0.9
  • Guidance — Custom instructions for how the agent should use UI components (up to 2,000 characters)
When enabled, the A2UI protocol documentation is injected into the agent’s system prompt, teaching it how to emit valid UI messages.

​
When to Use Generative UI

Great for:
  • Dashboards and status displays
  • Data tables and search results
  • Multi-step forms and wizards
  • Approval workflows (human-in-the-loop)
  • Progress tracking for long-running tasks
  • Charts and data visualizations
Not needed for:
  • Simple text Q&A
  • Short responses
  • API-only agents (no human viewer)
  • MCP gateway connections (UI requires a frontend)

​
How Agents Emit UI

Agents don’t call a separate tool. Instead, they emit JSON blocks within their response stream that follow the A2UI protocol. The frontend detects these blocks, validates them, and renders the corresponding components. The agent decides when to create surfaces and which components to use based on the conversation context and its guidance instructions.
Next: Learn how to configure Generative UI for your agents.