What is A2UI?

A2UI (Agent to UI) is a declarative UI protocol for agent-driven interfaces (currently in v0.8 Public Preview, Apache 2.0 licensed). AI agents generate rich, interactive UIs that render natively across platforms (web, mobile, desktop) without executing arbitrary code.

Visual Output Gallery

A2UI allows for the secure, declarative rendering of diverse interactive layouts, moving beyond mere text. See the official a2ui-project/a2ui repository for the latest specifications.

The Problem

Text-only agent interactions are inefficient:

User: "Book a table for 2 tomorrow at 7pm"
Agent: "Okay, for what day?"
User: "Tomorrow"
Agent: "What time?"
...

Better: The agent generates a form with a date picker, time selector, and submit button. Users interact with the UI, not just text.

The Challenge

In multi-agent systems, agents often run remotely (on different servers or organizations). They can’t directly manipulate your UI—they must send messages.

Traditional approach: Send HTML/JavaScript in iframes.

• Heavy and visually disjointed.
• Security complexity.
• Doesn’t match host app styling.

Need: Transmit UI that is safe like data but expressive like code.

The Solution

A2UI: JSON messages describing UI that:

• LLMs generate as structured output.
• Travel over any transport (A2A, AG-UI, SSE, WebSockets).
• Client renders using its own native components.

Result: Client controls security and styling, while the agent-generated UI feels native.

Example

{
  "surfaceUpdate": {
    "surfaceId": "booking",
    "components": [
      {
        "id": "title",
        "component": { "Text": { "text": { "literalString": "Book Your Table" }, "usageHint": "h1" } }
      },
      {
        "id": "datetime",
        "component": { "DateTimeInput": { "value": { "path": "/booking/date" }, "enableDate": true } }
      },
      {
        "id": "submit-btn",
        "component": { "Button": { "child": "submit-text", "action": { "name": "confirm_booking" } } }
      }
    ]
  }
}

Client renders these messages as native components (Angular, Flutter, React, etc.).

Core Value

1. Security: Declarative data, not code. Agent requests components from client’s trusted catalog. No code execution risk.
2. Native Feel: No iframes. Client renders with its own UI framework. Inherits app styling, accessibility, performance.
3. Portability: One agent response works everywhere. Same JSON renders on web (Lit/Angular/React), mobile (Flutter/SwiftUI/Jetpack Compose), and desktop.
4. Progressive Rendering: Stream UI updates as they’re generated. Users see the interface building in real-time instead of waiting for complete responses.

Design Principles

1. LLM-Friendly: Flat component list with ID references. Easy to generate incrementally, correct mistakes, and stream.
2. Framework-Agnostic: Agent sends abstract component tree. Client maps to native widgets (web/mobile/desktop).
3. Separation of Concerns: Three layers—UI structure, application state, client rendering. Enables data binding, reactive updates, and clean architecture.

What A2UI Is NOT

• Not a framework (it’s a protocol).
• Not a replacement for HTML (for agent-generated UIs, not static sites).
• Not a robust styling system (client controls styling with limited server-side styling support).
• Not limited to web (works on mobile and desktop).

Key Concepts

• Surface: Canvas for components (dialog, sidebar, main view).
• Component: UI element (Button, TextField, Card, etc.).
• Data Model: Application state, components bind to it.
• Catalog: Available component types.
• Message: JSON object (surfaceUpdate, dataModelUpdate, beginRendering, etc.).

Get Started

Ready to build? Choose your path: