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 the standard protocol for Generative UI. It allows AI Agents to break free from the chatbox and render rich, native interfaces instantly.
Instead of generating risky HTML codes or static text, A2UI enables your agent to send a semantic blueprint (JSON). Your client application then turns this blueprint into pixel-perfect React, Vue, or Mobile components.
Status: v0.8 Public Preview | License: Apache 2.0 | Contributors: Google, CopilotKit, Open Source Community
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 citizen, A2UI decouples the Agent’s Intent from the Visual Rendering, making AI apps faster, safer, and 10x better looking.
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: Zero UI hallucinations. Perfect brand consistency.
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. You define the UI logic once, and it runs natively in React, Angular, Flutter, or Swift.
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 JSON response (
surfaceUpdate). - 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 |
|---|---|---|---|
| Security | 🟥 Dangerous (XSS) | 🟨 Medium | 🟩 Enterprise Secure |
| Platform | 🟨 Web Only | 🟨 React/Next.js | 🟩 Any (Web/Mobile/CLI) |
| Styling | 🟥 Hallucinations | 🟨 Presets | 🟩 Your Design System |
Why Developers Love A2UI
Think of it as the “Frontend Framework for Agents”.
- Type Safe: No more broken JSON. Validated against strict schemas.
- Efficient: Compact payload saves token costs.
- Flexible: If you can build it in React, your Agent can use it.