A2UI：Agent 到用户界面（Agent-to-User Interface）
A2UI 是一个开源项目，包含一种专门优化的格式，用于表示 可更新的、由 Agent 生成的 UI，以及一组初始渲染器，使 Agent 能够生成或填充 丰富的用户界面。 ([GitHub][1])
⚠️ 状态：早期公开预览
注意：A2UI 当前版本为 v0.8（Public Preview）。 规范和实现已经可用，但仍在持续演进。
我们开放该项目是为了：
- 促进社区协作
- 收集反馈
- 吸引贡献（例如客户端渲染器）
未来版本可能会发生变化。
概述
生成式 AI 非常擅长生成 文本和代码，但 Agent 在向用户展示 丰富的交互界面 时往往比较困难，尤其是当这些 Agent：
- 运行在远程
- 跨越信任边界
- 与前端应用分离
A2UI 是一个开放标准和库集合，使 Agent 能够“说 UI”。
Agent 通过发送 声明式 JSON 格式 来描述 UI 的意图。 客户端应用随后使用自己的 原生组件库 来进行渲染，例如：
- Flutter
- Angular
- Lit
- 其他框架
这种方式使得：
- Agent 生成的 UI 像数据一样安全
- 同时 像代码一样强大和灵活。 ([GitHub][1])
高层设计理念
A2UI 的设计目标是解决 跨平台、可互操作的 Agent UI 问题。
核心理念包括：
1️⃣ 安全优先（Security First）
运行 LLM 生成的任意代码可能带来安全风险。
因此：
- A2UI 是 声明式数据格式
- 不是可执行代码
客户端应用维护一个 受信任的组件目录，例如：
- Card
- Button
- TextField
Agent 只能请求渲染这些 预先批准的组件。
2️⃣ 对 LLM 友好且可增量更新
UI 使用 组件平面列表 + ID 引用 表示。
优点：
- LLM 更容易生成
- 支持 渐进式 UI 渲染
- Agent 可以在对话过程中 逐步更新 UI
3️⃣ 框架无关、可移植
A2UI 将 UI 结构与 UI 实现分离。
Agent 发送：
- 组件树描述
- 数据模型
客户端负责将这些描述映射到 本地组件实现，例如：
- Web Components
- Flutter Widgets
- React Components
- SwiftUI Views
同一个 A2UI JSON：
可以在多个不同框架的客户端中渲染。
4️⃣ 灵活扩展
A2UI 提供 开放注册机制：
开发者可以将服务器类型映射到 自定义组件实现。
例如：
- 原生移动组件
- React 组件
- iframe 容器（用于旧系统）
通过 Smart Wrapper 可以：
- 连接现有 UI 组件
- 使用 A2UI 的数据绑定和事件系统
同时开发者可以：
- 实施安全沙箱策略
- 定义信任等级机制
使用场景
A2UI 适用于多种场景，例如：
动态数据收集
Agent 根据对话上下文生成 动态表单：
- 日期选择器
- 滑块
- 输入框
例如：预订特殊餐厅。
远程子 Agent
主 Agent 将任务委派给远程 Agent。
远程 Agent 返回 UI payload， 在主聊天界面中渲染。
自适应工作流
企业 Agent 根据用户请求生成：
- 审批面板
- 数据可视化
- 操作工作流
架构
A2UI 的核心思想是：
UI 的生成 与 UI 的执行分离
流程如下：
1️⃣ 生成（Generation）
Agent（例如使用 LLM）生成：
A2UI Response
即描述 UI 组件及其属性的 JSON。
2️⃣ 传输（Transport）
JSON 通过通信协议发送到客户端，例如：
- A2A
- AG-UI
3️⃣ 解析（Resolution）
客户端的 A2UI Renderer 解析 JSON。
4️⃣ 渲染（Rendering）
Renderer 将抽象组件映射到实际 UI 实现，例如：
type: "text-field"
对应：
- React input
- Flutter TextField
- Web component
依赖生态
A2UI 是一个 轻量级格式，但可以融入更大的 AI Agent 生态。
主要依赖包括：
传输协议
- A2A Protocol
- AG-UI
LLM
任何能够生成 JSON 的模型都可以使用。
主应用框架
需要一个宿主应用，例如：
- Web
- Flutter
快速开始
理解 A2UI 最好的方法是运行示例。
前置条件
需要：
- Node.js（Web 客户端）
- Python（Agent 示例）
- 有效的 Gemini API Key
运行 Restaurant Finder Demo
1️⃣ 克隆仓库
git clone https://github.com/google/A2UI.git
cd A2UI
2️⃣ 设置 API Key
export GEMINI_API_KEY="your_gemini_api_key"
3️⃣ 运行 Agent（后端）
cd samples/agent/adk/restaurant_finder
uv run .
4️⃣ 运行客户端（前端）
打开新的终端：
cd renderers/lit
npm install
npm run build
cd ../../samples/client/lit/shell
npm install
npm run dev
Roadmap
未来计划包括：
- 稳定规范并发布 v1.0
-
增加更多渲染器：
- React
- Jetpack Compose
- SwiftUI
-
支持更多传输协议：
- REST
-
集成更多 Agent 框架：
- Genkit
- LangGraph
贡献
A2UI 使用：
Apache 2.0 License
我们相信 未来的 UI 将是 Agent 驱动的，欢迎社区参与。
请查看：
CONTRIBUTING.md
了解贡献流程。
