代理驱动界面的协议

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 分钟快速入门

• 快速入门指南

  ---

  运行餐厅查找演示，查看由 Gemini 驱动的代理中的 A2UI 实际效果。

  开始使用

• 核心概念

  ---

  了解表面 (surfaces)、组件 (components)、数据绑定 (data binding) 和邻接表模型 (adjacency list model)。

  学习概念

• 开发者指南

  ---

  将 A2UI 渲染器集成到您的应用中或构建生成 UI 的代理。

  开始构建

• 协议参考

  ---

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

  阅读规范

工作原理

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

A2UI 实战

景观设计师演示

观看代理为景观设计师应用程序生成所有界面。用户上传照片；代理使用 Gemini 理解照片并生成满足景观需求的自定义表单。

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

观看代理选择响应图表组件来回答数字摘要问题。然后代理选择 Google 地图组件来回答位置问题。这两者都是客户端提供的自定义组件。

A2UI 编辑器

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