A2UI入门实践教程3条命令跑通AI Agent生成交互界面【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2uiA2UI 是一套让 Agent 会讲 UI的开源标准与库集合Agent 发送描述界面意图的声明式 JSON客户端用自己的原生组件Lit、React、Angular、Flutter渲染出来。适合需要给 AI 应用做交互界面的开发者解决 Agent 界面与前端框架强耦合、多端重复开发的问题。交互界面不用再预开发用与不用 A2UI 的工作流差异你要给 AI 应用做交互界面时常遇到这样的需求用户说帮我订个位Agent 应该回一张订位表单。不用 A2UI 时这张表单要前端预先开发订位组件、后端约定字段结构每加一个新场景日期选择、确认卡片、结果列表都要再来一轮前后端协作Agent 的输出也只能是文本或固定模板。用 A2UI 后Agent 直接生成一串描述哪些组件、什么数据的 JSON 消息客户端的渲染器一次性接入之后 Agent 生成的界面就能直接渲染还能增量更新。差异集中在三点界面不再依赖预开发UI 定义是声明式数据客户端不执行模型生成的代码安全性更好同一份 JSON 可被多个框架渲染一套 Agent 服务多个客户端。A2UI 能力清单协议、渲染器与数据绑定声明式 JSON 协议Agent 直接讲 UIAgent 不写代码只输出 JSON 消息流createSurface声明界面画布updateComponents声明组件updateDataModel填充数据。这种安全如数据、表现力如代码的格式便于 LLM 增量生成。对 Agent 开发者最有用的地方你不需要懂前端栈也能描述一张复杂界面。多框架渲染器生态一份 JSON 多处渲染renderers/ 目录提供了 Lit、React、Angular、Flutter 的实现以及框架无关的核心包web_core。同一份 A2UI 负载可以在不同客户端框架上渲染同一套 Agent 代码可以同时服务 Web、桌面和移动端。维护多端产品的团队可以直接选目标框架的渲染器接入。流式数据绑定界面随数据实时更新UI 用扁平组件列表加数据路径来描述消息以 JSONL 逐行流式传输。客户端不必等数据全部到位就能渐进渲染updateDataModel更新某个路径时绑定该路径的组件即时刷新。对需要长对话、界面持续变化的场景预订流程、查询结果迭代这一点最关键。示例全流程走读餐厅查找器从输入到渲染官方示例是餐厅查找与订位Agent位于 samples/agent/adk/restaurant_finder/。输入用户在网页聊天框输入Find me an Italian restaurant找一家意大利餐厅。处理Python Agent 以uv run .启动通过 A2A 协议监听 10002 端口收到消息后把对话交给 Gemini模型输出一串 A2UI 消息——先createSurface声明画布与组件目录再给出 Text、DateTimeInput、Button 等扁平组件列表最后updateDataModel填入订位数据整体以 JSONL 流式返回。餐厅基础数据来自同目录的restaurant_data.json。输出Lit 客户端samples/client/lit/解析消息renderers/lit/ 中的 A2UI 渲染器把抽象组件映射成原生控件浏览器里的界面随之更新。餐厅列表、订位表单、确认页都是模型生成的界面不是写死在源码里的。快速上手三条命令跑通官方 5 分钟演示准备 Node.js 18启用 Corepack、uv 和一个 Gemini API key然后执行git clone https://gitcode.com/GitHub_Trending/a2/a2ui cd a2uiexport GEMINI_API_KEY你的key corepack enable yarn installcd samples/client/lit yarn demo:restaurant最后一条命令会同时启动 Python Agent 和 Lit 客户端浏览器打开localhost:5173即可对话。也可以先用 tools/composer/ 下的可视化设计工具画界面、生成 A2UI JSON再粘贴进 Agent 提示词里调试布局。目录分工一句话说明renderers/是各框架渲染器samples/是按 Agent 与客户端拆分的官方示例specification/是各版本协议规范docs/是全部文档。实践建议与常见坑浏览器启动时报ERR_CONNECTION_REFUSED不用慌那是网页先于 Python Agent 就绪的竞态等几秒刷新页面即可docs/public/quickstart.md 的 troubleshooting 一节列了全部已知问题。调试数据流时先抓 Agent 输出的 JSONL 消息示例 Agent 暴露了 A2A 接口可以直接用 curl 发一条 message/send 请求观察原始响应。写 Agent 时选用 v0.9.1当前生产版本v0.8 已标记 legacyv1.0 还是候选版本三者消息类型不同接入前先对照 specification/ 确认。一句话总结A2UI 把生成 UI和执行 UI拆开Agent 只输出 JSON怎么渲染由客户端的组件目录决定界面因此既安全又跨端。建议先按上面的命令跑通演示再对照你的场景替换restaurant_data.json里的数据。入口资源快速开始文档、官方文档、示例目录。【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考