A2UI：AI 代理生成可交互界面的开源 UI 协议（5 分钟本地跑通）
【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui
你让 AI 帮你订餐厅，它回了一段文字，你得复制店名再去别处搜。A2UI（Agent-to-User Interface）换了个做法：代理输出一段 JSON，客户端直接用原生组件把它渲染成能点的卡片和表单。
核心机制：一段 JSON 怎么变成可点的界面
一句话：代理只发声明，客户端只管渲染，网络上不跑任何可执行代码。
数据流分三个环节：
- 生成：代理（背后通常是 LLM）输出 A2UI JSON——
createSurface开画布，updateComponents描述组件列表，updateDataModel提供数据。 - 传输：JSON 经 A2A、AG-UI、SSE 等通道发到客户端，它只是数据，走什么传输都行。
- 渲染：渲染器解析 JSON，把抽象组件映射成原生控件（Lit、Angular、React、Flutter 等）并绑定数据模型；用户点按钮时，动作作为事件回传代理，代理再下发新的更新。
安全边界划在客户端手里：代理只能从客户端受信组件库（catalog）里"点菜"，不能执行任意代码。
能力对照：常规做法 vs A2UI
| 能力 | 常规做法 | A2UI 做法 |
|---|---|---|
| 界面交付形态 | iframe 塞 HTML/JS，或只发纯文本 | 声明式 JSON，客户端用自家原生组件渲染 |
| 安全边界 | 代理代码在客户端执行，要额外做沙箱 | 代理只能从受信 catalog 请求组件，不执行代码 |
| 跨端复用 | 每个框架单独做一版 | 同一份 JSON 在 Web、Flutter 等多端渲染 |
| 增量更新 | 整页重新生成 | 组件与数据变更按消息流式下发，渐进渲染 |
换句话说，A2UI 把"生成界面"留在服务端，把"渲染和安全"收回客户端。
三步跑起来：5 分钟本地出界面
先装好 Node.js 18+（开启 Corepack）、uv 和一个 Gemini API key。
第 1 步：
git clone https://gitcode.com/GitHub_Trending/a2/a2ui && cd a2ui把代理、客户端和渲染器的代码一次拿全。
第 2 步：
export GEMINI_API_KEY="your-key"示例代理用 Gemini 生成 A2UI JSON，key 只需一个环境变量。
第 3 步：
yarn install && cd samples/client/lit && yarn demo:restaurant一条命令装依赖、启动 Python 代理和 Lit 客户端。
验证：浏览器自动打开http://localhost:5173，在对话里输入"推荐一家好吃的意大利餐厅"，几秒后出现带图片、评分和预订表单的卡片——这就是代理刚生成的界面。更多细节看快速上手文档。
两个真实场景：以前和现在
找餐厅、订位置。
以前问 AI"附近有什么好餐厅"，回来一段文字，订位得自己打开地图 App 重新搜、重新选时间。
现在同样一句话生成餐厅卡片：图片、评分、价格，表单就长在聊天窗口里，选好日期时间点按钮，动作直接回传给代理，代理回你确认结果。完整流程在 restaurant_finder 示例，拉下来就能跑。
MCP 工具直接返回界面。
以前 MCP 里的工具只能返回字符串或裸数据，每个工具的展示逻辑都得客户端自己写。
现在在 A2UI over MCP 菜谱示例 里，get_recipe_ui工具直接返回 A2UI JSON，MCP Inspector 里能看到beginRendering、surfaceUpdate这些事件，任何支持 A2UI 的客户端都能原样渲染。
生态延伸：现在就能扩展什么
以下都已经在仓库里可用，没有画饼：
- 多平台渲染器：仓库已有 Lit、Angular、React 实现和 Web 共享核心 web_core，另有 Swift 与 Dart 版本，完整清单见渲染器列表。
- 自定义组件：客户端可定义自己的 catalog，通过"Smart Wrapper"注册把任意现有组件接入 A2UI 的数据绑定和事件系统，参考自定义组件示例。
- 主题定制：theming 文档讲了怎么让生成的界面贴合你的品牌风格。
- Composer 可视化编辑器：tools/composer/ 可以拖拽拼 UI 并导出 A2UI JSON，直接粘进代理的 prompt，不需要装任何东西。
动手验证：从 Demo 到自己场景
把 demo 跑起来之后，把 restaurant_finder 的提示词换成你自己的业务就行。想深入看：快速上手文档、v0.9.1 协议规范、基础组件库定义。
【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
