什么是 A2UI？¶

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

问题¶

纯文本智能体交互效率低下：

用户："明天晚上 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": "预订你的桌位"}, "usageHint": "h1"}}},
  {"id": "datetime", "component": {"DateTimeInput": {"value": {"path": "/booking/date"}, "enableDate": true}}},
  {"id": "submit-text", "component": {"Text": {"text": {"literalString": "确认"}}}},
  {"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 等）

有关类似项目的比较，请参见智能体 UI 生态系统。