A2UI 实践指南用 JSON 驱动 AI 界面生成快速跑通动态 UI【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui做 AI Agent 应用的工程师常会遇到同一个难题模型很擅长输出文字但要让它画出一组按钮、表单和卡片往往只能靠前端硬编码每新增一个业务场景就要重新开发一轮界面。A2UI 就是一个针对这类问题的开源项目——它让 Agent 用声明式 JSON 描述想要的界面再由客户端用原生组件库完成渲染使界面像数据一样安全又像代码一样有表现力。项目定位A2UI 到底是什么A2UI 是一套开放标准加配套库核心是一个描述界面意图的 JSON 格式而不是一套具体的组件库。它的四条设计思路值得先了解安全优先JSON 是数据而非可执行代码。客户端维护一个受信组件目录catalog如 Card、Button、TextFieldAgent 只能请求目录内的组件无法注入任意脚本。对 LLM 友好UI 被表示为带 ID 引用的扁平组件列表模型可以增量生成、逐步修补客户端也能渐进式渲染。框架无关界面结构与实现解耦同一份 JSON 可以交给 Angular、React、Lit、Flutter 等不同渲染器去映射到各自的本地控件。可扩展通过 Smart Wrapper 注册模式可以把既有组件包括 iframe 容器挂进 A2UI 的数据绑定与事件体系。目前生产可用版本是 v0.9.1v1.0 规范处于 release candidate 阶段v0.8 为遗留版本选型时注意区分。工作原理一条消息如何变成界面整个流程把生成 UI和执行 UI彻底拆开共四步生成Agent 借助 LLM 产出一份 A2UI Response即描述组件组合与属性的 JSON 负载。传输消息通过 A2A、AG-UI 等协议通道发给客户端。解析客户端的 A2UI Renderer 解析 JSON。渲染把抽象组件如type: text-field映射到客户端代码中的具体控件。用仓库里的餐厅查找器samples/agent/adk/restaurant_finder/走一遍就清楚了用户输入找一家意大利餐厅Agent 结合本地餐厅数据生成两部分内容——数据模型餐厅列表、菜系、评分和组件树标题、卡片、按钮两者通过数据路径绑定。客户端收到后按 catalog 渲染出餐厅卡片列表。用户点预订时操作以 action 事件回传给 AgentAgent 只下发增量消息屏幕上随即出现日期和时间选择表单全程无需刷新页面也不涉及任何前端代码改动。实战演练五分钟跑通餐厅查找器准备三样东西Node.js 18启用 Corepack、uvPython 包管理器、一个Gemini API Key。git clone https://gitcode.com/GitHub_Trending/a2/a2ui cd a2ui export GEMINI_API_KEY你的API密钥 corepack enable yarn install cd samples/client/lit yarn demo:restaurantyarn install会安装各 workspace 依赖并构建渲染器yarn demo:restaurant同时拉起 Python Agent 和 Lit 客户端浏览器打开http://localhost:5173后即可交互。如果想拆开理解两端可以单独启动 Agent 端cd samples/agent/adk/restaurant_finder uv run .Agent 以 A2A 服务器形式运行在 10002 端口用curl http://localhost:10002/.well-known/agent-card.json验证服务可用再按该目录下 README 里的 JSON-RPC 示例发送一条Find me an Italian restaurant消息就能在终端里直接看到 Agent 返回的 A2UI JSON 负载——这正是理解协议最快的方式。项目地图核心目录导读按下面的路线浏览可以较快建立全局认知docs/public/官方文档quickstart、概念数据绑定、目录、动作、各框架接入指南都在这里。specification/分版本存放协议规范、JSON Schema 与 basic catalog 定义test/cases/下有可直接运行的协议测试用例。renderers/各前端框架的渲染器实现web_core/是 Web 端共享核心Angular、React、Lit 各自独立成包。agent_sdks/python/Python 侧 SDKa2ui_core负责协议处理a2ui_agent提供 Agent 集成能力。samples/完整示例agent/是各类 Agent 实现client/是各框架客户端壳工程。tools/composer/可视化编辑器能生成 A2UI JSON 并直接粘贴进 Agent 提示词tools/inspector/则用于检查消息与数据流。上手建议新手常见的坑与调试技巧几个容易踩的问题版本混用v0.8 是遗留版本文档和代码结构都与 v0.9 差异很大v1.0 规范尚未定型。学习和开发都建议以 v0.9.1 为基准。catalog 不匹配Agent 只能引用客户端 catalog 里存在的组件两端组件定义对不上时界面会渲染失败。改自定义组件前先确认双端都注册了它。安全问题示例代码仅用于演示。生产环境中来自外部 Agent 的 AgentCard、消息、UI 定义都应视为不可信输入需做校验、输入清洗与沙箱隔离防止提示注入或 XSS。性能与调试方面利用协议的增量更新特性避免每轮对话都整包重发 UI。用Inspector观察消息流转定位数据到了但界面没变这类绑定问题。跑conformance/下的一致性测试和specification/*/test/中的协议用例验证你的实现是否合规。想手写 JSON 时先用 Composer 生成一份正确样例对照比对着 Schema 手敲效率高得多。继续深入A2UI 目前仍处于早期公开预览阶段规范与实现都在演进建议从 docs/public/quickstart.md 完整走一遍快速上手流程再按自己使用的框架查 docs/public/ 下的对应指南想理解协议细节直接阅读 specification/v0_9_1/docs/ 里的协议文档是最可靠的路径。社区贡献流程见 CONTRIBUTING.md。【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考