A2UI 中文文档 - 智能体驱动界面设计的声明式 UI 协议

A2UI 使 AI 智能体能够生成丰富的交互式用户界面，这些界面可以在 Web、移动端和桌面端原生渲染——无需执行任意代码。

⚠️ 状态：早期公开预览

A2UI 目前处于 v0.8（公开预览） 阶段。规范和实现是功能性的，但仍在不断演进中。我们开放此项目以促进协作、收集反馈并征求贡献（例如，客户端渲染器）。预期会有变化。

概览

A2UI 目前是 v0.8，Apache 2.0 许可证，由 Google 创建，CopilotKit 和开源社区贡献，并在 GitHub 上积极开发中。

A2UI 解决的问题是：AI 智能体如何安全地跨信任边界发送丰富的 UI？

与纯文本响应或有风险的代码执行不同，A2UI 让智能体发送声明式组件描述，客户端使用自己的原生组件进行渲染。这就像让智能体说一种通用的 UI 语言。

在此仓库中，你将找到 A2UI 规范以及实现，包括客户端的渲染器（例如：Angular、Flutter 等），以及在智能体和客户端之间传递 A2UI 消息的传输层（例如：A2A 等）。

• 安全设计

  ---

  声明式数据格式，而非可执行代码。智能体只能使用你目录中预先批准的组件——没有 UI 注入攻击。

• 对 LLM 友好

  ---

  扁平的流式 JSON 结构，易于生成。LLM 可以增量构建 UI，无需一次性生成完美的 JSON。

• 框架无关

  ---

  一个智能体响应可在任何地方工作。使用你自己的样式组件在 Angular、Flutter、React 或原生移动端渲染相同的 UI。

• 渐进式渲染

  ---

  在生成时流式传输 UI 更新。用户实时看到界面构建，而不是等待完整响应。

5 分钟快速开始

• 快速开始指南

  ---

  运行餐厅查找器演示，亲眼看到 A2UI 与 Gemini 驱动的智能体的实际效果。

  开始使用

• 核心概念

  ---

  理解界面、组件、数据绑定和邻接列表模型。

  学习概念

• 开发者指南

  ---

  将 A2UI 渲染器集成到你的应用中，或构建生成 UI 的智能体。

  开始构建

• 协议参考

  ---

  深入了解完整的技术规范和消息类型。

  阅读规范

工作原理

1. 用户向 AI 智能体发送消息
2. 智能体生成 A2UI 消息，描述 UI（结构 + 数据）
3. 消息流式传输到客户端应用
4. 客户端使用原生组件渲染（Angular、Flutter、React 等）
5. 用户与 UI 交互，将操作发送回智能体
6. 智能体响应，返回更新的 A2UI 消息

A2UI 实际演示

景观设计师演示

观看智能体为景观设计师应用生成所有界面。用户上传照片；智能体使用 Gemini 理解它并生成用于景观需求的自定义表单。

自定义组件：交互式图表和地图

观看智能体选择使用图表组件来回答数值汇总问题。然后智能体选择 Google 地图组件来回答位置问题。两者都是客户端提供的自定义组件。

A2UI Composer

CopilotKit 有一个公开的 A2UI Widget Builder 可以尝试。