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.

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:

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

Message types

A2UI uses four core message types:

Example: A2UI JSON

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

{
  "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:

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

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)

npx skills add a2ui-project/a2ui

Or clone the repo and run the samples:

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
• GitHub: github.com/a2ui-project/a2ui
• Playground: CopilotKit A2UI Playground
• Spec: A2UI v1.0 Specification
• llms.txt: 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 or the CopilotKit playground.