A2UIAI 代理生成可交互界面的开源 UI 协议5 分钟本地跑通【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui你让 AI 帮你订餐厅它回了一段文字你得复制店名再去别处搜。A2UIAgent-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_KEYyour-key示例代理用 Gemini 生成 A2UI JSONkey 只需一个环境变量。第 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 JSONMCP 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），仅供参考