2025年12月，Google 悄然开源了一个名为 A2UI（Agent to UI）的项目，这标志着 AI Agent 交互从”文本对话”向”动态界面”的重大跃迁。本文将深度解析 A2UI 协议的设计理念、核心架构和实际应用。

一、A2UI 是什么？

A2UI（Agent to UI）是一种声明式 UI 协议，专门用于 Agent 驱动的界面。它让 AI Agent 能够生成丰富、交互式的用户界面，并通过客户端原生组件渲染，无需执行任意代码。

核心问题：文本交互的局限性

传统 AI Agent 交互基本是纯文本对话：

用户："我想订个桌子"
AI："什么时间？"
用户："明天晚上"
AI："几点？"
用户："7点"
AI："几个人？"
...

这种一来一回的文本交互效率低下，用户体验较差。理想的情况是：Agent 直接生成一个完整的订位表单——包含日期选择器、时间选择器、人数输入框等，用户点几下就能完成预订。

A2UI 的解决方案

A2UI 采用声明式 JSON 格式描述 UI，客户端用原生组件渲染：

{
  "surfaceUpdate": {
    "surfaceId": "booking",
    "components": [
      {
        "id": "title",
        "component": {
          "Text": {
            "text": {"literalString": "预订餐桌"},
            "usageHint": "h1"
          }
        }
      },
      {
        "id": "datetime",
        "component": {
          "DateTimeInput": {
            "value": {"path": "/booking/date"},
            "enableDate": true
          }
        }
      },
      {
        "id": "submit-btn",
        "component": {
          "Button": {
            "action": {"name": "confirm_booking"}
          }
        }
      }
    ]
  }
}

客户端收到这个 JSON 后，用自己的 Angular、Flutter 或 React 组件渲染对应的界面。

二、核心价值与设计原则

1. 安全第一：声明式数据，非可执行代码

传统方案让 Agent 生成 HTML/JavaScript 代码并执行，存在严重安全隐患：

• 代码注入风险：恶意 Agent 可能注入危险脚本
• XSS 攻击：未经处理的用户输入导致跨站脚本攻击
• 权限失控：Agent 可能访问不该访问的 API

A2UI 采用声明式数据格式，Agent 只能请求客户端预先定义好的组件类型（如 Button、TextField），不能执行任意代码。客户端维护一个”组件目录”（Catalog），只有预先批准的组件才能被渲染。

2. 原生体验：无 iframe，完美融入应用

传统方案使用 iframe 嵌入第三方 UI，存在以下问题：

• 视觉割裂：iframe 内的样式与宿主应用不一致
• 性能问题：iframe 加载和渲染较慢
• 无障碍支持差：iframe 内的内容难以被屏幕阅读器访问

A2UI 让客户端用原生组件渲染 Agent 生成的 UI，完美继承应用的样式系统、无障碍功能和性能特性。

3. 跨平台兼容：一次描述，到处运行

同一份 A2UI JSON 可以在多个平台渲染：

• Web：Lit、Angular、React（计划中）
• 移动端：Flutter、SwiftUI、Jetpack Compose
• 桌面端：Flutter Desktop、Electron

每个平台用自己的原生组件实现，保证最佳用户体验。

4. LLM 友好：扁平结构，易于增量生成

A2UI 采用邻接表模型描述 UI 结构：

• 组件以扁平列表组织，通过 ID 引用关联
• LLM 可以逐步生成 UI，不需要一次性生成完美 JSON
• 支持增量更新：对话过程中 UI 可以动态调整

这种设计对 LLM 非常友好，降低了生成复杂 UI 的难度。

三、A2UI 的三大核心概念

1. Surface（画布）

Surface 是承载组件的容器，类似画布。可以是：

• Dialog：弹窗对话框
• Sidebar：侧边栏
• Main View：主视图区域

一个应用可以有多个 Surface，每个 Surface 独立管理自己的组件和状态。

2. Component（组件）

Component 是 UI 元素的基本单元，包括：

• 基础组件：Text、Button、TextField、Image
• 表单组件：DateTimeInput、Slider、Checkbox、RadioGroup
• 布局组件：Card、List、Table、Grid
• 高级组件：Chart、Map、Visualization

每个组件都有唯一的 ID，用于数据绑定和事件处理。

3. Data Model（数据模型）

Data Model 是应用状态的集中管理，组件可以绑定到数据模型。数据变化时，绑定的组件会自动更新（响应式）。

四、A2UI 适用场景

✅ 适合使用 A2UI 的场景

1. Agent 生成的 UI（核心用途）
   • 动态表单生成（如预订、申请、审批）
   • 数据可视化（图表、仪表盘）
   • 交互式工作流（多步骤任务引导）
2. 多 Agent 系统
   • 多个 Agent 协同工作，需要统一的 UI 协议
   • 远程 Agent 跨信任边界提供 UI
3. 跨平台应用
   • 一个 Agent，多个客户端（Web、移动、桌面）
   • 需要保持品牌一致性
4. 安全关键场景
   • 金融、医疗等对安全性要求高的领域
   • 需要严格控制 Agent 能力的场景

❌ 不适合使用 A2UI 的场景

1. 静态网站：使用传统 HTML/CSS 更合适
2. 纯文本聊天：使用 Markdown 即可
3. 快速原型开发：使用 AG UI / CopilotKit 等全栈框架更高效
4. 远程独立 Widget：使用 MCP Apps 或 iframe

五、实际应用案例

1. Google Opal：AI 小程序平台

Opal 是 Google 内部的 AI 小程序平台，让数十万用户用自然语言创建、编辑和分享 AI 小程序。

Opal 如何使用 A2UI：

• Opal 团队是 A2UI 的核心贡献者
• 使用 A2UI 驱动动态、生成式 UI 系统
• 用户生成的每个小程序都有自定义 UI
• UI 根据用例自动适配

“A2UI 是我们工作的基石。它让 AI 能够以新颖的方式驱动用户体验，而不受固定前端的限制。其声明式本质和对安全的关注让我们能够快速、安全地实验。
— Dimitri Glazkov，Opal 团队首席工程师

2. Gemini Enterprise：企业级 AI 助手

Gemini Enterprise 让企业构建定制化 AI Agent，处理特定工作流和数据。

Gemini Enterprise 如何使用 A2UI：

• Agent 生成丰富、交互式 UI（超越纯文本）
• 数据录入表单：AI 生成表单收集结构化数据
• 审批仪表盘：动态 UI 用于审核和批准流程
• 工作流自动化：复杂任务的分步界面

3. Flutter GenUI SDK：跨平台生成式 UI

Flutter GenUI SDK 将动态、AI 生成的 UI 带到 Flutter 应用（移动、桌面、Web）。

GenUI 如何使用 A2UI：

• 使用 A2UI 作为底层协议
• 服务器 Agent 和 Flutter 应用之间的通信
• 同一 Agent 在 iOS、Android、Web、桌面原生渲染

4. AG UI / CopilotKit：全栈 Agent 框架

AG UI 和 CopilotKit 提供构建 Agent 应用的综合框架，第一天就支持 A2UI。

如何协同工作：

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

六、如何使用 A2UI？

Path 1：构建宿主应用（前端开发者）

集成 A2UI 渲染到现有应用或构建新的 Agent 驱动前端。

选择渲染器：

• Web：Lit、Angular
• 移动/桌面：Flutter GenUI SDK
• React：2026 年 Q1 计划支持

Path 2：构建 Agent（后端开发者）

创建生成 A2UI 响应的 Agent，兼容任何客户端。

选择框架：

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

Path 3：使用现有框架

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

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

七、A2UI 在 Agent UI 生态中的定位

与 MCP Apps 的差异

MCP Apps：将 UI 视为资源处理

• Agent 返回 ui:// URI
• 客户端获取后在沙盒 iframe 中渲染预构建的 HTML

A2UI：采用”原生优先”方法

• Agent 发送原生组件的蓝图
• 客户端用自己的组件渲染
• UI 完美融入宿主应用的样式和无障碍功能

八、未来前景与挑战

当前状态

• 版本：v0.8（公开预览）
• 状态：规范和实现功能完整，仍在快速发展
• 开源协议：Apache 2.0

未来路线图

1. 规范稳定：v1.0 规范标准化
2. 更多渲染器：React、SwiftUI、Jetpack Compose
3. 更多传输协议：扩展兼容性
4. 性能优化：增量更新、流式渲染改进

九、总结

A2UI 代表了 AI Agent 交互的下一阶段：从”会聊天”到”会交互”。它不是要替代传统 UI 开发，而是为 Agent 驱动的动态界面提供了一个安全、跨平台、可互操作的协议标准。

核心优势可以概括为：

• 安全：声明式数据，无代码执行风险
• 原生：客户端控制样式和体验
• 跨平台：一次描述，到处运行
• LLM 友好：扁平结构，易于生成

随着 Google Opal、Gemini Enterprise、Flutter GenUI 等产品的实际应用，A2UI 正在成为生成式 UI 领域的重要标准。对于希望构建下一代 AI 应用的开发者来说，A2UI 值得深入研究和实践。