企业官网建设流程全解析

A2UI AI生成UI实战：3 条命令跑通，为什么 LLM 生成的界面是安全的

【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui

产品说"让 AI 生成这个表单"，前端却还在手写字段。A2UI 是一套声明式 JSON 协议加渲染器：Agent 产出界面描述，客户端用原生组件画出 AI生成UI，全程无需可执行代码。

A2UI 原理详解：Agent 发的是 JSON 数据，不是代码

想象你手里的电视遥控器：按键发出去的是红外信号，电视只会执行固件里已有的功能，信号钻不进去改电路。A2UI 与之同构——Agent 扮演"遥控器"，发回一份描述"界面长什么样"的 JSON；客户端是"电视"，只执行自己注册过的组件。任意代码执行的风险，在这种结构里天然不存在。

整套协议的名词只有四个：

• Surface：协议为一次交互开出的独立画布，对话流里的一张卡片就是一块表面
• Component：画面上可绘制的最小单元，标题、按钮、输入框都是
• Data Model：状态的唯一来源。组件不存值，只绑定数据路径，数据变了画面跟着变
• Catalog：客户端预先签认的组件清单，Agent 能指认的只有清单内的东西

一条消息本体不长，扁平列表加路径绑定：

{ "version": "v0.9.1", "updateComponents": { "surfaceId": "main", "components": [ { "id": "guests", "component": "TextField", "value": { "path": "/reservation/guests" } } ] } }

消息是流式抵达的。客户端先缓冲定义与数据，等渲染信号到了，再从根节点向上拼出组件树、解出路径绑定、到本地组件表里查实现。正因为消息体是"扁平列表 + ID 引用"，增量补丁就能生效，界面随补丁渐进更新，不必整页重画。

上手：A2UI 入门指南，3 条命令跑通官方演示

前置三样：Node.js 18+（启用 Corepack）、Python 包管理器uv、一个 Gemini API Key。然后：

git clone https://gitcode.com/GitHub_Trending/a2/a2ui && cd a2ui export GEMINI_API_KEY="your_key" corepack enable && yarn install cd samples/client/lit && yarn demo:restaurant

跑完打开http://localhost:5173，输入 "Book a table for 2"，几秒后出现带日期选择器和确认按钮的预订表单。这些界面源码里都没有，全是 LLM 现产 A2UI 消息、由客户端画出来的。

案例：MCP UI 从表单到菜谱卡片的完整闭环

samples/community/mcp/a2ui-over-mcp-recipe/里有一个"按口味生成菜谱卡"的 MCP 工具，闭环只有三步：左侧是 Agent 生成的 A2UI 表单，选烹饪方式和蛋白质；点击 Get Recipe，客户端调起 MCP 工具get_recipe_a2ui；工具返回 A2UI JSON，一张带图片、评分、烹饪时长的菜谱卡当场渲染出来。

这个示例的巧思是模板与数据分离：静态界面模板作为 MCP 资源存放在a2ui://recipe-card，工具调用只通过updateDataModel回传动态数据。工具描述上挂着_meta.ui元数据（resourceUri加mimeType），指明客户端去哪取模板，取回后缓存复用。整条链路在 MCP Inspector 里一眼可见，模板资源与工具元数据清清楚楚。

🧩 落地 A2UI 前要回答的三个问题

Q1：Agent 跑偏了怎么办？

前提只有一条：它发的是数据，不是代码。客户端只需校验消息里的组件是否在白名单内，无论 JSON 怎么变，都变不出可执行代码。同时，外部 Agent 回传的一切——消息、AgentCard 描述字段等——一律按不可信输入对待，先校验和清理再渲染，防住提示注入。

Q2：组件不够用怎么办？

注册表是开放的。手头现成的组件，包括包着遗留内容的安全 iframe，都能封装成 A2UI 兼容组件，接进数据绑定与事件体系。想收紧 Agent 可产出的元素范围，就定义自己的组件目录，做法见 docs/public/guides/defining-your-own-catalog.md。

Q3：怎么接进现有框架？

传输层与 A2A、AG-UI 协议互通。npx create-ag-ui-app@latest一条命令为 ADK、LangGraph、CrewAI 等脚手架建项，再挂上 A2UI 渲染即可。不想手写 JSON，就用 A2UI Composer 拖拽搭界面，导出的 A2UI JSON 可直接粘进 Agent 提示词。渲染器一端，web_core、Lit、React、Angular 加上 Dart 与 Swift 已就位，一份 JSON 被多端原生消费。

A2UI 适合与不适合的场景：一张对照表看门道

常见坑，按"现象 → 原因 → 处理"记：

• 浏览器首启报ERR_CONNECTION_REFUSED→ 网页端比 Python Agent 起得快，时序竞争 → 稍等几秒再刷新，页面即恢复
• 提示uv: command not found→ 未装uv或 Python 环境偏低 → 先安装uv并确认 3.10+
• 界面始终不更新 →GEMINI_API_KEY未导出或 Key 失效 →echo $GEMINI_API_KEY核实后重新导出
• 写协议时版本混用 → 项目并存三代：v0.9.1 为当前稳定版，v1.0 是候选版，v0.8 已归为遗留 → 动手前先读 docs/public/ 对应版本的规范

资源入口：A2UI 教程与官方文档

• 协议概念、消息参考与版本规范：docs/public/
• 跑通第一个演示的入门文档：docs/public/quickstart.md
• Agent 示例合集（预约、自定义组件等）：samples/agent/adk/
• 多端渲染器源码：renderers/
• 可视化界面构建器：tools/composer/

【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui