# A2UI: Google’s Open-Source Generative UI Framework for AI Agents (2026)

- Link: https://dev.ejohnny.ro/a2ui-google-generative-ui-framework/
- Published: 2026-11-13T18:44:41+02:00
- Author: eJohnny

AI agents can reason, plan, and act — but when it comes to showing results to users,
most still spit out walls of text. Generative UI changes that. And A2UI is Google’s
open-source answer to making it work across every platform.

**A2UI (Agent-to-User Interface)** is a framework-agnostic, declarative JSON protocol
that lets AI agents generate rich, interactive user interfaces that render natively
on web, mobile, and desktop. Instead of sending text or risky executable code, agents
send structured UI descriptions that client apps render using their own native components.

Think of it as: agents “speak UI” in a universal language, and every app translates
it into its own design system. Same agent output, same components, rendered natively
on React, Flutter, Angular, SwiftUI, and more.

![A2UI generative UI framework for AI agents](https://images.unsplash.com/photo-
1551650975-87deedd944c3?fm=jpg&q=60&w=1200&auto=format&fit=crop)

A2UI lets agents generate rich, native UIs across all platforms. Photo by Unsplash.

## The problem A2UI solves

Without a standard, every team building agentic experiences invents their own way
for agents to describe UI. The result:

 * **Locked to one framework** — your agent’s UI only works in React, or only in
   Flutter, not both.
 * **Security risks** — agents generate raw HTML/JS that could contain XSS or malicious
   code.
 * **Inconsistent UX** — agent-generated UI doesn’t match your design system.
 * **Rebuilt plumbing** — every new agent means rebuilding the same UI transport
   layer.

A2UI solves this with one open format. Any agent writes it, any app renders it with
its own components, and the work you put into your component catalog carries across
every agent and platform.

## How A2UI works

A2UI disconnects the _generation_ of UI from the _execution_ of UI. The agent describes
what the UI should look like; the client renders it using its own native widgets.
Here’s the flow:

 **1. User sends a message** — “Book me a flight to NYC next Tuesday”

 **2. Agent generates A2UI messages** — declarative JSON describing UI structure
+ data (streamed as JSONL)

 **3. Messages stream to client** — over MCP, WebSockets, REST, AG-UI, or A2A

 **4. Client renders natively** — using its own components (React, Flutter, Angular,
SwiftUI, Compose)

 **5. User interacts** — actions sent back to the agent (structured, not arbitrary
code)

 **6. Agent responds** — updated A2UI messages with new UI

_The UI renders progressively as the agent generates it — no waiting for a complete
response._

### Message types

A2UI uses four core message types:

← swipe to see all columns →

  | Message | Direction | Purpose | 
   | `createSurface` | Agent → Client | Creates a new UI surface (screen/panel) with a catalog reference | 
 | `updateComponents` | Agent → Client | Adds or updates components on a surface (flat list with ID references) | 
 | `updateDataModel` | Agent → Client | Updates data bindings (e.g., user name, prices, availability) | 
 | `action` | Client → Agent | User interaction event (button click, form submit, selection) |

### Example: A2UI JSON

Here’s what an A2UI message looks like on the wire:

    ```wp-block-code
    {
      "version": "1.0",
      "createSurface": {
        "surfaceId": "flight-booking",
        "catalogId": "https://example.com/catalogs/travel/v1"
      }
    }

    {
      "version": "1.0",
      "updateComponents": {
        "surfaceId": "flight-booking",
        "components": [
          {"id": "root", "component": "Card", "child": "layout"},
          {"id": "layout", "component": "Column", "children": ["title", "flight", "btn"]},
          {"id": "title", "component": "Text", "text": "Confirm booking"},
          {"id": "flight", "component": "FlightCard", "flightNumber": "LH 454", "price": 450},
          {"id": "btn", "component": "Button", "child": "btn_label", "variant": "primary",
           "action": {"event": {"name": "confirm", "context": {"flight": "LH 454"}}}}
        ]
      }
    }
    ```

The agent describes _what_ to show (components + data). The client decides _how_
to render them (its own styled widgets). The same JSON renders as a Material card
on Angular, a SwiftUI view on iOS, or a Compose layout on Android.

## The generative UI spectrum

A2UI sits in the middle of the generative UI spectrum. The same user request can
be handled three ways:

← swipe to see all columns →

  | Approach | What the agent sends | Flexibility | Security | UX fidelity | 
   | **Pre-built widgets** | A fixed widget ID + data | Low | High | High (matches design system) | 
 | **Composition (A2UI)** | Declarative JSON describing component tree | Medium | High (no executable code) | High (uses your components) | 
 | **Code generation** | Raw HTML/CSS/JS | Maximum | Low (XSS risk) | Variable (may not match brand) |

A2UI’s bet: composition gives you 90% of the flexibility with 100% of the security.
The agent picks from a pre-approved catalog of components, binds data to them, and
the client renders them natively. No arbitrary code execution, no style mismatches,
no XSS.

## Key features

### 1. Security first

A2UI transmits **declarative data, not executable code**. The agent can only request
components from a pre-approved catalog. This means:

 * No XSS vulnerabilities from agent-generated HTML
 * No style injection or layout attacks
 * The host app controls what components exist and how they look
 * Agents can’t break out of the catalog’s sandbox

### 2. Framework-agnostic

The same A2UI JSON renders on:

 * **React** — `@a2ui/react`
 * **Lit** — `@a2ui/lit`
 * **Angular** — `@a2ui/angular`
 * **Flutter** — `a2ui_flutter`
 * **SwiftUI** — Swift package
 * **Jetpack Compose** — Android
 * **Community renderers:** Lynx, Svelte, Vue, Compose Multiplatform, Go TUI

One agent response works everywhere. Your component catalog is the only thing that’s
framework-specific.

### 3. Streaming and progressive rendering

A2UI uses JSONL (JSON Lines) format for streaming. The UI renders as it’s generated—
users see the interface building in real-time instead of waiting for a complete 
response. The SDK can also incrementally parse and heal partial LLM output, so components
appear even if the JSON is incomplete.

### 4. Native rendering

Because A2UI renders using the host app’s own components, the result is:

 * **Fast** — no iframe overhead, no web view rendering
 * **Accessible** — inherits the host’s accessibility features
 * **On-brand** — uses your design system, not a generic template
 * **Performant** — native rendering is faster than HTML in a web view

### 5. Two-way interaction

A2UI supports two-way bindings. User actions (button clicks, form inputs) are sent
back to the agent as structured events, not arbitrary code. The agent can then respond
with updated UI. This enables conversational, multi-step workflows.

### 6. Catalog system

The client declares which components, functions, and parameters it supports. The
agent can only choose from this authorized scope. This keeps generation bounded 
while leaving rendering to the renderer. Dynamic catalogs allow switching schemas
at runtime (e.g., different components for different user roles).

## A2UI vs alternatives

← swipe to see all columns →

  | Feature | A2UI | MCP Apps | AG-UI | Open-ended GenUI | 
   | **What it sends** | Declarative JSON (component descriptions) | HTML templates | Agent-frontend protocol | Raw HTML/CSS/JS | 
 | **Security** | High (no executable code) | Medium (sandboxed HTML) | Medium | Low (XSS risk) | 
 | **Framework support** | React, Lit, Angular, Flutter, SwiftUI, Compose + community | Web (iframe) | Framework-agnostic | Web only | 
 | **Native rendering** | Yes | No (iframe) | Depends | No | 
 | **Streaming** | Yes (JSONL) | Yes | Yes | Yes | 
 | **Open source** | Yes (Apache 2.0) | Yes | Yes | Varies | 
 | **Created by** | Google | Anthropic (MCP) | CopilotKit | Various |

A2UI and MCP Apps are complementary, not competing. MCP Apps use HTML templates 
for tools. A2UI uses native components. AG-UI is the runtime layer that transports
A2UI specs. In practice, they work together: MCP connects agents to tools, AG-UI
handles streaming/state, and A2UI describes the UI.

## Who is using A2UI in production?

 * **Google Opal** — AI mini-apps. A2UI powers the dynamic, generative UI system.
 * **Google Gemini Notebook** — uses A2UI cards to confirm user intent before generating
   slide decks. Works on web and mobile.
 * **Google Cloud (Inside Gemini / Gemini Enterprise)** — organizations can register
   A2UI agents. Renders using the A2UI component gallery. Supports A2UI 0.9.1.
 * **ByteDance (Lynx)** — built an A2UI renderer into Lynx, their cross-platform
   framework for mobile/web/desktop. Released June 2026.
 * **Atlassian (Jira)** — agents ask for follow-ups via interactive A2UI cards inside
   work items. Teams answer directly in Jira.
 * **Alation (AIOS)** — AI-generated data feeds with metric cards and charts, rendered
   in Claude conversations and in Alation’s app.
 * **CopilotKit** — launch partner. Provides SDK integration and playground.

## Getting started

### Quickstart (5 minutes)

    ```wp-block-code
    npx skills add a2ui-project/a2ui
    ```

Or clone the repo and run the samples:

    ```wp-block-code
    git clone https://github.com/a2ui-project/a2ui.git
    cd a2ui
    # See README for full setup with Gemini API key
    ```

### SDKs and renderers

 * **Agent SDK** — Python/JS, handles version negotiation, dynamic catalogs, resilient
   streaming
 * **Client SDKs** — React, Lit, Angular, Flutter, SwiftUI, Jetpack Compose
 * **Community renderers** — Lynx, Svelte, Vue, Compose Multiplatform, Go TUI

### Key resources

 * **Docs:** [a2ui.org](https://a2ui.org/)
 * **GitHub:** [github.com/a2ui-project/a2ui](https://github.com/a2ui-project/a2ui)
 * **Playground:** [CopilotKit A2UI Playground](https://go.copilotkit.ai/a2ui-playground)
 * **Spec:** [A2UI v1.0 Specification](https://a2ui.org/specification/v1.0-a2ui/)
 * **llms.txt:** [a2ui.org/llms.txt](https://a2ui.org/llms.txt)

## FAQ

**What is A2UI?**
 A2UI (Agent-to-User Interface) is an open-source, framework-agnostic
generative UI protocol created by Google. It lets AI agents generate rich, interactive
UIs as declarative JSON that renders natively across web, mobile, and desktop using
the host app’s own components.

**Is A2UI production-ready?**
 A2UI reached v1.0 in November 2026. It’s used in 
production by Google (Opal, Gemini Notebook, Gemini Enterprise), ByteDance (Lynx),
Atlassian (Jira), and Alation. The spec is stable but the ecosystem is still growing.

**How is A2UI different from MCP?**
 MCP connects agents to tools and data. A2UI
describes UI. They’re complementary — MCP is the tool layer, A2UI is the UI layer.
In practice, they work together: MCP provides the data, A2UI describes how to display
it.

**How is A2UI different from code generation (raw HTML)?**
 Code generation sends
executable HTML/JS, which is flexible but insecure (XSS risk) and may not match 
your design system. A2UI sends declarative component descriptions from a pre-approved
catalog — secure, consistent, and native to your platform.

**Do I need to use Google’s models with A2UI?**
 No. A2UI is model-agnostic. The
agent can use any LLM (Claude, GPT, Gemini, Llama, etc.) to generate A2UI JSON. 
The protocol doesn’t care which model produced it.

**Can I use A2UI with CopilotKit?**
 Yes. CopilotKit is a launch partner and provides
SDK integration. You can scaffold an A2UI app with `npx copilotkit@latest create
my-app --framework a2ui`.

**What is the generative UI spectrum?**
 Three approaches: (1) Pre-built widgets—
fixed components with data (least flexible, highest security). (2) Composition with
A2UI — agent picks from a catalog and composes layouts (medium flexibility, high
security). (3) Code generation — agent writes raw HTML/JS (maximum flexibility, 
lowest security). A2UI sits in the middle.

## Conclusion

A2UI represents a shift in how AI agents interact with users. Instead of text-only
responses or risky code execution, agents can now generate rich, native UIs that
feel like they belong in the host application. The declarative, catalog-based approach
ensures security while the framework-agnostic design ensures reach across web, mobile,
and desktop.

With Google, ByteDance, Atlassian, and Alation already shipping A2UI in production,
and a growing ecosystem of renderers and SDKs, A2UI is positioned to become the 
standard for generative UI — much like MCP became the standard for agent-tool integration.

If you’re building agentic experiences, A2UI is worth evaluating. Start with the
[5-minute quickstart](https://a2ui.org/quickstart/) or the [CopilotKit playground](https://go.copilotkit.ai/a2ui-playground).

### Share this:

 * [  X ](https://dev.ejohnny.ro/a2ui-google-generative-ui-framework/?share=twitter)
 * [  Facebook ](https://dev.ejohnny.ro/a2ui-google-generative-ui-framework/?share=facebook)
 * [More](https://dev.ejohnny.ro/a2ui-google-generative-ui-framework/#)

 * [  LinkedIn ](https://dev.ejohnny.ro/a2ui-google-generative-ui-framework/?share=linkedin)
 * [  Reddit ](https://dev.ejohnny.ro/a2ui-google-generative-ui-framework/?share=reddit)
 * [  Tumblr ](https://dev.ejohnny.ro/a2ui-google-generative-ui-framework/?share=tumblr)
 * [  Pinterest ](https://dev.ejohnny.ro/a2ui-google-generative-ui-framework/?share=pinterest)
 * [  Telegram ](https://dev.ejohnny.ro/a2ui-google-generative-ui-framework/?share=telegram)
 * [  WhatsApp ](https://dev.ejohnny.ro/a2ui-google-generative-ui-framework/?share=jetpack-whatsapp)