夜雨聆风OPEN SOURCE PROJECT
A2UI：让 AI Agent 生成界面的开源协议
安全、跨平台、流式渲染 —— 下一代人机交互界面的基础设施
导读：生成式 AI 擅长创造文本和代码，但让 AI Agent 向用户展示丰富、可交互的界面却一直是难题——尤其是在 Agent 远程运行或跨越信任边界时。Google 开源的 A2UI（Agent-to-User Interface）项目正是为了解决这一问题而生。
一、项目简介
A2UI（Agent-to-User Interface）是由 Google 主导开发的开源项目，提供了一套优化的数据格式和配套的渲染器，让 AI Agent 能够生成或填充丰富的用户界面。
简单来说，A2UI 是一种开放标准和库集合，让 Agent 能够"说 UI 语言"—— Agent 发送声明式 JSON 格式描述 UI 的意图，客户端应用使用自己的原生组件库（Flutter、Angular、Lit、React 等）来渲染。
"像数据一样安全，像代码一样富有表现力"
项目状态：早期公开预览（v0.9 已发布，v0.10 开发中）| 许可证：Apache 2.0
二、核心设计哲学
安全第一
运行 LLM 生成的任意代码存在安全风险。A2UI 采用声明式数据格式而非可执行代码。客户端维护一个经过审查的"组件目录"（如 Card、Button、TextField），Agent 只能从该目录中请求渲染组件，杜绝了 UI 注入攻击。
LLM 友好且可增量更新
UI 以扁平的组件列表 + ID 引用表示，LLM 可以轻松地增量生成。Agent 不需要一次性生成完整的 JSON，可以边生成边渲染，为用户提供实时、渐进式的体验。
框架无关且可移植
A2UI 将 UI 结构与实现分离。Agent 发送组件树描述和关联的数据模型，客户端负责映射到原生控件。同一份 JSON 可在多个不同框架的客户端上渲染。
灵活扩展
A2UI 提供开放注册模式，开发者可将服务端类型映射到自定义客户端实现——从原生移动端控件到 React 组件，甚至支持通过安全 iframe 容器集成遗留内容。
三、架构设计
A2UI 的核心流程将 UI 的生成与执行解耦，分为四个阶段：
Phase 1 生成 Agent 生成 JSON | Phase 2 传输 A2A / AG-UI | Phase 3 解析 Renderer 解析 | Phase 4 渲染 映射原生组件 |
三层架构：
1. 生成层：AI Agent 使用 Gemini 或其他 LLM 生成 A2UI Response（JSON 格式的组件组合和属性描述）
2. 传输层：通过 A2A Protocol、AG-UI、SSE、WebSocket 等协议将消息发送到客户端
3. 渲染层：客户端的 A2UI Renderer 将抽象组件（如 type: 'text-field'）映射为代码库中的具体实现
四、项目结构
A2UI/
├── specification/ // 协议规范 (v0.8 / v0.9 / v0.10)
├── renderers/ // 渲染器实现
│ ├── angular/ // Angular 渲染器
│ ├── flutter/ // Flutter 渲染器
│ ├── lit/ // Lit (Web Components) 渲染器
│ ├── react/ // React 渲染器
│ ├── web_core/ // Web 核心渲染库
│ └── markdown/ // Markdown 渲染器
├── samples/ // 示例实现
│ ├── agent/ // Agent 示例 (Python ADK)
│ ├── client/ // 客户端示例
│ └── mcp/ // MCP 集成
├── agent_sdks/ // Agent SDK
├── tools/ // 开发工具 (Composer/Editor/Inspector)
├── docs/ // 文档 (MkDocs)
└── eval/ // 评估与测试
五、技术栈一览
六、核心概念
6.1 Surface（画布）
Surface 是 UI 组件的容器画布。支持多种展示形式：对话框（dialog）、侧边栏（sidebar）、主视图（main view）等。每个 Surface 有独立的组件树和数据模型。
6.2 Components（组件）
预定义的 UI 元素，包括但不限于：
Button 按钮组件 | TextField 文本输入框 |
Card 卡片容器 | DateTimeInput 日期时间选择器 |
Slider 滑块控件 | Image 图片组件 |
6.3 Data Model（数据模型）
应用状态采用 JSON Pointer 的数据绑定方式。组件属性可以绑定到数据模型的路径上，当数据更新时 UI 自动响应刷新，实现声明式的数据驱动视图更新。
6.4 Catalog（组件目录）
注册可用组件类型的注册表。开发者可以注册自定义组件（Smart Wrapper），连接任何现有 UI 组件到 A2UI 的数据绑定和事件系统，实现安全沙箱和信任阶梯策略。
6.5 Messages（消息）
A2UI 的消息是 JSON 对象，核心消息类型包括：
{
"createSurface": { ... }, // 创建 UI 画布
"updateComponents": { ... }, // 更新组件树
"updateDataModel": { ... } // 更新数据模型
}
七、协议版本演进
八、5 分钟快速上手
前置准备：
1. 安装 Node.js 和 uv（Python 包管理器）
2. 获取 Gemini API Key
3. 设置环境变量：export GEMINI_API_KEY="your_key"
运行餐厅搜索 Demo：
# Lit 渲染器版本
cd samples/client/lit
npm run demo:restaurant
# Angular 渲染器版本
cd samples/client/angular
npm run demo:restaurant
# 构建所有渲染器
cd renderers && npm run build
九、配套开发工具
A2UI Composer
可视化 UI 构建器，无需安装即可使用。通过拖拽方式生成 A2UI JSON，可直接粘贴到任何 Agent 的提示词中。
A2UI Editor
专用的 A2UI JSON 编辑器，提供语法高亮、自动补全和实时预览功能。
A2UI Inspector
调试工具，用于检查和分析 A2UI 消息流，帮助开发者排查渲染问题。
A2UI Theater
在线演示平台，可直接在浏览器中体验 A2UI 渲染效果。
十、典型应用场景
动态数据收集
Agent 根据对话上下文生成定制化表单（日期选择器、滑块、文本输入等）。例如，根据用户讨论的旅行计划，自动生成包含目的地、日期、预算等字段的预订表单。
远程子 Agent 协作
编排 Agent 将任务委派给远程专业 Agent（如旅行预订 Agent），后者返回 UI 载荷，在主聊天窗口中渲染。实现多 Agent 系统的界面协同。
自适应工作流
企业级 Agent 根据用户查询动态生成审批仪表盘或数据可视化界面。适用于审批流程、监控面板、报表展示等场景。
十一、生态集成
A2UI 作为轻量级格式，融入更大的 AI Agent 生态：
十二、总结与展望
A2UI 代表了 AI Agent 与用户交互方式的重大进步。它通过声明式的安全设计、跨框架的可移植性、以及对流式渲染的原生支持，构建了一套完整的"Agent 生成界面"基础设施。
项目核心价值：
✓ 安全 —— 声明式数据格式，杜绝代码注入风险
✓ 跨平台 —— 一份 JSON，多端渲染
✓ 流式更新 —— 渐进式渲染，用户无感等待
✓ 开发者友好 —— 丰富的工具链和完善的文档
✓ 生态开放 —— 与主流 Agent 框架无缝集成
✓ 社区驱动 —— Apache 2.0 开源，欢迎贡献
相关链接：
GitHub: github.com/google/A2UI
在线文档: a2ui.dev
A2UI Composer: a2ui-composer.ag-ui.com
A2UI Theater: a2ui-composer.ag-ui.com/theater
许可证: Apache 2.0
A2UI - Agent-to-User Interface
Google Open Source | Apache 2.0 License