A2UI实战入门5分钟从命令行到第一张AI生成表单【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui在聊天框里敲入Book a table for 2回车几秒后界面上多出一张预订表单日期选择器、时间字段、确认按钮。这张表单不是人写的是大模型现场生成的。A2UI就是让这件事成为可能的一套工具一个开源协议加渲染器套件让 AI Agent 用声明式 JSON 描述界面客户端用自己的组件库负责渲染实现。跑通 A2UI 演示前环境准备Node.js 18启用 Corepack用来安装依赖并运行 Lit 网页客户端uvPython 包管理器需 Python 3.10演示里的 Agent 后端是 Python 写的靠uv run启动Gemini API KeyAgent 调它生成 A2UI 消息没有 Key 界面就出不来仓库代码克隆到本地演示的 Agent 与渲染器都在仓库里不依赖线上服务最小演示跑通步骤预订餐厅 Demo克隆仓库并设置 Keygit clone https://gitcode.com/GitHub_Trending/a2/a2ui cd a2ui export GEMINI_API_KEYyour_gemini_api_key # 换成你自己的 Key安装依赖并启动演示。这条命令会先构建渲染器然后同时拉起 Python 智能体和网页客户端corepack enable # 启用 Node 自带的 Yarn 管理 yarn install # 安装整个仓库的 workspace 依赖 cd samples/client/lit yarn demo:restaurant # 一键起 Agent 网页客户端浏览器打开http://localhost:5173在输入框敲Book a table for 2回车。3 秒后聊天区里出现一张表单一个日期选择器、一个时间输入、一个主色按钮上方还有标题文字。注意这些控件在源码里一行都没有全部是 Gemini 现场生成的 A2UI 消息渲染出来的。换一句Find Italian restaurants near me界面会变成餐厅列表再问营业时间又是一套布局。一段 JSON 如何变成界面拆开 A2UI 黑盒把 A2UI 想成施工图与施工队。Agent 是画图纸的纸上只写门厅放一扇编号 101 的门门边留一个电源点位。客户端是施工队仓库里有什么建材按钮、文本、日期框就用什么材料按自己的工艺装好。图纸是一份数据文件不是施工指令施工队不可能被一张图纸指使着去放炸药——这就是像数据一样安全像代码一样有表现力的来源。对应到协议里的四个核心概念概念白话解释Surface表面一块渲染画布聊天里一个卡片区域就是一个surfaceIdComponent组件按钮、文本、日期选择器这类基本单元Agent 只写类型和属性Data Model数据模型状态仓库组件按路径绑定数据改数据界面就变Catalog组件目录客户端预先批准的组件白名单Agent 只能从里面取用一条真实的 A2UI 消息长这样v0.9.1结构截取自 docs/public/quickstart.md{ version: v0.9.1, updateComponents: { surfaceId: main, // 更新哪块画布 components: [ { id: date-picker, component: DateTimeInput, value: { path: /reservation/date } }, // 组件绑定到数据路径 { id: submit-btn, component: Button, child: submit-text, // 用 ID 引用子组件扁平不嵌套 action: { event: { name: confirm_booking } } } ] } }消息是流式一条条到达的客户端先缓冲组件定义和数据更新再按surfaceId从根节点构建组件树、解析数据绑定、到本地注册表查出组件实现。因为组件是扁平列表 ID 引用Agent 后续只需发送有变化的那几条界面随之渐进式更新不用整页重画。A2UI 实战MCP 菜谱工具三步闭环仓库里还有一个把 A2UI 挂到 MCP 工具 上的示例按口味生成菜谱卡。前面yarn install装过根目录依赖直接开跑。# 终端一启动 MCP 服务SSE 传输默认 8000 端口 cd samples/community/mcp/a2ui-over-mcp-recipe uv run .# 终端二启动配套网页客户端 cd client yarn dev # 打开 http://localhost:5173走一遍输入 → 操作 → 出结果输入页面左侧是一张选菜谱的表单——烹饪方式烤 / 烤制 / 慢炖和蛋白质鸡 / 牛 / 鱼两个选择器外加一个按钮这是 Agent 生成的 A2UI 表单操作选烤 鸡点 Get Recipe客户端调用 MCP 工具get_recipe_a2ui结果右侧渲染出一张菜谱卡Zesty Herb Grilled Chicken Breast带菜品图、4.8 分评分、12 min cook 烹饪时长这个示例的巧味在于结构与数据分离界面模板是静态资源a2ui://recipe-card工具调用只返回动态数据updateDataModel模板和数据的对接关系写在工具元数据里{ _meta: { ui: { resourceUri: a2ui://recipe-card, // 静态界面模板地址 mimeType: application/a2uijson } } }用 MCP Inspector 连上服务能看到a2ui://recipe-form和a2ui://recipe-card两个资源以及两个带_meta.ui链接的工具链路一目了然npx modelcontextprotocol/inspectorlatest --web \ --transport sse --server-url http://localhost:8000/sse # 打开 http://localhost:6274 查看常被问到的三个问题Agent 生成的界面安不安全A2UI 发的是声明式数据不是可执行代码客户端只需守住组件白名单目录里登记过什么Agent 才能渲染什么任意代码执行的风险被结构性消除。生产环境还有一条外部 Agent 返回的一切——消息正文、AgentCard 的描述字段——都应按不可信输入做校验和清理防提示注入。我能不能用自己的组件可以。协议采用开放注册表模式把任意现有 UI 组件包括嵌着遗留内容的安全 iframe封装成 A2UI 兼容组件接上它的数据绑定与事件系统即可。想彻底管住 Agent 能生成哪些元素按 定义自己的组件目录 写一份目录就行。生态上能接到哪里传输层兼容 A2A 与 AG-UI 协议。跑npx create-ag-ui-applatest可以为 ADK、LangGraph、CrewAI 等框架快速脚手架再挂上 A2UI 渲染。配套的可视化构建工具 tools/composer/ 支持拖拽搭界面、导出 A2UI JSON 直接粘进 Agent 提示词。渲染器方面renderers/ 下已有 Web 核心库web_core、Lit、React、Angular仓库里还有 Dart 与 Swift 实现同一份 A2UI JSON 可以在多端原生渲染。A2UI 适合谁场景对照与新手常见坑适合不适合Agent 需要按对话现场生成表单预约、审批、问卷一次性静态页面直接写原生更快同一套 UI 逻辑跨 Web 与移动端复用同一 JSON 多端渲染需要像素级定制视觉且没有扩展预算在 MCP 应用、Agent 框架中嵌入交互界面毫秒级实时交互如在线游戏主循环要求Agent 只能碰白名单组件的企业安全诉求客户端完全无法注册任何组件的场景新手最常撞上的坑浏览器首启报ERR_CONNECTION_REFUSED网页比 Python Agent 启动快的时序问题等几秒刷新即可uv: command not found先装uv并确认 Python 3.10界面不更新、日志提示缺 Key用echo $GEMINI_API_KEY确认 Key 已导出且有效5173 端口被占用dev server 会自动换下一个可用端口以终端打印的实际 URL 为准版本混淆当前稳定版是 v0.9.1v1.0 是候选版v0.8 已列为遗留写代码前先翻 docs/public/specification/ 对应版本的规范收尾与 A2UI 学习资源如果你的产品需要 Agent 产出表单、卡片或仪表盘值得先拿预订餐厅 demo 试一遍再决定要不要把 A2UI 接进自己的业务。官方文档docs/public/概念、规范、指南都在里面5 分钟快速上手docs/public/quickstart.md本文演示的完整文档版Agent 示例合集samples/agent/adk/含餐厅预订、自定义组件等可运行示例各框架渲染器renderers/web_core、Lit、React、Angular 源码与测试可视化构建工具tools/composer/拖拽生成 A2UI JSON贡献指南CONTRIBUTING.md想参与渲染器开发从这里入手【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
