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:
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:
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
Catalog id: a2ui.dev:standard_catalog_0_9_0.

​
Noorle Extended (Default)

Catalog id: a2ui.noorle.dev:catalog_1_0. 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, in the Portal under the agent’s Advanced section. Three settings:
  • Enabled — master toggle for the A2UI protocol
  • Catalog — Noorle Extended (default) or Standard A2UI 0.9
  • UI guidance — free-text instructions for how this agent should use components
When enabled, A2UI protocol documentation is injected into the agent’s system prompt, teaching it how to emit valid UI messages.
Emitting a Noorle* component while the negotiated catalog is Standard A2UI 0.9 is a compliance error, and a strict client may reject the message. If you switch an agent to the standard catalog, its guidance should say so.

​
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)

​
Where UI is consumed

The Portal Playground renders A2UI. So can your own client. Over A2A, generative UI is a negotiated extension: an agent’s card declares https://a2a.noorle.dev/ext/a2ui/v1 as an optional extension, and a caller opts in by naming it in the A2A-Extensions request header. Negotiation controls tagging. A message or artifact carrying UI data lists the extension URI in its extensions field when the caller negotiated it, and the response echoes the negotiated URIs back in the same header. The data parts themselves are part of the agent’s output either way, so a client that has not opted in should ignore the data parts it does not recognize.

​
How Agents Emit UI

Agents don’t call a separate tool. They emit each A2UI message as its own fenced code block tagged a2ui, one JSON object per fence, inside the response stream:
Only content inside an a2ui fence is interpreted as UI. The fences are parsed out of the stream, validated, and rendered as components; everything around them is delivered as ordinary text — including a bare JSON object that is not inside a fence. 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.