什么是 A2UI？

A2UI (Agent to UI) 是采用 Apache 2.0 许可证的 Agent 驱动界面声明式协议。官方仓库将 v0.9.1 标记为当前生产版本，v1.0 仍是候选版。Agent 描述交互界面，客户端渲染批准的组件，而不是执行 Agent 生成的 UI 代码。

组件效果画廊 (Visual Output Gallery)

A2UI 允许安全、声明式的渲染各种交互式动态布局，从而彻底打破传统的纯文本对话体验。了解最新的规范进展，请访问官方的 a2ui-project/a2ui 仓库。

![A2UI 官方 UI 组件画廊](/assets/a2ui_gallery_examples.webp) *A2UI 组件卡片画廊预览，展示了灵活的动态排版能力。*

问题所在

仅基于文本的 Agent 交互效率低下：

用户: "帮我预订明天晚上 7 点的两人位"
Agent: "好的，请问是哪一天？"
用户: "明天"
Agent: "几点？"
...

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

挑战

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

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

笨重且视觉上不连贯。
安全性复杂。
无法匹配宿主应用的样式。

需求： 传输一种像数据一样安全，但像代码一样富有表现力的 UI。

解决方案

A2UI: 描述 UI 的 JSON 消息：

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

结果： 客户端控制安全性和样式，而 Agent 生成的 UI 感觉就像原生应用的一部分。

示例

{
  "version": "v0.9.1",
  "updateComponents": {
    "surfaceId": "booking",
    "components": [
      {
        "id": "root",
        "component": "Column",
        "children": ["title", "datetime", "submit-btn"]
      },
      {
        "id": "title",
        "component": "Text",
        "text": "预订餐桌",
        "variant": "h1"
      },
      {
        "id": "datetime",
        "component": "DateTimeInput",
        "label": "选择日期",
        "value": { "path": "/booking/date" },
        "enableDate": true
      },
      {
        "id": "submit-text",
        "component": "Text",
        "text": "确认"
      },
      {
        "id": "submit-btn",
        "component": "Button",
        "child": "submit-text",
        "action": { "event": { "name": "confirmBooking" } }
      }
    ]
  }
}

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

核心价值

受控渲染：载荷是声明式数据，而非可执行 UI 代码；客户端仍必须校验消息、Catalog、URL、富文本与 Action。
原生体验：客户端使用自己的 UI 框架渲染，并可应用现有设计系统与无障碍行为。
可移植性：兼容消息可发送给实现相同协议版本与 Catalog 的客户端；各平台的渲染器覆盖并不相同。
渐进式渲染 (Progressive Rendering)：实时流式传输 UI 更新。用户可以看到界面正在实时构建，而无需等待接收到完整的 Agent 响应。

设计原则

LLM 友好：带有 ID 引用的扁平组件列表。易于增量生成、纠正错误和流式传输。
框架无关：Agent 发送抽象组件树。客户端将其映射到原生控件（Web/移动/桌面）。
关注点分离：三层架构——UI 结构、应用程序状态、客户端渲染。支持数据绑定、响应式更新和清晰的架构。

A2UI 不是什么

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

关键概念

Surface (表面)：组件的画布（对话框、侧边栏、主视图）。
Component (组件)：UI 元素（按钮、文本框、卡片等）。
Data Model (数据模型)：应用程序状态，组件与之绑定。
Catalog (目录)：可用的组件类型。
Message (消息)：带版本的 JSON 对象；v0.9 使用 createSurface、updateComponents、updateDataModel 和 deleteSurface。