完整開發者教學：使用 A2UI 和 A2A 協議建構 AI Agent 使用者介面

The Complete Developer Tutorial: Building AI Agent UIs with A2UI and A2A Protocol in 2026

The Complete Developer Tutorial: Building AI Agent UIs with A2UI and A2A Protocol in 2026

🎯 Core Takeaways (TL;DR)

Table of Contents

What is A2UI and A2A Protocol?

Understanding A2UI Protocol

A2UI (Agent to UI) is a declarative UI protocol designed specifically for agent-driven interfaces. The A2UI protocol enables AI agents to generate rich, interactive user interfaces that render natively across platforms—web, mobile, and desktop—without executing arbitrary code. Unlike traditional approaches that rely on text-only interactions or embedded HTML/JavaScript, A2UI transmits UI descriptions as structured JSON data.

The A2UI protocol solves a critical challenge in multi-agent systems: how to enable remote agents to generate user interfaces that feel native, secure, and integrated with your application. When agents run across different servers and organizations, they cannot directly manipulate your application's UI—they must communicate through messages. The A2UI protocol provides a standardized way for agents to describe UI components that clients can render using their native frameworks.

Understanding A2A Protocol

A2A protocol (Agent to Agent) is a secure, standardized protocol for agent communication. The A2A protocol provides built-in security, authentication, and bindings for many message formats and transport protocols. When building multi-agent systems, the A2A protocol enables agents to communicate securely across trust boundaries.

The A2A protocol includes an extension that provides easy integration with A2UI. This means that when you use the A2A protocol for agent communication, A2UI support is nearly automatic. The combination of A2UI and A2A protocol creates a powerful foundation for building secure, interoperable agent-driven applications.

Key features of A2A protocol:

When developers choose A2A protocol for their agent infrastructure, they automatically get A2UI support through the extension. This makes A2A protocol a recommended transport option for A2UI applications in enterprise environments.

How A2UI and A2A Protocol Work Together

The A2UI protocol and A2A protocol are designed to work seamlessly together:

This integration makes A2UI and A2A protocol ideal for enterprise meshes and multi-agent systems where security and interoperability are paramount.

💡 Key Insight

The A2UI protocol is transport-agnostic, meaning A2UI messages can travel over A2A protocol, AG UI, SSE, WebSockets, or any other transport mechanism. A2A protocol provides a robust solution for multi-agent systems with built-in security and A2UI support.

Understanding the A2UI Architecture

The Three-Layer Architecture

The A2UI protocol separates concerns into three distinct layers:

This architectural separation enables:

Core Message Types in A2UI Protocol

The A2UI protocol defines four primary message types:

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 makes the A2UI protocol particularly LLM-friendly:

Traditional nested approach:

A2UI adjacency list:

Example: A2UI Component Definition

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. When using A2A protocol with A2UI, the A2A protocol extension ensures that A2UI data binding updates are transmitted efficiently through A2A protocol transport.

Literal values (fixed):

Data-bound values (reactive):

When /user/name changes, the A2UI 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.

Setting Up Your Client Application

Choosing a Renderer

The A2UI protocol supports multiple renderers across different platforms:

Web Components (Lit) Setup

⚠️ Attention

The Lit client library is not yet published to NPM. Check back in the coming days.

The Lit renderer uses Web Components to render A2UI messages:

The Lit renderer provides:

The Lit renderer works with various transport mechanisms including A2A protocol, SSE, and WebSockets for A2UI message delivery.

See working example: Lit shell sample

Angular Setup

⚠️ Attention

The Angular client library is not yet published to NPM. Check back in the coming days.

The Angular renderer provides full integration with Angular's dependency injection and change detection:

The Angular renderer provides:

The Angular renderer supports various transport mechanisms including A2A protocol for secure agent communication.

See working example: Angular restaurant sample

Flutter (GenUI SDK) Setup

Flutter uses the GenUI SDK which provides native A2UI rendering:

The GenUI SDK supports various transport mechanisms including A2A protocol for A2UI message transmission.

Docs: GenUI SDK | GitHub

Connecting to Agents

Your client application needs to:

Common transport options:

⚠️ Important

When using A2A protocol, A2UI support is built-in through the extension, which handles A2UI message serialization and deserialization automatically.

Handling User Actions

When users interact with A2UI components (clicking buttons, submitting forms, etc.), the client:

Error Handling

Common errors to handle in A2UI applications:

When using A2A protocol with A2UI, the extension can help validate A2UI messages and provide error reporting mechanisms.

Building A2UI Agents

Quick Overview

Building an A2UI agent involves:

Starting with a Simple Agent

We'll use the ADK (Agent Development Kit) to build a simple agent that generates A2UI messages:

Then edit the my_agent/agent.py file:

Don't forget to set the GOOGLE_API_KEY environment variable to run this example:

You can test out this agent with the ADK web interface:

Select my_agent from the list, and ask questions about restaurants in New York. You should see a list of restaurants in the UI as plain text.

Generating A2UI Messages

Getting the LLM to generate A2UI messages requires some prompt engineering. The A2UI protocol is designed to be LLM-friendly, making it easier for agents to generate valid A2UI JSON messages.

⚠️ Attention

This is an area we are still designing. The developer ergonomics of this are not yet finalized.

For now, let's copy the a2ui_schema.py from the contact lookup example. This is the easiest way to get the A2UI schema and examples for your agent (subject to change):

First, add the new imports to the agent.py file:

Now modify the agent instructions to generate A2UI messages:

Understanding the Output

Your agent will output text and a JSON list of A2UI messages. The A2UI protocol defines these messages in a structured format that LLMs can easily generate. The A2UI_SCHEMA defines valid operations like:

Because the output is structured JSON following the A2UI protocol, you may parse and validate it before sending it to the client:

⚠️ Important

Parsing LLM output as JSON can be fragile. LLMs often put Markdown fences around JSON output and can make other mistakes. It's recommended to rely on frameworks to parse the JSON for you.

By validating the output against A2UI_SCHEMA, you ensure that your client never receives malformed A2UI instructions. The A2UI protocol validation ensures that all A2UI messages conform to the specification. When using A2A protocol with A2UI, the A2A protocol extension can perform additional validation to ensure A2UI message integrity.

Implementing A2UI Renderers

Core Protocol Implementation Checklist

A compliant A2UI renderer must implement these systems to successfully parse the server stream, manage state, and handle user interactions.

Message Processing & State Management

Rendering Logic

Client-to-Server Communication

Standard Component Catalog Checklist

To ensure a consistent user experience across platforms, A2UI defines a standard set of components. Your client should map these abstract definitions to their corresponding native UI widgets.

Basic Content:

Layout & Containers:

Interactive & Input Components:

Working with A2A Protocol Transport

Understanding A2A Protocol Integration

The A2A protocol provides secure, standardized agent communication with built-in A2UI support. When you use A2A protocol for agent communication, A2UI support is nearly automatic. The A2A protocol is specifically designed to work seamlessly with A2UI, making it the preferred transport mechanism for A2UI applications in production environments.

Benefits of using A2A protocol with A2UI:

A2A Protocol Extension for A2UI

The A2A protocol includes an extension that provides easy integration with A2UI. This A2A protocol extension makes A2UI integration seamless and automatic. The A2A protocol extension handles:

The A2A protocol extension for A2UI is designed to be transparent to developers. When you use A2A protocol for agent communication, the A2A protocol extension automatically handles all A2UI message formatting and transmission. This makes A2A protocol the ideal transport for A2UI applications.

Setting Up A2A Protocol with A2UI

When using A2A protocol, you need to:

A2A protocol setup for A2UI is straightforward because the A2A protocol extension handles most of the complexity. Developers using A2A protocol with A2UI benefit from automatic message handling, security, and authentication provided by the A2A protocol.

Client Capabilities in A2A Protocol

In every A2A message sent to the server (as part of the metadata), include an a2uiClientCapabilities object:

This tells the agent which A2UI component catalogs your client supports, enabling the agent to generate appropriate A2UI messages. The A2A protocol metadata system makes it easy to communicate A2UI capabilities to agents using A2A protocol for communication.

How A2A protocol handles A2UI capabilities:

✅ Best Practice

Always include a2uiClientCapabilities in your A2A protocol messages. This ensures agents know what A2UI components are available and can generate appropriate interfaces.

Creating Custom Components

Why Custom Catalogs?

The A2UI Standard Catalog provides common UI elements (buttons, text fields, etc.), but your application might need specialized components:

Custom catalogs are collections of components that can include:

You register entire catalogs with your client application, not individual components. This allows agents and clients to agree on a shared, extended set of components while maintaining security and type safety.

How Custom Catalogs Work

Defining Custom Catalogs

Web (Lit / Angular):

Flutter:

See working examples:

Agent-Side: Using Components from a Custom Catalog

Once a catalog is registered on the client, agents can use components from it in surfaceUpdate messages for A2UI applications. The agent specifies which catalog to use via the catalogId in the beginRendering message. When agents use A2A protocol for communication, the A2A protocol extension automatically validates that the A2UI catalog ID is supported by the client. The A2A protocol ensures that A2UI messages reference valid custom catalogs, and the A2A protocol extension handles catalog resolution for A2UI components.

Data Binding and Actions

Custom components support the same data binding and action mechanisms as standard A2UI components:

Security Considerations

When creating custom catalogs and components:

Theming and Styling A2UI Applications

The A2UI Styling Philosophy

A2UI follows a client-controlled styling approach:

This ensures:

Styling Layers

A2UI styling works in layers:

Layer 1: Semantic Hints

Agents provide semantic hints (not visual styles) to guide client rendering:

Common usageHint values:

The client renderer maps these semantic hints to actual visual styles based on your theme and design system.

Layer 2: Theme Configuration

Each renderer provides a way to configure your design system globally, including:

See working examples:

Layer 3: Component Overrides

Beyond global theming, you can override styles for specific components:

Web renderers:

Flutter:

Common Styling Features

Dark Mode:

Responsive Design:

Custom Fonts:

Best Practices

Best Practices for A2UI Development

1. Component Design

✅ Do:

❌ Don't:

2. Data Binding

✅ Do:

❌ Don't:

3. Message Streaming

✅ Do:

❌ Don't:

4. Error Handling

✅ Do:

❌ Don't:

5. Performance Optimization

✅ Do:

❌ Don't:

6. A2A Protocol Integration

✅ Do:

❌ Don't:

Common Questions About A2UI and A2A Protocol

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: What is A2A protocol and how does it relate to A2UI?

A: A2A protocol (Agent to Agent) is a secure, standardized protocol for agent communication. The A2A protocol includes an extension that provides easy integration with A2UI. When you use A2A protocol for agent communication, A2UI support is nearly automatic. The A2A protocol handles secure transport, authentication, and A2UIA2UIA2UIon/deserialization. The A2A protocol extension makes A2UI integration seamA2UIly handliA2UI2UI message formatting within A2A protocol messages. When developers choose A2A protocol for their agent infrastructure, they automatically get A2UI support through the A2A protocol exA2UIA2UIA2A protocol the recommended transport for A2UI applications in enterprise environments.A2UIA2UIA2UIA2UI

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 A2UI components. Custom A2UI components maintain security by being part of the client's trusted catalog. When using A2A protocol with A2UI, the A2A protocol extension automatically handles custom A2UI component catalog announcements. The A2A protocol ensures that agents know which custom A2UI components are available through A2A protocol metadata.

Q: How does A2UI handle real-time updates?

A: A2UI protocol uses data binding with JSON Pointer paths. When application state changes via dataModelUpdate in A2UI messages, components bound to those paths automatically update without requiring component regeneration. This reactive binding enables efficient real-time updates in A2UI applications. When using A2A protocol with A2UI, the A2A protocol extension ensures that A2UI data model updates are transmitted efficiently. The A2A protocol supports streaming A2UI messages, enabling real-time UI updates through A2A protocol transport.

Q: What transport protocols does A2UI support?

A: A2UI messages can travel over any transport protocol:

For enterprise A2UI deployments, A2A protocol is highly recommended because the A2A protocol provides built-in security, authentication, and A2UI message handling. The A2A protocol extension ensures that all A2UI messages are properly formatted and transmitted securely.

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. The A2A protocol is also open source and works seamlessly with A2UI. When you use A2A protocol with A2UI, you benefit from both open-source protocols. The A2A protocol extension for A2UI is part of the A2A protocol specification, ensuring compatibility between A2UI and A2A protocol.

Q: How does Google use A2UI?

A: Google uses A2UI in production systems including:

Q: Can I use A2UI with existing React applications?

A: Yes, in two ways:

When building React applications with A2UI, you can use A2A protocol for secure agent communication. The A2A protocol extension ensures that A2UI messages work seamlessly in React applications using A2A protocol transport.

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. A2UI components are identified by simple IDs, errors are easy to correct, and the A2UI format supports streaming for progressive rendering. When using A2A protocol with A2UI, the A2A protocol extension supports streaming A2UI messages, enabling LLMs to generate A2UI interfaces progressively. The A2A protocol ensures that A2UI messages can be streamed efficiently, making A2UI even more LLM-friendly when combined with A2A protocol.

Q: Do I need to use A2A protocol with A2UI?

A: No, A2UI is transport-agnostic and works with any transport mechanism. However, A2A protocol provides the most robust solution for multi-agent systems with built-in security, authentication, and A2UI support. For enterprise meshes and cross-trust-boundary communication, A2A protocol is highly recommended. The A2A protocol extension makes A2UI integration seamless, and A2A protocol provides enterprise-grade security for A2UI message transmission. When building production A2UI applications, A2A protocol is the recommended transport mechanism.

Q: How does A2A protocol enhance A2UI security?

A: A2A protocol provides multiple layers of security for A2UI applications. The A2A protocol includes built-in authentication and authorization mechanisms that protect A2UI message transmission. A2A protocol also provides message integrity verification, ensuring that A2UI messages are not tampered with during transmission. When using A2A protocol with A2UI, developers benefit from enterprise-grade security without additional configuration. The A2A protocol extension for A2UI automatically applies security best practices to all A2UI message exchanges.

Conclusion and Next Steps

A2UI protocol and A2A protocol together provide a powerful foundation for building secure, interoperable agent-driven applications. The A2UI protocol enables agents to generate rich, interactive UIs that render natively across platforms, while A2A protocol provides secure, standardized communication for multi-agent systems. When developers combine A2UI protocol with A2A protocol, they get a complete solution for agent-driven UI generation. The A2A protocol extension makes A2UI protocol integration seamless, and A2A protocol provides enterprise-grade security for A2UI protocol message transmission. This combination of A2UI protocol and A2A protocol is the recommended approach for production agent applications.

Key Advantages of A2UI and A2A Protocol

Getting Started

For Frontend Developers:

For Agent Developers:

For Platform Builders:

Resources

The Future of A2UI and A2A Protocol

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, while A2A protocol provides the secure communication layer for multi-agent systems. Together, A2UI and A2A protocol enable a new generation of applications where AI agents seamlessly generate rich, interactive UIs that feel native to every platform. The A2A protocol extension ensures that A2UI will continue to work seamlessly with A2A protocol as both protocols evolve. The combination of A2UI protocol and A2A protocol represents the future of secure, interoperable agent-driven applications.

Whether you're building the next generation of AI-powered applications, integrating agents into existing platforms, or creating new agent orchestration systems, A2UI and A2A protocol provide the protocol, tools, and community to make agent-driven UI a reality. The A2A protocol extension makes A2UI integration automatic, and A2A protocol provides the enterprise-grade infrastructure that A2UI applications require. When you choose A2UI and A2A protocol, you're choosing the future of agent-driven interfaces.

Ready to build with A2UI and A2A Protocol? 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. When you combine A2UI with A2A protocol, you get enterprise-grade security and seamless integration. The A2A protocol extension makes A2UI integration automatic, and A2A protocol provides the secure transport layer that A2UI applications need. Join the A2UI and A2A protocol communities and start building the next generation of agent-driven applications today.

Related Articles

Explore more content related to this topic

A2UI Introduction - Declarative UI Protocol for Agent-Driven Interfaces

Discover A2UI, the declarative UI protocol that enables AI agents to generate rich, interactive user interfaces. Learn how A2UI works, who it's for, how to use it, and see real-world examples from Google Opal, Gemini Enterprise, and Flutter GenUI SDK.

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

A comprehensive guide to A2UI (Agent to UI), a declarative UI protocol for agent-driven interfaces. Learn how AI agents generate rich, interactive UIs that render natively across platforms without executing arbitrary code.

The A2UI Protocol: A 2026 Complete Guide to Agent-Driven Interfaces

Discover A2UI, the security-first declarative UI protocol that enables AI agents to generate rich, interactive user interfaces. Learn how A2UI solves the 'Chat Wall' problem, achieves security through data vs. code separation, and enables dynamic cross-platform interfaces. Includes real-world examples and implementation guidance.

Building an A2A Currency Agent with LangGraph

This guide provides a detailed explanation of how to build an A2A-compliant agent using LangGraph and the Google Gemini model. We'll walk through the Currency Agent example from the A2A Python SDK, explaining each component, the flow of data, and how the A2A protocol facilitates agent interactions.

Agent Gateway Protocol (AGP): Practical Tutorial and Specification

Learn the Agent Gateway Protocol (AGP): what it is, problems it solves, core spec (capability announcements, intent payloads, routing and error codes), routing algorithm, and how to run a working simulation.

Table of Contents

An open protocol for agent interoperability, enabling seamless collaboration between AI agents across platforms.

Protocol

Resources

About

© 2025 A2A Protocol. All rights reserved.