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

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_KEYyour_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 前要回答的三个问题Q1Agent 跑偏了怎么办前提只有一条它发的是数据不是代码。客户端只需校验消息里的组件是否在白名单内无论 JSON 怎么变都变不出可执行代码。同时外部 Agent 回传的一切——消息、AgentCard 描述字段等——一律按不可信输入对待先校验和清理再渲染防住提示注入。Q2组件不够用怎么办注册表是开放的。手头现成的组件包括包着遗留内容的安全 iframe都能封装成 A2UI 兼容组件接进数据绑定与事件体系。想收紧 Agent 可产出的元素范围就定义自己的组件目录做法见 docs/public/guides/defining-your-own-catalog.md。Q3怎么接进现有框架传输层与 A2A、AG-UI 协议互通。npx create-ag-ui-applatest一条命令为 ADK、LangGraph、CrewAI 等脚手架建项再挂上 A2UI 渲染即可。不想手写 JSON就用 A2UI Composer 拖拽搭界面导出的 A2UI JSON 可直接粘进 Agent 提示词。渲染器一端web_core、Lit、React、Angular 加上 Dart 与 Swift 已就位一份 JSON 被多端原生消费。A2UI 适合与不适合的场景一张对照表看门道适合不适合表单、预约、审批这类随对话变化的动态界面纯视觉、像素级品牌定制且无组件扩展预算同一套界面逻辑在 Web、移动端等多端复用一次性静态页面直接写原生更快往 MCP 应用、各类 Agent 框架里嵌可操作界面毫秒级高频实时交互比如游戏主循环需要约束 Agent只碰核准组件的企业场景客户端环境完全无法注册自定义组件常见坑按现象 → 原因 → 处理记浏览器首启报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.mdAgent 示例合集预约、自定义组件等samples/agent/adk/多端渲染器源码renderers/可视化界面构建器tools/composer/【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考