google/A2UI
GitHub: google/A2UI
A2UI 是 Google 推出的开放标准，通过声明式 JSON 格式让 AI Agent 安全地生成丰富的跨平台用户界面。
Stars: 12858 | Forks: 969
# A2UI: Agent-to-User Interface
A2UI 是一个开源项目，包含一种专为表示可更新的 agent 生成 UI 而优化的格式，以及一组初始渲染器，允许 agent 生成或填充丰富的用户界面。
*A2UI 渲染卡片 gallery，展示了 A2UI 可以实现的各种 UI 组合。*
## ⚠️ 状态：早期公开预览版
## 概述
生成式 AI 擅长创建文本和代码，但 agent 往往难以向用户展示丰富、交互式的界面，尤其是当这些 agent 是远程的或跨信任边界运行时。
**A2UI** 是一个开放标准和库集合，允许 agent “用 UI 说话”。Agent 发送一种声明式 JSON 格式来描述 UI 的*意图*。客户端应用程序随后使用自己的原生组件库（Flutter, Angular, Lit 等）对其进行渲染。
这种方法确保了 agent 生成的 UI **像数据一样安全，但又像代码一样具有表现力**。
## 高层理念
A2UI 旨在解决来自 agent 的可互操作、跨平台、生成式或基于模板的 UI 响应的具体挑战。
该项目的核心理念：
* **安全第一**：运行由 LLM 生成的任意代码可能存在安全风险。A2UI 是一种声明式数据格式，而非可执行代码。您的客户端应用程序维护一个经过信任、预批准的 UI 组件（例如 Card, Button, TextField）“目录”，而 agent 只能请求渲染该目录中的组件。
* **对 LLM 友好且可增量更新**：UI 被表示为带有 ID 引用的扁平化组件列表，这使得 LLM 很容易增量生成，从而允许渐进式渲染和响应式的用户体验。随着对话的进行，agent 可以根据新的用户请求高效地对 UI 进行增量更改。
* **框架无关且可移植**：A2UI 将 UI 结构与 UI 实现分离开来。Agent 发送组件树及其关联数据模型的描述。您的客户端应用程序负责将这些抽象描述映射到其原生 widgets——无论是 Web components, Flutter widgets, React components, SwiftUI views 还是其他完全不同的东西。来自 agent 的同一个 A2UI JSON payload 可以在基于不同框架构建的多个不同客户端上渲染。
* **灵活性**：A2UI 还具有开放注册表模式，允许开发者将服务端类型映射到自定义客户端实现，从原生移动 widgets 到 React components。通过注册“Smart Wrapper”，您可以将任何现有的 UI 组件——包括用于遗留内容的安全 iframe 容器——连接到 A2UI 的数据绑定和事件系统。至关重要的是，这将安全牢牢掌握在开发者手中，使他们能够在其自定义组件逻辑中直接执行严格的沙盒策略和“信任阶梯（trust ladders）”，而不是仅仅依赖核心系统。
## 使用场景
部分使用场景包括：
* **动态数据收集：** Agent 根据对话的具体上下文（例如，预订特定预约）生成定制表单（日期选择器、滑块、输入框）。
* **远程 Sub-Agent：** 编排器 agent 将任务委托给远程专业化 agent（例如，旅行预订 agent），后者返回一个 UI payload 以在主聊天窗口内渲染。
* **自适应工作流：** 企业 agent 根据用户的查询即时生成审批仪表板或数据可视化。
## 架构
A2UI 流程将 UI 的生成与 UI 的执行分离开来：
1. **生成：** Agent（使用 Gemini 或其他 LLM）生成或使用预先生成的 `A2UI Response`，这是一个描述 UI 组件及其属性组成的 JSON payload。
2. **传输：** 此消息被发送到客户端应用程序（通过 A2A, AG UI 等）。
3. **解析：** 客户端的 **A2UI Renderer** 解析 JSON。
4. **渲染：** Renderer 将抽象组件（例如 `type: 'text-field'`）映射到客户端代码库中的具体实现。
## 依赖
A2UI 设计为一种轻量级格式，但它适用于更大的生态系统：
* **传输层：** 兼容 **A2A Protocol** 和 **AG UI**。
* **LLM：** 可以由任何能够生成 JSON 输出的模型生成。
* **宿主框架：** 需要一个在受支持框架（目前：Web 或 Flutter）中构建的宿主应用程序。
## 快速开始
理解 A2UI 的最好方法是运行示例。
### 前置条件
* Node.js（用于 Web 客户端）
* Python（用于 agent 示例）
* 示例需要一个有效的 [Gemini API Key](https://aistudio.google.com/)。
### 运行 Restaurant Finder 演示
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. **运行 Client（前端）：**
打开一个新的终端窗口：
# 安装并构建 Markdown renderer
cd renderers/markdown/markdown-it
npm install
npm run build
# 安装并构建 Web Core 库
cd ../../web_core
npm install
npm run build
# 安装并构建 Lit renderer
cd ../lit
npm install
npm run build
# 安装并运行 shell client
cd ../../samples/client/lit/shell
npm install
npm run dev
对于 Flutter 开发者，请查看 [GenUI SDK](https://github.com/flutter/genui)，
它在底层使用了 A2UI。
CopilotKit 也有一个公开的 [A2UI Widget Builder](https://go.copilotkit.ai/A2UI-widget-builder)
供您试用。
## 路线图
我们希望与社区在以下方面展开合作：
* **规范稳定化：** 迈向 v1.0 规范。
* **更多渲染器：** 增加对 React, Jetpack Compose, iOS (SwiftUI) 等的官方支持。
* **额外的传输层：** 支持 REST 等。
* **额外的 Agent 框架：** Genkit, LangGraph 等。
## 贡献
A2UI 是一个 **Apache 2.0** 许可的项目。我们相信 UI 的未来是 Agentic 的，我们希望与您合作共同构建它。
有关如何开始的详细信息，请参阅 [CONTRIBUTING.md](CONTRIBUTING.md)。
*A2UI 渲染卡片 gallery，展示了 A2UI 可以实现的各种 UI 组合。*
## ⚠️ 状态：早期公开预览版
## 概述
生成式 AI 擅长创建文本和代码，但 agent 往往难以向用户展示丰富、交互式的界面，尤其是当这些 agent 是远程的或跨信任边界运行时。
**A2UI** 是一个开放标准和库集合，允许 agent “用 UI 说话”。Agent 发送一种声明式 JSON 格式来描述 UI 的*意图*。客户端应用程序随后使用自己的原生组件库（Flutter, Angular, Lit 等）对其进行渲染。
这种方法确保了 agent 生成的 UI **像数据一样安全，但又像代码一样具有表现力**。
## 高层理念
A2UI 旨在解决来自 agent 的可互操作、跨平台、生成式或基于模板的 UI 响应的具体挑战。
该项目的核心理念：
* **安全第一**：运行由 LLM 生成的任意代码可能存在安全风险。A2UI 是一种声明式数据格式，而非可执行代码。您的客户端应用程序维护一个经过信任、预批准的 UI 组件（例如 Card, Button, TextField）“目录”，而 agent 只能请求渲染该目录中的组件。
* **对 LLM 友好且可增量更新**：UI 被表示为带有 ID 引用的扁平化组件列表，这使得 LLM 很容易增量生成，从而允许渐进式渲染和响应式的用户体验。随着对话的进行，agent 可以根据新的用户请求高效地对 UI 进行增量更改。
* **框架无关且可移植**：A2UI 将 UI 结构与 UI 实现分离开来。Agent 发送组件树及其关联数据模型的描述。您的客户端应用程序负责将这些抽象描述映射到其原生 widgets——无论是 Web components, Flutter widgets, React components, SwiftUI views 还是其他完全不同的东西。来自 agent 的同一个 A2UI JSON payload 可以在基于不同框架构建的多个不同客户端上渲染。
* **灵活性**：A2UI 还具有开放注册表模式，允许开发者将服务端类型映射到自定义客户端实现，从原生移动 widgets 到 React components。通过注册“Smart Wrapper”，您可以将任何现有的 UI 组件——包括用于遗留内容的安全 iframe 容器——连接到 A2UI 的数据绑定和事件系统。至关重要的是，这将安全牢牢掌握在开发者手中，使他们能够在其自定义组件逻辑中直接执行严格的沙盒策略和“信任阶梯（trust ladders）”，而不是仅仅依赖核心系统。
## 使用场景
部分使用场景包括：
* **动态数据收集：** Agent 根据对话的具体上下文（例如，预订特定预约）生成定制表单（日期选择器、滑块、输入框）。
* **远程 Sub-Agent：** 编排器 agent 将任务委托给远程专业化 agent（例如，旅行预订 agent），后者返回一个 UI payload 以在主聊天窗口内渲染。
* **自适应工作流：** 企业 agent 根据用户的查询即时生成审批仪表板或数据可视化。
## 架构
A2UI 流程将 UI 的生成与 UI 的执行分离开来：
1. **生成：** Agent（使用 Gemini 或其他 LLM）生成或使用预先生成的 `A2UI Response`，这是一个描述 UI 组件及其属性组成的 JSON payload。
2. **传输：** 此消息被发送到客户端应用程序（通过 A2A, AG UI 等）。
3. **解析：** 客户端的 **A2UI Renderer** 解析 JSON。
4. **渲染：** Renderer 将抽象组件（例如 `type: 'text-field'`）映射到客户端代码库中的具体实现。
## 依赖
A2UI 设计为一种轻量级格式，但它适用于更大的生态系统：
* **传输层：** 兼容 **A2A Protocol** 和 **AG UI**。
* **LLM：** 可以由任何能够生成 JSON 输出的模型生成。
* **宿主框架：** 需要一个在受支持框架（目前：Web 或 Flutter）中构建的宿主应用程序。
## 快速开始
理解 A2UI 的最好方法是运行示例。
### 前置条件
* Node.js（用于 Web 客户端）
* Python（用于 agent 示例）
* 示例需要一个有效的 [Gemini API Key](https://aistudio.google.com/)。
### 运行 Restaurant Finder 演示
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. **运行 Client（前端）：**
打开一个新的终端窗口：
# 安装并构建 Markdown renderer
cd renderers/markdown/markdown-it
npm install
npm run build
# 安装并构建 Web Core 库
cd ../../web_core
npm install
npm run build
# 安装并构建 Lit renderer
cd ../lit
npm install
npm run build
# 安装并运行 shell client
cd ../../samples/client/lit/shell
npm install
npm run dev
对于 Flutter 开发者，请查看 [GenUI SDK](https://github.com/flutter/genui)，
它在底层使用了 A2UI。
CopilotKit 也有一个公开的 [A2UI Widget Builder](https://go.copilotkit.ai/A2UI-widget-builder)
供您试用。
## 路线图
我们希望与社区在以下方面展开合作：
* **规范稳定化：** 迈向 v1.0 规范。
* **更多渲染器：** 增加对 React, Jetpack Compose, iOS (SwiftUI) 等的官方支持。
* **额外的传输层：** 支持 REST 等。
* **额外的 Agent 框架：** Genkit, LangGraph 等。
## 贡献
A2UI 是一个 **Apache 2.0** 许可的项目。我们相信 UI 的未来是 Agentic 的，我们希望与您合作共同构建它。
有关如何开始的详细信息，请参阅 [CONTRIBUTING.md](CONTRIBUTING.md)。标签：A2UI, Agent, Agent-to-User, Angular, Chatbot, Flutter, Grype, Homebrew安装, JSON格式, MITM代理, UI渲染, 人机交互, 低代码, 声明式UI, 大模型工具, 安全性, 实时更新, 开源标准, 模板引擎, 渐进式渲染, 生成式AI, 用户界面, 索引, 组件库, 自动化攻击, 逆向工具