The Complete Guide to A2UI Protocol: Building Agent-Driven UIs with Google's A2UI in 2026

🎯 Core Takeaways (TL;DR)

• A2UI protocol is a declarative UI protocol that enables AI agents to generate rich, interactive interfaces that render natively across web, mobile, and desktop platforms
• A2UI solves the critical challenge of secure, cross-platform UI generation in multi-agent systems without executing arbitrary code
• Google's adoption of A2UI powers production systems like Opal, Gemini Enterprise, and Flutter GenUI SDK, demonstrating enterprise-grade reliability
• The A2UI protocol uses JSON messages to describe UI components, enabling LLM-friendly generation while maintaining native performance and styling
• A2UI separates UI structure from application state, enabling reactive updates and data-driven interfaces through JSON Pointer bindings

Table of Contents

1. What is A2UI Protocol?
2. How Does A2UI Work?
3. Why Use A2UI Protocol?
4. A2UI Architecture and Core Concepts
5. Google's A2UI Implementation
6. A2UI vs. Other Agent UI Solutions
7. Getting Started with A2UI
8. Best Practices for A2UI Development
9. Common Questions About A2UI
10. Conclusion and Next Steps

---

What is A2UI Protocol?

A2UI (Agent to UI) is a declarative UI protocol designed specifically for agent-driven interfaces. Unlike traditional approaches that rely on text-only interactions or embedded HTML/JavaScript, the A2UI protocol enables AI agents to generate rich, interactive UIs that render natively across platforms—web, mobile, and desktop—without executing arbitrary code. The A2UI protocol represents a fundamental advancement in how AI agents communicate with user interfaces, providing a standardized way for agents to describe UI components that clients can render using their native frameworks.

The Problem A2UI Solves

Traditional agent interactions suffer from inefficiency:

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

With A2UI, agents generate complete forms with date pickers, time selectors, and submit buttons. Users interact with native UI components, not endless text exchanges.

The Challenge in Multi-Agent Systems

In distributed agent architectures, agents often run remotely across different servers and organizations. They cannot directly manipulate your application's UI—they must communicate through messages. Traditional solutions like sending HTML/JavaScript in iframes are:

• Heavy and visually disjointed - Creates jarring user experiences
• Security complex - Requires extensive sandboxing and validation
• Styling mismatches - Doesn't integrate with your app's design system

A2UI protocol solves this by transmitting UI descriptions as structured data—safe like JSON, expressive like code. This approach makes A2UI uniquely suited for multi-agent systems where security and interoperability are paramount.

How A2UI Protocol Works

The A2UI protocol uses JSON messages to describe UI components. Understanding how A2UI protocol works is essential for developers building agent-driven applications:

{"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"}}}}
]}}

These messages travel over any transport (A2A, AG UI, SSE, WebSockets) and clients render them using their own native components. The result: A2UI gives clients full control over security and styling while agent-generated UI feels completely native. This is the core value proposition of the A2UI protocol—secure, native-feeling UI generation that works across any platform and transport mechanism.

---

How Does A2UI Work?

The A2UI Message Flow

Understanding the A2UI protocol message flow is crucial for implementing A2UI in your applications. The A2UI protocol defines a sequence of JSON messages that describe UI structure, application state, and rendering instructions:

Agent (LLM) → A2UI Generator → Transport (SSE/WS/A2A)
                                      ↓
Client (Stream Reader) → Message Parser → Renderer → Native UI

Core Message Types in A2UI Protocol

The A2UI protocol specification defines four primary message types that form the foundation of A2UI communication. Understanding these A2UI protocol message types is essential for both agent developers and client implementers:

Message Type	Purpose	Example Use Case
surfaceUpdate	Define or update UI components	Creating a form with input fields
dataModelUpdate	Update application state	Populating form values or updating displayed data
beginRendering	Signal the client to render	Triggering UI display after components are ready
deleteSurface	Remove a UI surface	Cleaning up after workflow completion

A2UI Component Structure: Adjacency List Model

Unlike traditional nested JSON trees, A2UI uses an adjacency list model—components are stored as a flat list with ID references. This design choice makes A2UI protocol particularly LLM-friendly and is one of the key innovations that sets A2UI apart from other UI generation approaches:

Traditional nested approach:

• Requires perfect nesting in one pass
• Difficult to update deeply nested components
• Hard to stream incrementally

A2UI adjacency list:

• ✅ Flat structure, easy for LLMs to generate—this is why A2UI protocol is so LLM-friendly
• ✅ Send components incrementally—A2UI supports progressive rendering
• ✅ Update any component by ID—A2UI protocol enables efficient updates
• ✅ Clear separation of structure and data—A2UI architecture promotes clean design

Example: A2UI Component Definition

{
  "surfaceUpdate": {
    "components": [
      {"id": "root", "component": {"Column": {"children": {"explicitList": ["greeting", "buttons"]}}}},
      {"id": "greeting", "component": {"Text": {"text": {"literalString": "Hello"}}}},
      {"id": "buttons", "component": {"Row": {"children": {"explicitList": ["cancel-btn", "ok-btn"]}}}},
      {"id": "cancel-btn", "component": {"Button": {"child": "cancel-text", "action": {"name": "cancel"}}}}
    ]
  }
}

Data Binding in A2UI Protocol

Data binding is a core feature of the A2UI protocol. A2UI separates UI structure from application state using JSON Pointer paths (RFC 6901). This separation is fundamental to how A2UI protocol enables reactive updates:

Literal values (fixed):

{"text": {"literalString": "Welcome"}}

Data-bound values (reactive):

{"text": {"path": "/user/name"}}

When /user/name changes, the component automatically updates—no component regeneration needed. This reactive binding is a core strength of the A2UI protocol and demonstrates why A2UI is so efficient for dynamic, data-driven interfaces. The A2UI protocol data binding system enables agents to update UI state without regenerating entire component trees.

---

Why Use A2UI Protocol?

1. Security: Declarative Data, Not Code

A2UI protocol transmits declarative component descriptions, not executable code. Agents request components from the client's trusted catalog, eliminating code execution risks. This makes A2UI ideal for multi-agent systems where agents run across trust boundaries. The security model of A2UI protocol is one of its most important features, enabling safe UI generation from untrusted agents.

💡 Security Advantage

Unlike iframe-based solutions that require extensive sandboxing, A2UI components are rendered by the client using its own trusted components. The agent never executes code—it only describes what UI should appear.

2. Native Feel and Performance

A2UI eliminates iframes and visual disjointment. Clients render A2UI messages using their native UI frameworks (Angular, React, Flutter, SwiftUI), inheriting:

• App styling - Perfect brand consistency
• Accessibility - Native accessibility features
• Performance - Native rendering performance

3. Cross-Platform Portability

One A2UI response works everywhere. The same JSON messages render on:

• Web: Lit, Angular, React (coming Q1 2026)
• Mobile: Flutter, SwiftUI, Jetpack Compose
• Desktop: Flutter, native desktop frameworks

This portability is a key differentiator of the A2UI protocol. When you build with A2UI, you're building for all platforms simultaneously. The A2UI protocol specification ensures that agents can generate UI once and have it work everywhere.

4. LLM-Friendly Design

The A2UI protocol is optimized for LLM generation. This LLM-friendly design is what makes A2UI so effective for AI agent applications:

• Flat component lists - Easy to generate incrementally with A2UI protocol
• ID-based references - Simple to correct mistakes in A2UI component trees
• Streamable format - Progressive rendering as A2UI components are generated
• Structured output - Natural fit for LLM structured generation capabilities, making A2UI ideal for AI agents

5. Framework Agnostic

A2UI sends abstract component trees. Clients map these to their native widgets, enabling:

• Framework choice - Use your preferred UI framework with A2UI protocol
• Custom components - Extend A2UI with domain-specific widgets
• Design system integration - Match your brand perfectly using A2UI styling capabilities

The framework-agnostic nature of A2UI protocol means you're not locked into any specific technology stack. A2UI works with whatever framework you choose.

---

A2UI Architecture and Core Concepts

The Three-Layer Architecture

A2UI protocol separates concerns into three distinct layers. This architectural separation is fundamental to how A2UI works:

1. UI Structure - Component definitions via surfaceUpdate in A2UI protocol
2. Application State - Data model via dataModelUpdate in A2UI protocol
3. Client Rendering - Native component mapping and rendering of A2UI messages

This separation enables:

• Data binding - Reactive updates without component regeneration in A2UI
• Reusable templates - One template, many data instances with A2UI protocol
• Clean architecture - Clear boundaries between agent and client in A2UI systems

The three-layer architecture of A2UI protocol ensures that UI structure, state, and rendering remain independent, making A2UI flexible and maintainable.

A2UI Standard Catalog

The A2UI protocol defines a standard catalog of components organized by purpose. This A2UI standard catalog provides a common set of components that all A2UI clients must support:

Category	Components	Use Cases
Layout	Row, Column, List	Arranging other components
Display	Text, Image, Icon, Video, Divider	Showing information
Interactive	Button, TextField, CheckBox, DateTimeInput, Slider	User input and interaction
Container	Card, Tabs, Modal	Grouping and organizing content

Custom Components in A2UI

Beyond the standard catalog, A2UI supports custom components for domain-specific needs. The A2UI protocol extensibility model allows:

• Charts and visualizations - Custom data displays using A2UI custom components
• Maps and location - Geographic interfaces with A2UI protocol
• Specialized widgets - Industry-specific components in A2UI applications

Custom components are advertised from the client's renderer to the agent, maintaining A2UI protocol security while enabling extensibility. This makes A2UI adaptable to any domain or use case.

Progressive Rendering with A2UI

A2UI protocol supports streaming and progressive rendering. This progressive rendering capability is a key feature of A2UI:

{"surfaceUpdate":{"surfaceId":"main","components":[...]}}
{"dataModelUpdate":{"surfaceId":"main","contents":[...]}}
{"beginRendering":{"surfaceId":"main","root":"root-component"}}

Users see UI building in real-time instead of waiting for complete responses—a significant UX improvement enabled by A2UI. The A2UI protocol streaming format makes this progressive rendering possible, allowing A2UI clients to display UI as it's being generated.

---

Google's A2UI Implementation

Google has been a core contributor to A2UI from the beginning, and A2UI powers several production systems at Google. Google's investment in A2UI protocol demonstrates the protocol's production readiness and enterprise value. The A2UI implementations at Google showcase how A2UI protocol scales to serve millions of users:

Google Opal: AI Mini-Apps Platform

Opal enables hundreds of thousands of people to build, edit, and share AI mini-apps using natural language. The Opal team uses A2UI to power their dynamic, generative UI system.

How Opal uses A2UI:

• Rapid prototyping - Build and test new UI patterns quickly with A2UI protocol
• User-generated apps - Anyone can create apps with custom UIs using A2UI
• Dynamic interfaces - UIs adapt to each use case automatically with A2UI protocol

Opal's success demonstrates the power of A2UI for user-facing applications. The A2UI protocol enables Opal to provide a flexible, secure platform for AI-generated applications.

"A2UI is foundational to our work. It gives us the flexibility to let the AI drive the user experience in novel ways, without being constrained by a fixed front-end. Its declarative nature and focus on security allow us to experiment quickly and safely."

— Dimitri Glazkov, Principal Engineer, Opal Team

Gemini Enterprise: Custom Business Agents

Gemini Enterprise enables businesses to build powerful, custom AI agents. A2UI is being integrated to allow enterprise agents to render rich, interactive UIs within business applications.

A2UI use cases in Gemini Enterprise:

• Data entry forms - AI-generated forms for structured data collection using A2UI protocol
• Approval dashboards - Dynamic UIs for review and approval processes with A2UI
• Workflow automation - Step-by-step interfaces for complex tasks powered by A2UI protocol
• Custom enterprise UIs - Tailored interfaces for industry-specific needs using A2UI

Gemini Enterprise's adoption of A2UI shows how A2UI protocol enables enterprise-grade agent applications. The A2UI integration allows Gemini Enterprise agents to generate rich, interactive UIs for business workflows.

"Our customers need their agents to do more than just answer questions; they need them to guide employees through complex workflows. A2UI will allow developers building on Gemini Enterprise to have their agents generate the dynamic, custom UIs needed for any task, from data entry forms to approval dashboards, dramatically accelerating workflow automation."

— Fred Jabbour, Product Manager, Gemini Enterprise

Flutter GenUI SDK: Cross-Platform Generative UI

The Flutter GenUI SDK uses A2UI as the underlying protocol for communication between server-side agents and Flutter applications. When you use GenUI, you're using A2UI under the covers.

GenUI benefits from A2UI:

• Cross-platform support - Same agent works on iOS, Android, web, desktop using A2UI protocol
• Native performance - Flutter widgets rendered natively on each platform with A2UI
• Brand consistency - UIs match your app's design system through A2UI protocol
• Server-driven UI - Agents control what's shown without app updates using A2UI

Flutter GenUI SDK's use of A2UI demonstrates how A2UI protocol enables cross-platform generative UI. The A2UI integration makes GenUI a powerful tool for building AI-driven Flutter applications.

"Our developers choose Flutter because it lets them quickly create expressive, brand-rich, custom design systems that feel great on every platform. A2UI was a great fit for Flutter's GenUI SDK because it ensures that every user, on every platform, gets a high quality native feeling experience."

— Vijay Menon, Engineering Director, Dart & Flutter

Google's Internal Agent Adoption

As Google adopts AI across the company, A2UI provides a standardized way for AI agents to exchange user interfaces, not just text. Google's internal use of A2UI protocol demonstrates its value for large-scale agent systems:

• Multi-agent workflows - Multiple agents contribute to the same surface using A2UI protocol
• Remote agent support - Agents running on different services can provide UI through A2UI
• Standardization - Common A2UI protocol across teams reduces integration overhead
• External exposure - Internal agents can be easily exposed externally (e.g., Gemini Enterprise) using A2UI

Google's adoption of A2UI internally shows how A2UI protocol enables standardization and interoperability across diverse agent systems. The A2UI approach allows Google teams to build agents that work together seamlessly.

"Much like A2A lets any agent talk to another agent regardless of platform, A2UI standardizes the user interface layer and supports remote agent use cases through an orchestrator. This has been incredibly powerful for internal teams, allowing them to rapidly develop agents where rich user interfaces are the norm, not the exception. As Google pushes further into generative UI, A2UI provides a perfect platform for server-driven UI that renders on any client."

— James Wren, Senior Staff Engineer, AI Powered Google

---

A2UI vs. Other Agent UI Solutions

A2UI vs. AG UI / CopilotKit

AG UI / CopilotKit provides a comprehensive framework for building agentic applications with day-zero A2UI compatibility.

How they work together:

• AG UI excels at creating high-bandwidth connections between custom frontends and dedicated agents
• A2UI enables rendering dynamic UIs from third-party agents
• Combined: Developers get state synchronization from AG UI plus A2UI rendering for multi-agent support

When to use A2UI directly:

• Building multi-agent platforms with agents across trust boundaries
• Need standard protocol for agent-to-UI communication
• Require cross-platform support beyond React

When to use AG UI with A2UI:

• Building full-stack React applications
• Need state synchronization and chat history management
• Want seamless integration with existing React codebase

A2UI vs. MCP Apps

Model Context Protocol (MCP) Apps treat UI as a resource (accessed via ui:// URI) that renders pre-built HTML content within sandboxed iframes.

How A2UI is different:

• A2UI takes a "native-first" approach—agents send blueprints of native components
• A2UI UI inherits host app's styling and accessibility perfectly
• A2UI messages are lightweight and understandable by orchestrator agents
• A2UI enables better multi-agent collaboration

When to use A2UI:

• Need native UI integration with host app styling
• Building multi-agent systems with orchestrators
• Require cross-platform consistency

When to use MCP Apps:

• Need complete UI isolation in sandboxed iframes
• Pre-built HTML interfaces are sufficient
• Working within MCP ecosystem exclusively

A2UI vs. Platform-Specific Solutions

Tools like OpenAI ChatKit offer highly integrated experiences for deploying agents within specific ecosystems.

A2UI advantages:

• Framework agnostic - Works with Web, Flutter, native mobile
• Enterprise meshes - Designed for A2A and cross-trust-boundary communication
• Client control - Clients control styling for visual consistency
• Open source - Apache 2.0 license, community-driven

When to use A2UI:

• Building your own agentic surfaces across multiple platforms
• Need interoperability across different agent platforms
• Require brand consistency and design system integration

---

Getting Started with A2UI

Path 1: Building a Host Application (Frontend)

Integrate A2UI rendering into your existing app or build a new agent-powered frontend.

Choose a renderer:

Platform	Renderer	Status
Web	Lit, Angular	✅ Available
Mobile/Desktop	Flutter GenUI SDK	✅ Available
React	React Renderer	🚧 Coming Q1 2026

Quick setup example (Angular):

npm install @a2ui/angular

Connect to agent messages via SSE, WebSockets, or A2A, and customize styling to match your brand.

Path 2: Building an Agent (Backend)

Create an agent that generates A2UI responses for any compatible client.

Choose your framework:

Language	Framework	Status
Python	Google ADK, LangChain, custom	✅ Available
Node.js	A2A SDK, Vercel AI SDK, custom	✅ Available

Include the A2UI schema in your LLM prompts, generate JSONL messages, and stream to clients over SSE, WebSockets, or A2A.

Path 3: Using an Existing Framework

Use A2UI through frameworks with built-in support:

• AG UI / CopilotKit - Full-stack React framework with A2UI rendering
• Flutter GenUI SDK - Cross-platform generative UI (uses A2UI internally)

---

Best Practices for A2UI Development

1. Component Design

✅ Do:

• Use descriptive IDs: "user-profile-card" not "c1"
• Keep hierarchies shallow
• Separate structure from content using data bindings
• Reuse components with templates

❌ Don't:

• Use deeply nested component structures
• Hard-code values that should be data-bound
• Create components that are too specific to one use case

2. Data Binding

✅ Do:

• Use granular updates—update only changed paths
• Organize data by domain (user, cart, ui)
• Pre-compute display values (currency, dates) before sending

❌ Don't:

• Update entire data model when only one field changes
• Mix unrelated data in the same path
• Send raw data that needs formatting

3. Message Streaming

✅ Do:

• Stream components incrementally for progressive rendering
• Send surfaceUpdate before dataModelUpdate
• Use beginRendering to signal when UI is ready

❌ Don't:

• Wait for complete response before sending any messages
• Send data updates before component definitions
• Forget to signal rendering completion

4. Error Handling

✅ Do:

• Skip malformed messages and continue processing
• Display error states for network interruptions
• Allow agents to resend or resume after errors

❌ Don't:

• Crash on single malformed message
• Lose user context during reconnection
• Ignore error feedback from clients

5. Performance Optimization

✅ Do:

• Batch updates for 16ms render cycles
• Use diffing to update only changed properties
• Make granular data model updates

❌ Don't:

• Send redundant component updates
• Update entire surfaces when one component changes
• Ignore client rendering capabilities

---

Common Questions About A2UI

Q: What is A2UI protocol?

A: A2UI protocol is a declarative UI protocol that enables AI agents to generate rich, interactive user interfaces. Agents send JSON messages describing UI components, and clients render these using their native UI frameworks. A2UI is designed for multi-agent systems where agents need to generate UIs across trust boundaries while maintaining security and native performance.

Q: How does A2UI differ from sending HTML?

A: Unlike HTML/JavaScript approaches, A2UI protocol transmits declarative component descriptions, not executable code. Clients render A2UI messages using their own trusted components, eliminating security risks. A2UI also provides native styling integration, cross-platform portability, and better performance compared to iframe-based HTML solutions.

Q: Is A2UI only for web applications?

A: No. A2UI is designed for cross-platform use. The same A2UI messages render on web (Lit, Angular, React), mobile (Flutter, SwiftUI, Jetpack Compose), and desktop platforms. This portability is a core strength of the A2UI protocol.

Q: Can I use custom components with A2UI?

A: Yes. A2UI supports custom components beyond the standard catalog. Clients register custom component types in their renderers, and agents can use them alongside standard components. Custom components maintain security by being part of the client's trusted catalog.

Q: How does A2UI handle real-time updates?

A: A2UI protocol uses data binding with JSON Pointer paths. When application state changes via dataModelUpdate, components bound to those paths automatically update without requiring component regeneration. This reactive binding enables efficient real-time updates.

Q: What transport protocols does A2UI support?

A: A2UI messages can travel over any transport protocol:

• A2A Protocol - For multi-agent systems
• AG UI - Bidirectional, real-time communication
• SSE (Server-Sent Events) - One-way streaming
• WebSockets - Full-duplex communication
• REST - Request-response (feasible but not yet available)

Q: Is A2UI open source?

A: Yes. A2UI is open source under the Apache 2.0 license. Google has been a core contributor, and the project welcomes community contributions. You can find the source code and contribute on GitHub.

Q: How does Google use A2UI?

A: Google uses A2UI in production systems including:

• Opal - AI mini-apps platform for hundreds of thousands of users
• Gemini Enterprise - Custom business agents with rich UIs
• Flutter GenUI SDK - Cross-platform generative UI framework
• Internal agent systems - Standardized UI protocol across Google teams

Q: Can I use A2UI with existing React applications?

A: Yes, in two ways:

1. AG UI / CopilotKit - Full-stack React framework with built-in A2UI support
2. React Renderer - Native React renderer coming in Q1 2026

Q: What makes A2UI LLM-friendly?

A: A2UI protocol uses a flat adjacency list model instead of nested trees, making it easier for LLMs to generate incrementally. Components are identified by simple IDs, errors are easy to correct, and the format supports streaming for progressive rendering.

---

Conclusion and Next Steps

A2UI protocol represents a fundamental shift in how AI agents generate user interfaces. By separating UI structure from application state and using declarative JSON messages, A2UI enables secure, native, cross-platform UI generation that feels integrated with your application. The A2UI protocol is transforming how developers build agent-driven applications, and Google's production use of A2UI validates its approach.

Key Advantages of A2UI

1. Security - Declarative data, no code execution with A2UI protocol
2. Native Performance - Renders using client's UI framework through A2UI
3. Cross-Platform - One A2UI protocol, multiple platforms
4. LLM-Friendly - Optimized for AI agent generation with A2UI
5. Production-Proven - Powers Google's Opal, Gemini Enterprise, and Flutter GenUI using A2UI protocol

These advantages make A2UI the protocol of choice for building agent-driven applications. The A2UI protocol combines security, performance, and portability in a way that no other solution can match.

Getting Started

For Frontend Developers:

• Choose a renderer (Lit, Angular, or Flutter GenUI) that supports A2UI protocol
• Install the A2UI renderer package for your framework
• Connect to agent messages and customize styling with A2UI

For Agent Developers:

• Choose your framework (Python ADK, Node.js A2A SDK) that supports A2UI protocol
• Include A2UI schema in LLM prompts to generate A2UI messages
• Generate JSONL messages using A2UI protocol and stream to clients

For Platform Builders:

• Explore the A2UI specification to understand A2UI protocol details
• Build custom renderers or extend existing ones for A2UI
• Contribute to the open-source A2UI community

Getting started with A2UI protocol is straightforward regardless of your role. The A2UI ecosystem provides tools and documentation for every use case.

Resources

• Documentation: A2UI Docs
• GitHub: google/A2UI
• Quickstart: Try the interactive demos
• Community: Join discussions and share your projects

The Future of A2UI

As AI agents become more capable and widespread, the need for standardized UI generation protocols grows. A2UI protocol is positioned to become the standard for agent-driven interfaces, enabling a new generation of applications where AI agents seamlessly generate rich, interactive UIs that feel native to every platform. Google's adoption of A2UI and the growing A2UI ecosystem demonstrate the protocol's potential.

Whether you're building the next generation of AI-powered applications, integrating agents into existing platforms, or creating new agent orchestration systems, A2UI provides the protocol, tools, and community to make agent-driven UI a reality. The A2UI protocol is the foundation for the future of agent-driven interfaces, and now is the time to start building with A2UI.

---

Ready to build with A2UI? Start with the Quickstart Guide or explore the Component Gallery to see A2UI in action. The A2UI protocol is ready for production use, and Google's success with A2UI proves its value. Join the A2UI community and start building the next generation of agent-driven applications today.

The Complete Guide to A2UI Protocol

The Complete Guide to A2UI Protocol: Building Agent-Driven UIs with Google's A2UI in 2025