google新出的A2UI: 开源代理到用户界面

A2UI 是一个开源项目，具有一种优化的格式，用于表示可更新的代理生成的用户界面，并提供一组初步的渲染器，允许代理生成或填充丰富的用户界面。

a2ui_gallery_examples.png

A2UI 组件画廊

这是 A2UI 渲染卡片的画廊，展示了 A2UI 可以实现的各种 UI 组合。

状态：早期阶段公开预览

注意：A2UI 当前处于 v0.8（公开预览）版本。规范和实现是功能性的，但仍在不断发展。我们开放该项目以促进协作、收集反馈并征求贡献（例如，客户端渲染器）。预计会有变动。

概述

生成性 AI 擅长创建文本和代码，但代理在向用户呈现丰富的互动界面时可能会遇到困难，尤其是当这些代理是远程运行的，或跨越信任边界时。

A2UI 是一种开放标准和库集，允许代理“讲述 UI”。代理发送一个声明式的 JSON 格式，描述 UI 的意图。客户端应用程序使用其本地组件库（例如 Flutter、Angular、Lit 等）来渲染这个 UI。

这种方法确保了代理生成的 UI 既像数据一样安全，又像代码一样富有表现力。

高级哲学

A2UI 的设计旨在解决代理生成的 UI 响应的互操作性、跨平台性、生成性或基于模板的 UI 响应的具体挑战。

项目核心哲学：

•安全第一：运行由 LLM 生成的任意代码可能存在安全风险。A2UI 是一种声明式数据格式，而非可执行代码。您的客户端应用程序维护一个“目录”，其中包含经过信任的、预先批准的 UI 组件（例如卡片、按钮、文本框），代理只能请求渲染这些组件中的内容。•LLM 友好且可增量更新：UI 表示为一个组件的平面列表，并且每个组件都有 ID 引用，这对于 LLM 来说非常容易增量生成，从而允许逐步渲染并提供响应式用户体验。代理可以根据新的用户请求对 UI 进行增量更改，以便在对话过程中进行调整。•框架无关且可移植：A2UI 将 UI 结构与 UI 实现分开。代理发送组件树及其相关数据模型的描述。您的客户端应用程序负责将这些抽象描述映射到其本地小部件，无论是 Web 组件、Flutter 小部件、React 组件、SwiftUI 视图还是其他任何形式。来自代理的相同 A2UI JSON 有效负载可以在多个不同框架的不同客户端上进行渲染。•灵活性：A2UI 还具有一个开放的注册模式，允许开发者将服务器端类型映射到自定义的客户端实现，从原生移动小部件到 React 组件。通过注册一个“智能包装器”，您可以将任何现有的 UI 组件——包括用于旧内容的安全 iframe 容器——连接到 A2UI 的数据绑定和事件系统。关键的是，这将安全性牢牢掌握在开发者手中，使他们能够在自定义组件逻辑中直接执行严格的沙箱策略和“信任阶梯”，而不是仅仅依赖于核心系统。

用例

一些常见的用例包括：

•动态数据收集：代理根据对话的具体上下文生成定制的表单（例如日期选择器、滑块、输入框等）（如：预订特殊的预约）。•远程子代理：一个协调代理将任务委派给一个远程的专门代理（例如，旅行预订代理），后者返回一个 UI 负载，显示在主聊天窗口中。•自适应工作流：企业代理根据用户的查询动态生成审批面板或数据可视化图表。

架构

A2UI 的流程将 UI 的生成与 UI 的执行分离开来：

•生成：代理（使用 Gemini 或其他 LLM）生成或使用预生成的 A2UI 响应，这是一个 JSON 负载，描述了 UI 组件及其属性的组合。•传输：此消息被发送到客户端应用程序（通过 A2A、AG UI 等）。•解析：客户端的 A2UI 渲染器解析该 JSON。•渲染：渲染器将抽象的组件（例如，类型：'text-field'）映射到客户端代码库中的具体实现。

依赖

A2UI 被设计为轻量级格式，但它适配于更大的生态系统：

•传输：兼容 A2A 协议和 AG UI。•LLM：可以由任何能够生成 JSON 输出的模型生成。•宿主框架：需要一个在支持的框架中构建的宿主应用程序（目前支持：Web 或 Flutter）。

快速入门

理解 A2UI 最好的方式是运行示例代码。

前提条件

•Node.js（用于 Web 客户端）•Python（用于代理示例）•需要一个有效的 Gemini API 密钥[1]来运行示例。

运行餐厅查找演示

1.克隆仓库：

git clone https://github.com/google/A2UI.gitcd A2UI

2.设置您的 API 密钥：

export GEMINI_API_KEY="your_gemini_api_key"

3.运行代理（后端）：

cd samples/agent/adk/restaurant_finderuv run .

4.运行客户端（前端）：打开一个新的终端窗口，执行以下命令：

# 安装并构建 Lit 渲染器：
cd renderers/lit
npm install
npm run build


# 安装并运行 Shell 客户端：
cd ../../samples/client/lit/shell
npm install
npm run dev

对于 Flutter 开发者，可以查看 GenUI SDK[2]，它在底层使用了 A2UI。

CopilotKit 也有一个公开的 A2UI [3]小部件构建器可以尝试。

https://github.com/google/a2ui?tab=readme-ov-file'

References

[1] Gemini API 密钥: https://aistudio.google.com/ [2] GenUI SDK: https://github.com/flutter/genui [3] A2UI : https://a2ui-composer.ag-ui.com/