字
字节笔记本
2026年2月22日
A2UI:Google 开源的 Agent-to-User Interface 框架
A2UI 是 Google 开源的一个创新项目,全称为 Agent-to-User Interface。它提供了一套标准化的 JSON 格式和渲染器库,让 AI Agent 能够生成丰富的、可交互的用户界面。该项目目前在 GitHub 上已获得 11.4k stars,正处于 v0.8 公开预览阶段。
项目简介
A2UI 解决了生成式 AI 在展示富交互界面时的挑战。传统上,Agent 很难向用户展示丰富的交互界面,尤其是当 Agent 运行在远程或跨越信任边界时。
A2UI 采用声明式 JSON 格式,Agent 发送描述 UI 意图的数据,客户端应用使用原生组件库(Flutter、Angular、Lit 等)进行渲染。这种方式确保了 Agent 生成的 UI 像数据一样安全,但像代码一样富有表现力。
核心特性
- 安全第一:A2UI 是声明式数据格式而非可执行代码。客户端应用维护一个受信任的预批准 UI 组件目录(如 Card、Button、TextField),Agent 只能请求渲染目录中的组件
- LLM 友好且可增量更新:UI 表示为带 ID 引用的扁平组件列表,便于 LLM 增量生成,支持渐进式渲染和响应式用户体验
- 框架无关且可移植:将 UI 结构与实现分离,相同的 A2UI JSON 负载可在不同框架的多个客户端上渲染
- 灵活性:支持开放注册模式,开发者可将服务器端类型映射到自定义客户端实现,包括安全的 iframe 容器
技术栈
- 传输协议:兼容 A2A Protocol 和 AG UI
- LLM 支持:任何能生成 JSON 输出的模型
- 宿主框架:Web、Flutter(已支持),React、Jetpack Compose、iOS(SwiftUI)等即将支持
- 许可证:Apache 2.0
架构设计
A2UI 将 UI 的生成与执行分离:
- 生成:Agent(使用 Gemini 或其他 LLM)生成 A2UI Response,描述组件组合和属性的 JSON 负载
- 传输:通过 A2A、AG UI 等协议发送到客户端应用
- 解析:客户端的 A2UI Renderer 解析 JSON
- 渲染:Renderer 将抽象组件映射到客户端代码库中的具体实现
使用场景
- 动态数据收集:Agent 根据对话上下文生成定制表单(日期选择器、滑块、输入框)
- 远程子 Agent:编排器 Agent 将任务委托给远程专业 Agent,返回 UI 负载在主聊天窗口中渲染
- 自适应工作流:企业 Agent 根据用户查询动态生成审批仪表板或数据可视化
快速开始
前置要求
- Node.js(用于 Web 客户端)
- Python(用于 Agent 示例)
- Gemini API Key
运行 Restaurant Finder 演示
bash
# 克隆仓库
git clone https://github.com/google/A2UI.git
cd A2UI
# 设置 API 密钥
export GEMINI_API_KEY="your_gemini_api_key"
# 运行 Agent(后端)
cd samples/agent/adk/restaurant_finder
uv run .
# 运行客户端(前端)- 新开终端
cd renderers/web_core
npm install
npm run build
cd ../lit
npm install
npm run build
cd ../../samples/client/lit/shell
npm install
npm run devFlutter 开发者
Flutter 开发者可以查看 GenUI SDK,它在底层使用 A2UI。
在线体验
CopilotKit 提供了一个公开的 A2UI Widget Builder 供在线体验。
项目路线图
- 规范稳定化:向 v1.0 规范迈进
- 更多渲染器:官方支持 React、Jetpack Compose、iOS(SwiftUI)等
- 额外传输协议:支持 REST 等更多协议
- 更多 Agent 框架:支持 Genkit、LangGraph 等
项目链接
分享: