The Problem: You wouldn’t use a fax machine to browse the web. So why are we forcing AI Agents to communicate in plain text?
A2UI (Agent-to-User Interface) is an open protocol for Generative UI. It allows AI agents to describe rich interfaces that a host renders with approved native components.
Instead of executing agent-generated HTML or JavaScript, A2UI sends a declarative JSON blueprint. The host maps that blueprint to its own React, Angular, Lit, Flutter, or community renderer components.
Status: v0.9.1 current production release; v1.0 candidate; v0.8 legacy. See the version status guide. License: Apache 2.0.
Why Text is Failing Agents
Text-only interactions are a bottleneck for Agentic workflows. Imagine booking a flight:
- ❌ Text Workflow: 10 turns of conversation to settle on dates, times, and airlines.
- ✅ A2UI Workflow: The agent instantly renders an interactive flight picker component.
By treating UI as a first-class protocol concern, A2UI decouples agent intent from visual rendering, allowing one validated model to map to host-owned components across platforms.
Above: The difference between a “Chatbox” and a true “Agentic Interface”.
The “Native-First” Philosophy
Why not just let the AI generate HTML? Because injecting raw HTML is insecure and ugly. A2UI follows a Native-First philosophy designed by Google engineers (led by Minko Gechev).
1. Blueprint, Not Code (Declarative)
Think of A2UI as an architect’s sketch, not the building itself.
The AI sends a lightweight JSON description ({ type: "button", label: "Buy" }). Your application uses your own design system to render it.
- Result: A constrained component vocabulary and host-controlled presentation. Validation and design review are still required.
2. Built for Speed (Streaming)
Model inference can be slow, but A2UI is fast. It uses progressive Streaming JSON. The interface paints itself on the screen while the AI is still “thinking”, creating a magical user experience.
3. Write Once, Render Anywhere (Framework Agnostic)
Your Agent shouldn’t care if it’s talking to a Web App, iOS App, or CLI. A2UI provides a common language. Maintained renderers cover React, Angular, Lit, and Flutter; additional platforms are available through the community renderer ecosystem.
Above: Watch A2UI render complex interactive charts and maps at the speed of thought.
Architecture: How It Works
- User Prompt: “Find me flights to Tokyo.”
- Agent Logic: LLM decides to show a Flight Selector.
- A2UI Stream: Agent streams v0.9.1 messages such as
createSurface,updateComponents, andupdateDataModel. - Client Parse: A2UI library parses the stream in real-time.
- Native Render: Your App maps JSON to your actual
<FlightCard />React component.
Curious about the security? Read Is it Safe? (Trust & Security)
A2UI vs The Rest
| Feature | Raw HTML/JS | Vercel AI SDK | A2UI |
|---|---|---|---|
| Execution boundary | Generated code may execute | Framework-specific | Declarative data mapped to an allowlisted catalog |
| Platform | Primarily web | React/Next.js | Maintained web and Flutter renderers; community platforms |
| Styling | Generated or remote CSS | Framework presets | Host design system |
Why Developers Love A2UI
Think of it as the “Frontend Framework for Agents”.
- Schema validated: Malformed or unsupported messages can be rejected before rendering.
- Efficient: Compact payload saves token costs.
- Flexible: If you can build it in React, your Agent can use it.