Generative UI

Generative UI lets agents render rich interface components — progress bars, tables, charts, forms, and more — directly in their responses. This guide covers how to enable and configure it.

How to Enable

Generative UI lives under Agents → (agent) → Advanced, in the Generative UI card. Turn it on, pick a catalog, and optionally add UI guidance.

Catalog Selection

Catalog	ID	Components
Noorle Extended (default)	`a2ui.noorle.dev:catalog_1_0`	Standard A2UI 0.9 + Noorle components (Progress, Status, CodeBlock, DataTable, Chart, Form, ApprovalForm, Accordion)
Standard A2UI 0.9	`a2ui.dev:standard_catalog_0_9_0`	Display (Text, Image, Icon, Video, AudioPlayer), Layout (Row, Column, List, Card, Tabs, Divider, Modal), Input (Button, CheckBox, TextField, DateTimeInput, ChoicePicker, Slider)

Choose Noorle Extended when you need data tables, charts, progress indicators, or approval forms. Choose Standard A2UI 0.9 for maximum compatibility with other A2UI-supporting clients.

Custom Guidance

The Guidance field lets you instruct the agent on when and how to use UI components. This text is appended to the A2UI protocol instructions in the agent’s system prompt. Example guidance:

Use NoorleDataTable for any results with 3+ rows of structured data.
Use NoorleChart (chartType: bar) for comparisons between items.
Always show NoorleProgress for tasks that take more than a few seconds.
Use NoorleApprovalForm when the user needs to confirm a destructive action.

Noorle Extended Components

NoorleProgress

Progress bar with label and percentage value. Useful for showing task completion.

NoorleStatus

Status indicator with variants: success, error, warning, info, loading. Good for showing operation results at a glance.

NoorleCodeBlock

Code display. The language field is required.

NoorleDataTable

Structured data table with defined columns and rows. Best for search results, lists, and tabular data.

NoorleChart

Data visualization supporting: line, bar, pie, doughnut, area, scatter. Ideal for comparisons and trends.

NoorleForm

Dynamic form with multiple field types. Supports status tracking through the lifecycle: pending → submitted → success or error. The agent can update the form’s status and message in place after processing.

NoorleApprovalForm

Human-in-the-loop approval component. Supports status: pending → approved or rejected. Use for confirming important actions before the agent proceeds.

How the Agent Creates UI

When Generative UI is enabled, the agent receives protocol instructions in its system prompt. During a response, the agent emits JSON messages to create and update UI surfaces. Typical flow:

Agent creates a surface with createSurface (includes catalog ID)
Agent adds components via updateComponents (must include a root component)
User interacts (clicks button, submits form)
Agent receives the action and can update components or data model
Agent deletes surface when done (optional)

When users interact with components (click a button, submit a form), the action is sent back to the agent as:

[User Action] name: <action_name>, surface: <surface_id>,
  component: <component_id>, context: {<resolved data>}

The agent can then respond accordingly — updating the UI, performing actions, or continuing the conversation.

Data Binding

Components can reference values from a shared data model using path syntax:

{
  "component": "NoorleProgress",
  "label": {"path": "/task/name"},
  "value": {"path": "/task/progress"},
  "max": 100
}

The agent can then update the data model separately:

{
  "updateDataModel": {
    "surfaceId": "task-abc",
    "path": "/task/progress",
    "op": "replace",
    "value": 75
  }
}

This causes the progress bar to update reactively without replacing the component.

Best Practices

Use UI for Complex Outputs

Text is fine for simple answers. Use Generative UI when the response involves structured data, status tracking, or user interaction.

Keep Surfaces Focused

Each surface should serve one purpose. Create separate surfaces for different concerns (status display vs. action panel).

Complete Status Cycles

For NoorleForm and NoorleApprovalForm, always update the status after processing. Never leave a form in submitted state — update to success or error.

Provide Guidance

Custom guidance helps the agent make better decisions about when to use UI components vs. plain text.

Limitations

Generative UI needs a client that speaks A2UI. The Portal’s Playground does; so does any AG-UI client that implements the protocol.
MCP gateway connections do not render UI components.
Over A2A, the A2UI extension is negotiated per request. A client that does not ask for it gets untagged content.
Components are part of the thread’s history, so reopening a conversation renders them again.
Sub-agents do not inherit the parent’s client UI catalog; generative UI is scoped to the top-level run.

Getting Started

Platform

Built-in Capabilities

Connectors

Agents

Channels

Workflows

Knowledge & RAG

How to Enable

Catalog Selection

Custom Guidance

Noorle Extended Components

NoorleProgress

NoorleStatus

NoorleCodeBlock

NoorleDataTable

NoorleChart

NoorleForm

NoorleApprovalForm

How the Agent Creates UI

User Actions

Data Binding

Best Practices

Use UI for Complex Outputs

Keep Surfaces Focused

Complete Status Cycles

Provide Guidance

Limitations

Next Steps

​How to Enable

​Catalog Selection

​Custom Guidance

​Noorle Extended Components

​NoorleProgress

​NoorleStatus

​NoorleCodeBlock

​NoorleDataTable

​NoorleChart

​NoorleForm

​NoorleApprovalForm

​How the Agent Creates UI

​User Actions

​Data Binding

​Best Practices

​Use UI for Complex Outputs

​Keep Surfaces Focused

​Complete Status Cycles

​Provide Guidance

​Limitations

​Next Steps

How to Enable

Catalog Selection

Custom Guidance

Noorle Extended Components

NoorleProgress

NoorleStatus

NoorleCodeBlock

NoorleDataTable

NoorleChart

NoorleForm

NoorleApprovalForm

How the Agent Creates UI

User Actions

Data Binding

Best Practices

Use UI for Complex Outputs

Keep Surfaces Focused

Complete Status Cycles

Provide Guidance

Limitations

Next Steps