什么是 A2UI？¶

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

问题¶

纯文本的 Agent 交互效率低下：

User: "预订明天晚上 7 点的两人桌"
Agent: "好的，哪一天？"
User: "明天"
Agent: "几点？"
...

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

挑战¶

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

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

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

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

解决方案¶

A2UI：描述 UI 的 JSON 消息：

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

结果： 客户端控制安全性和样式，Agent 生成的 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. 安全性： 声明式数据，而非代码。Agent 从客户端受信任的目录请求组件。无代码执行风险。

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

3. 可移植性： 一个 Agent 响应适用于任何地方。相同的 JSON 可以在 Web (Lit/Angular/React)、移动端 (Flutter/SwiftUI/Jetpack Compose)、桌面端渲染。

设计原则¶

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

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

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

A2UI 不是什么¶

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

关键概念¶

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

有关类似项目的比较，请参阅 Agent UI 生态系统。