让 Agent 直出 AI 生成 UIA2UI v0.9.1 实践笔记【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2uiAgent 把答案算对了却只能糊成一坨纯文本用户还得自己从字缝里抠字段——这是接过 LLM 应用的人都会撞上的墙。A2UI 是一套 Agent 界面协议AI 生成 UI 的开源方案Agent 输出声明式 JSON 描述界面客户端用自己的原生组件库把它渲染出来。读完这篇你能在本地跑通演示看懂消息从 LLM 到组件的链路并判断该不该用它。A2UI 本地跑通环境准备与最小命令序列跑通官方演示只需要四样东西Node.js 18未启用 Corepack 时先跑corepack enablePython 包管理器 uvuv: command not found就装 uv并确认 Python 3.10Gemini API Key界面迟迟不响应时用echo $GEMINI_API_KEY确认已导出且有效yarn 工作区依赖安装中断就回到仓库根目录重跑yarn install# 克隆仓库 git clone https://gitcode.com/GitHub_Trending/a2/a2ui cd a2ui # 导出 Gemini Key替换成你自己的 export GEMINI_API_KEYyour_key # 启用 yarn 并安装工作区依赖 corepack enable yarn install # 一条命令同时拉起 Python Agent 与 Lit 网页客户端 cd samples/client/lit yarn demo:restaurant浏览器里聊天框上方先浮出一张餐厅列表卡片敲入 Book a table for 2几秒后一张带日期选择器和确认按钮的预订表单从流式消息里长出来——这一屏在源码里找不到一行硬编码下面画廊里全是 LLM 现场生成的界面。A2UI 消息结构拆解一条消息如何变成原生组件把 Agent 想成出施工图纸的设计院客户端是施工队图纸只写此处要一面承重墙、两樘双开门砌法工艺全由施工队自己的标准决定设计院进不了工地。对应到协议里的四个角色渲染画布Surface对话里的一个卡片区域Agent 可寻址的一块画布组件Component按钮、文本、输入框等基本单元数据状态库Data Model应用状态仓库组件按路径绑定数据改数据即改界面组件白名单Catalog客户端预先批准的组件集合Agent 只能从里面挑一条典型的天气卡片消息长这样{ version: v0.9.1, updateComponents: { surfaceId: weather, components: [ { id: title, component: Text, text: # 北京 · 晴, variant: h2 }, { id: temp, component: Text, text: { path: /weather/temp } }, { id: desc, component: Text, text: { path: /weather/summary } } ] } }结构是扁平列表 id 引用组件互指只靠 id无深嵌套增量更新就是往数组里补一个对象——这正是 LLM 训练语料里最常见的 JSON 形态所以它生成起来又快又稳。消息流式到达客户端先缓冲组件定义与数据更新收到渲染信号后才从根节点建树、解析绑定、到注册表查本地实现界面因此可以渐进更新而非整页重画。A2UI MCP 集成实战用文件系统浏览器走通业务闭环换一个不依赖 LLM 的场景samples/community/mcp/a2ui-over-mcp-filesystem/ 把标准 filesystem MCP 工具直接变成可浏览的目录界面。# 进入社区样本目录安装依赖 cd samples/community yarn install # 一条命令同时拉起 MCP 代理与网页端 yarn workspace a2ui-over-mcp-filesystem run dev你操作什么页面加载后当前目录的文件列表已在左侧就位——载荷在挂载时自触发了一次列目录接下来点一个文件夹行或在搜索框输一个 glob 后点搜索系统发生什么每行的按钮触发一条callMcpTool链调 filesystem MCP 工具返回的纯文本被逐行切开、正则提取字段、JMESPath 整形再写进数据模型你看到什么左侧列表刷新一组带图标和大小标注的新行右侧预览栏以 Markdown 显示文件内容界面状态全住在数据模型里当前目录、搜索词、每一行名字、大小、图标、该行该调的工具名各占一个路径点击只触发工具调用并写回这些路径界面跟着重算——客户端没有一行业务代码。调试侧用 MCP Inspector 连上这类社区样本的 MCP 服务Resources 与 Tools 面板里能直接看到a2ui://模板资源和挂在工具上的_meta.ui元数据整条链路一目了然。A2UI 安全边界组件白名单与自定义目录Agent 交出去的永远只是一份图纸进不了客户端的施工现场——那它要是点了一扇白名单上不存在的门呢客户端直接拒收未注册组件渲染不出来任意代码执行的风险被结构挡在门外。注册表是开放的任何现有组件、甚至套着安全 iframe 的遗留内容都能封装成 A2UI 组件也可以定义自己的组件白名单来收紧生成边界 (docs/public/guides/defining-your-own-catalog.md)。传输层兼容 A2A 与 AG-UIMCP 应用可随工具一起携带界面拖拽搭界面并导出 JSON 的可视化构建工具也已就绪 (samples/community/mcp/, tools/composer/)。A2UI 选型判断该不该用与新手三件事最适合 AI 驱动的动态表单与跨端复用。不适合一次性静态页和毫秒级实时交互。uv: command not found环境缺 uv 这个 Python 包管理器 → 安装 uv 并确认 Python 3.10ERR_CONNECTION_REFUSED网页比 Python Agent 启动快纯时序竞争 → 等几秒刷新页面即可不是故障v0.8与v0.9.1字段混用当前稳定版是 v0.9.1v0.8 已列遗留 → 写代码前先查 docs/public/ 里对应版本的规范声明式 JSON 让生成式界面有了可校验的数据契约渲染【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
