A2UI 介绍

A2UI (Agent to UI) 是一个面向代理驱动界面的声明式 UI 协议。 AI 代理生成丰富的交互式 UI，这些 UI 可以在多个平台（Web、移动、桌面）上原生渲染，而无需执行任意代码。

什么是 A2UI？

问题

纯文本的代理交互效率低下：

用户："明天晚上 7 点预订一张 2 人桌"
代理："好的，是哪一天？"
用户："明天"
代理："什么时间？"
...

更好的方式： 代理生成一个包含日期选择器、时间选择器和提交按钮的表单。用户与 UI 交互，而不是文本。

挑战

在多代理系统中，代理通常在远程运行（不同的服务器、组织）。它们无法直接操作您的 UI——它们必须发送消息。

传统方法： 在 iframe 中发送 HTML/JavaScript

笨重，视觉上不连贯
安全复杂性
不匹配应用样式

需求： 传输像数据一样安全、像代码一样表达力强的 UI。

解决方案

A2UI：描述 UI 的 JSON 消息，具有以下特点：

LLM 作为结构化输出生成
通过任何传输方式传输（A2A、AG UI、SSE、WebSockets）
客户端使用自己的原生组件渲染

结果： 客户端控制安全性和样式，代理生成的 UI 感觉原生。

示例

{"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-text", "component": {"Text": {"text": {"literalString": "Confirm"}}}},
  {"id": "submit-btn", "component": {"Button": {"child": "submit-text", "action": {"name": "confirm_booking"}}}}
]}}

{"dataModelUpdate": {"surfaceId": "booking", "contents": [
  {"key": "booking", "valueMap": [{"key": "date", "valueString": "2025-12-16T19:00:00Z"}]}
]}}

{"beginRendering": {"surfaceId": "booking", "root": "title"}}

客户端将这些消息渲染为原生组件（Angular、Flutter、React 等）。

核心价值

1. 安全性： 声明式数据，而非代码。代理从客户端的受信任目录请求组件。没有代码执行风险。

2. 原生感觉： 无需 iframe。客户端使用自己的 UI 框架渲染。继承应用样式、可访问性和性能。

3. 可移植性： 一个代理响应可在任何地方工作。相同的 JSON 可在 Web（Lit/Angular/React）、移动（Flutter/SwiftUI/Jetpack Compose）、桌面上渲染。

设计原则

1. 对 LLM 友好： 带有 ID 引用的扁平组件列表。易于增量生成、纠正错误、流式传输。

2. 框架无关： 代理发送抽象组件树。客户端映射到原生小部件（Web/移动/桌面）。

3. 关注点分离： 三层——UI 结构、应用状态、客户端渲染。支持数据绑定、响应式更新、清晰的架构。

A2UI 不是什么

不是框架（它是一个协议）
不是 HTML 的替代品（用于代理生成的 UI，而非静态网站）
不是强大的样式系统（客户端控制样式，服务器端样式支持有限）
不限于 Web（可在移动和桌面上工作）

核心概念

Surface（表面）： 组件的画布（对话框、侧边栏、主视图）
Component（组件）： UI 元素（Button、TextField、Card 等）
Data Model（数据模型）： 应用状态，组件绑定到它
Catalog（目录）： 可用的组件类型
Message（消息）： JSON 对象（surfaceUpdate、dataModelUpdate、beginRendering 等）

A2UI 适合谁？

构建具有丰富交互式 UI 的 AI 代理的开发者。

三类受众

1. 宿主应用开发者（前端）

构建多代理平台、企业助手或跨平台应用，其中代理生成 UI。

为什么选择 A2UI：

品牌控制：客户端拥有样式和设计系统
多代理：支持本地、远程和第三方代理
安全：声明式数据，无代码执行
跨平台：Web、移动、桌面
可互操作：开源，相同规范，多个渲染器

2. 代理开发者（后端/AI）

构建生成表单、仪表板和交互式工作流的代理。

为什么选择 A2UI：

对 LLM 友好：扁平结构，易于增量生成
丰富的交互：超越文本（表单、表格、可视化）
生成而非工具：UI 作为代理生成输出的一部分
可移植：一个代理响应可在所有 A2UI 客户端上工作
可流式传输：生成时渐进式渲染

3. 平台构建者（SDK 创建者）

构建代理编排平台、框架或 UI 集成。

您是否将远程代理引入您的应用？

您是否将代理部署到您不一定控制的其他应用中？

为什么选择 A2UI：

标准协议：与 A2A 和其他传输方式可互操作
可扩展：自定义组件目录
开源（Apache 2.0）

何时使用 A2UI

✅ 代理生成的 UI - 核心用途 ✅ 多代理系统 - 跨信任边界的标准协议 ✅ 跨平台应用 - 一个代理，多个渲染器（Web/移动/桌面） ✅ 安全关键 - 声明式数据，无代码执行 ✅ 品牌一致性 - 客户端控制样式

❌ 静态网站 - 使用 HTML/CSS ❌ 简单的纯文本聊天 - 使用 Markdown ❌ 未与客户端集成的远程小部件 - 使用 iframe，如 MCP Apps ❌ 快速 UI + 代理应用一起构建 - 使用 AG UI / CopilotKit

如何使用 A2UI？

选择符合您角色和用例的集成路径。

三种路径

路径 1：构建宿主应用（前端）

将 A2UI 渲染集成到现有应用中，或构建新的代理驱动前端。

选择渲染器：

Web： Lit、Angular
移动/桌面： Flutter GenUI SDK
React： 2026 年第一季度推出

快速设置：

如果使用 Angular 应用，我们可以添加 Angular 渲染器：

npm install @a2ui/angular

连接到代理消息（SSE、WebSockets 或 A2A），并自定义样式以匹配您的品牌。

路径 2：构建代理（后端）

创建一个为任何兼容客户端生成 A2UI 响应的代理。

选择您的框架：

Python： Google ADK、LangChain、自定义
Node.js： A2A SDK、Vercel AI SDK、自定义

在 LLM 提示中包含 A2UI 模式，生成 JSONL 消息，并通过 SSE、WebSockets 或 A2A 流式传输到客户端。

路径 3：使用现有框架

通过内置支持的框架使用 A2UI：

AG UI / CopilotKit - 具有 A2UI 渲染的全栈 React 框架
Flutter GenUI SDK - 跨平台生成式 UI（内部使用 A2UI）

A2UI 在哪里使用？

A2UI 正在被 Google 和合作伙伴组织的团队采用，以构建下一代代理驱动应用。以下是一些 A2UI 产生影响的真实案例。

生产部署

Google Opal：面向所有人的 AI 迷你应用

Opal 使数十万人能够使用自然语言构建、编辑和分享 AI 迷你应用——无需编码。

Opal 如何使用 A2UI：

Google 的 Opal 团队从一开始就是 A2UI 的核心贡献者。他们使用 A2UI 为动态生成式 UI 系统提供动力，使 Opal 的 AI 迷你应用成为可能。

快速原型设计：快速构建和测试新的 UI 模式
用户生成的应用：任何人都可以创建具有自定义 UI 的应用
动态界面：UI 自动适应每个用例

"A2UI 是我们工作的基础。它让我们能够灵活地让 AI 以新颖的方式驱动用户体验，而不受固定前端的限制。其声明式特性和对安全性的关注使我们能够快速安全地进行实验。"

— Dimitri Glazkov，Opal 团队首席工程师

Gemini Enterprise：面向企业的自定义代理

Gemini Enterprise 使企业能够构建强大的自定义 AI 代理，以适应其特定的工作流和数据。

Gemini Enterprise 如何使用 A2UI：

A2UI 正在集成，以允许企业代理在业务应用中渲染丰富的交互式 UI——超越简单的文本响应，引导员工完成复杂的工作流。

数据录入表单：用于结构化数据收集的 AI 生成表单
审批仪表板：用于审查和审批流程的动态 UI
工作流自动化：用于复杂任务的逐步界面
自定义企业 UI：针对行业特定需求的定制界面

"我们的客户需要他们的代理不仅仅是回答问题；他们需要代理引导员工完成复杂的工作流。A2UI 将允许在 Gemini Enterprise 上构建的开发者让他们的代理生成任何任务所需的动态自定义 UI，从数据录入表单到审批仪表板，大大加速工作流自动化。"

— Fred Jabbour，Gemini Enterprise 产品经理

Flutter GenUI SDK：移动端生成式 UI

Flutter GenUI SDK 将动态的 AI 生成 UI 带到 Flutter 应用中，覆盖移动、桌面和 Web。

GenUI 如何使用 A2UI：

GenUI SDK 使用 A2UI 作为底层协议，用于服务器端代理和 Flutter 应用之间的通信。当您使用 GenUI 时，您实际上是在使用 A2UI。

跨平台支持：同一个代理可在 iOS、Android、Web、桌面上工作
原生性能：Flutter 小部件在每个平台上原生渲染
品牌一致性：UI 匹配您应用的设计系统
服务器驱动 UI：代理控制显示内容，无需应用更新

"我们的开发者选择 Flutter，因为它让他们能够快速创建富有表现力、品牌丰富的自定义设计系统，在每个平台上都感觉很好。A2UI 非常适合 Flutter 的 GenUI SDK，因为它确保每个用户、在每个平台上都能获得高质量的原生体验。"

— Vijay Menon，Dart & Flutter 工程总监

合作伙伴集成

AG UI / CopilotKit：全栈代理框架

AG UI 和 CopilotKit 提供了一个全面的框架来构建代理应用，具有零日 A2UI 兼容性。

它们如何协同工作：

AG UI 擅长在自定义前端和其专用代理之间创建高带宽连接。通过添加 A2UI 支持，开发者可以获得两全其美的效果：

状态同步：AG UI 处理应用状态和聊天历史
A2UI 渲染：渲染来自第三方代理的动态 UI
多代理支持：协调来自多个代理的 UI
React 集成：与 React 应用无缝集成

"AG UI 擅长在自定义构建的前端和其专用代理之间创建高带宽连接。通过添加 A2UI 支持，我们为开发者提供了两全其美的效果。他们现在可以构建丰富的、状态同步的应用，同时也可以通过 A2UI 渲染来自第三方代理的动态 UI。这对于多代理世界来说是完美的匹配。"

— Atai Barkai，CopilotKit 和 AG UI 创始人

Google 的 AI 驱动产品

随着 Google 在整个公司采用 AI，A2UI 提供了一种标准化的方式，让 AI 代理交换用户界面，而不仅仅是文本。

内部代理采用：

多代理工作流：多个代理贡献到同一个表面
远程代理支持：在不同服务上运行的代理可以提供 UI
标准化：跨团队的通用协议减少了集成开销
外部暴露：内部代理可以轻松暴露给外部（例如，Gemini Enterprise）

"就像 A2A 让任何代理无论平台如何都能相互对话一样，A2UI 标准化了用户界面层，并通过编排器支持远程代理用例。这对内部团队来说非常强大，使他们能够快速开发代理，其中丰富的用户界面是常态，而不是例外。随着 Google 进一步推进生成式 UI，A2UI 为服务器驱动的 UI 提供了一个完美的平台，可以在任何客户端上渲染。"

— James Wren，AI Powered Google 高级工程师

社区项目

A2UI 社区正在构建令人兴奋的项目：

开源示例

餐厅查找器
- 带有动态表单的餐桌预订
- Gemini 驱动的代理
- 提供完整源代码
联系人查找
- 带有结果列表的搜索界面
- A2A 代理示例
- 演示数据绑定
组件库
- 所有组件的交互式展示
- 带有代码的实时示例
- 非常适合学习

A2UI 在代理生态系统中的位置

代理式 UI 领域正在快速发展，优秀的工具不断涌现以解决堆栈的不同部分。A2UI 不是这些框架的替代品——它是一个专门的协议，解决了可互操作、跨平台、生成式或基于模板的 UI 响应这一特定问题。

概览

A2UI 的方法是将 JSON 作为消息发送给客户端，然后客户端使用渲染器将其转换为原生 UI 组件。LLM 可以动态生成组件布局，或者您可以使用模板。

!!! tip "" 这使得它像数据一样安全，像代码一样富有表达力。

导航代理式 UI 生态系统

1. 构建"宿主"应用 UI

如果您正在构建全栈应用（用户与之交互的"宿主"UI），除了构建实际的 UI 之外，您还可以利用框架（AG UI / CopilotKit、Vercel AI SDK、Flutter 的 GenUI SDK，它已经在底层使用 A2UI）来处理"管道"：状态同步、聊天历史和输入处理。

A2UI 的定位： A2UI 是互补的。如果您使用 AG UI 连接宿主应用，它可以使用 A2UI 作为数据格式来渲染来自宿主代理以及第三方或远程代理的响应。这为您提供了两全其美的效果：一个丰富的、有状态的宿主应用，可以安全地渲染来自它不控制的外部代理的内容。

A2UI 与 A2A： 您可以通过 A2A 直接发送到客户端前端。
A2UI 与 AG UI： 您可以通过 AG UI 直接发送到客户端前端。
A2UI 与 REST、SSE、WebSockets 和其他传输方式的集成是可行的，但尚未可用。

2. UI 作为"资源"（MCP Apps）

模型上下文协议 (MCP) 最近引入了 MCP Apps，这是一个新标准，整合了来自 MCP-UI 和 OpenAI 的优秀工作，使服务器能够提供交互式界面。这种方法将 UI 视为资源（通过 ui:// URI 访问），工具可以返回该资源，通常在沙盒化的 iframe 中渲染预构建的 HTML 内容，以确保隔离和安全性。

A2UI 的不同之处： A2UI 采用"原生优先"的方法，这与 MCP Apps 的资源获取模型不同。A2UI 代理不是检索要在沙盒中显示的不透明负载，而是发送原生组件的蓝图。这允许 UI 完美继承宿主应用的样式和可访问性功能。在多代理系统中，编排代理可以轻松理解来自子代理的轻量级 A2UI 消息内容，从而实现代理之间更流畅的协作。

3. 平台特定生态系统（OpenAI ChatKit）

像 ChatKit 这样的工具提供了高度集成、优化的体验，专门用于在 OpenAI 生态系统内部署代理。

A2UI 的不同之处： A2UI 专为在 Web、Flutter 和原生移动端构建自己的代理表面的开发者设计，或为需要跨信任边界通信的企业网格（如 A2A）设计。A2UI 给客户端更多的样式控制权，以代理为代价，以便与宿主客户端应用实现更大的视觉一致性。

A2UI 介绍 - 面向代理驱动界面的声明式 UI 协议

A2UI 介绍

什么是 A2UI？

问题

挑战

解决方案

示例

核心价值

设计原则

A2UI 不是什么

核心概念

A2UI 适合谁？

三类受众

1. 宿主应用开发者（前端）

2. 代理开发者（后端/AI）

3. 平台构建者（SDK 创建者）

何时使用 A2UI

如何使用 A2UI？

三种路径

路径 1：构建宿主应用（前端）

路径 2：构建代理（后端）

路径 3：使用现有框架

A2UI 在哪里使用？

生产部署

Google Opal：面向所有人的 AI 迷你应用

Gemini Enterprise：面向企业的自定义代理

Flutter GenUI SDK：移动端生成式 UI

合作伙伴集成

AG UI / CopilotKit：全栈代理框架

Google 的 AI 驱动产品

社区项目

开源示例

A2UI 在代理生态系统中的位置

概览

导航代理式 UI 生态系统

1. 构建"宿主"应用 UI

2. UI 作为"资源"（MCP Apps）

3. 平台特定生态系统（OpenAI ChatKit）