介绍 A2UI：一个面向代理驱动界面的开源项目

Source: Google Developers Blog

生成式 AI 在生成文本、图像和代码方面表现出色。现在，是时候让它用于生成上下文相关的 界面 了。今天我们公开了 A2UI 项目，以便与他人合作，完善这一早期阶段的格式和实现。A2UI 旨在解决来自代理的可互操作、跨平台、生成式或基于模板的 UI 响应的特定挑战。A2UI 允许代理生成最适合当前对话的界面，并将其发送到前端应用。我们已经在一些产品中构建了 A2UI，并希望与社区合作，帮助完善 A2UI 规范、添加更多传输方式以及更多客户端渲染器和集成。

A2UI 是一个开源项目，配备了针对可更新、代理生成的 UI 进行表示的优化格式以及一套初始渲染器。它允许代理生成或填充丰富的用户界面，这些界面可以在不同的宿主应用中展示，并由 Lit、Angular、Flutter 等多种 UI 框架渲染（后续还会支持更多）。渲染器支持一组通用组件和/或客户端声明的一组自定义组件，这些组件被组合成布局。客户端负责渲染，并可以将其无缝集成到自有的品牌化用户体验中。编排代理和远程 A2A 子代理都可以生成 UI 布局，这些布局以消息形式安全传递，而不是以可执行代码的形式。

下面展示了 A2UI 渲染的卡片示例，呈现了 A2UI 能实现的多种 UI 组合。

问题：代理需要 说 UI

想象一个帮助你预订餐厅座位的代理。仅使用文本交互可能会出现笨拙的来回：

用户： “预订两人桌。”
代理： “好的，哪天？”
用户： “明天。”
代理： “几点？”
用户： “大概晚上 7 点。”
代理： “那个时间段没有空位，还有其他时间吗？”
用户： “你们还有哪些时间段？”
代理： “我们在 5:00、5:30、6:00、8:30、9:00、9:30 和 10:00 有空位。哪一个合适？”

这既慢又低效。更好的体验是 代理快速生成或使用 一个包含日期选择器、时间选择器和提交按钮的简易表单。借助 A2UI，LLM 可以从部件目录中组合定制 UI，为手头任务提供图形化、美观、易用的界面。

例如，上述基于文本的聊天可以改为使用 A2UI 组合的预订 UI。下图展示了餐厅预订的 A2UI 表现形式（由于 A2UI 的设计，前端宿主应用对样式拥有很大控制权，实际渲染方式还有很多种可能）。

挑战：跨信任边界的渲染

我们正进入多代理网格（multi‑agent mesh）的时代。Google 的代理正在与 Cisco、IBM、SAP、Salesforce 等公司的代理协作完成复杂任务。这也是我们共同创建 Agent‑to‑Agent (A2A) 协议 并捐赠给 Linux 基金会的原因：即使代理之间不共享内存、工具或上下文，也能实现协作。

然而，这种去中心化带来了用户界面问题。

如果代理位于你的应用内部，它可以直接操作视图层（例如 DOM）。在多代理的世界里，实际执行任务的代理往往是远程的——运行在不同的服务器上或归属不同组织。它无法直接触碰你的 UI，只能发送消息。

过去，从远程不可信来源渲染 UI 往往是发送 HTML 或 JavaScript 并在 iframe 中进行沙箱化。这种方式笨重，视觉上常常与应用原生样式不匹配，并且在安全边界上增加了复杂性。

我们需要一种 像数据一样安全、却像代码一样可表达 的 UI 传输方式。

解决方案：将 UI 规范视为消息序列

A2UI 提供了一种标准格式，可在运行时作为结构化输出生成，也可以作为模板并填充数值。JSON 负载可以通过 A2A、AG UI 或其他传输方式发送给客户端。客户端使用自己的原生 UI 组件进行渲染。这意味着 客户端完全掌控样式和安全性，确保代理的输出始终与应用本身的原生感受保持一致。

示例：基于照片的园林表单

在此示例中，用户上传一张照片，远程代理使用 Gemini 解析图片并为园林客户的具体需求创建定制表单。

示例：交互式图表和地图

在此示例中，代理返回一个包含交互式图表的自定义组件，以及另一个包含 Google Maps 的自定义组件。

核心理念：安全、可更新、解耦

我们围绕以下关键原则设计了 A2UI：

• 安全第一 – A2UI 是一种 声明式 数据格式，而非可执行代码。你的客户端应用维护一份受信任、预先批准的 UI 组件目录（例如 Card、Button、TextField）。代理只能请求目录中的组件，从而降低 UI 注入等漏洞风险。
• 对 LLM 友好且可增量更新 – UI 以平铺的组件列表及 ID 引用的形式表示，便于 LLM 逐步生成。这支持渐进式渲染和响应式用户体验，使代理能够在对话演进时进行增量修改。
• 框架无关且可移植 – A2UI 将 UI 结构 与 UI 实现 分离。代理发送组件树及其数据模型的描述，客户端将这些抽象描述映射到本地部件——无论是 Web 组件、Flutter 小部件、React 组件、SwiftUI 视图，还是其他。相同的 A2UI JSON 负载可以在使用不同框架构建的多个客户端上渲染。

在代理 UI 生态系统中导航

代理 UI 领域发展迅速，出现了许多优秀工具来解决堆栈的不同层面。我们并不把 A2UI 视为这些框架的替代品，而是把它当作一种专门的协议，用来解决 可互操作、跨平台、生成式或基于模板的响应 这一特定问题。

绘制全景图

• 构建“宿主”应用的 UI
  如果你正在构建一个全栈应用（即“宿主” UI …）