企业官网建设流程全解析

5 分钟跑通 A2UI：界面由大模型生成，前端只负责渲染

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

A2UI 是一个用声明式 JSON 描述界面的开源界面构建框架：大模型输出组件树和数据，前端渲染器把它变成 React、Angular、Lit 或 Flutter 的原生组件，适合想给 AI 应用加动态界面、又不想为每个意图手写页面的开发者。本文带你 A2UI 快速上手：先跑通一个示例项目，再讲清它的机制和能力边界。

🍜 一个人做预订助手，界面为什么总做不完

你写了个餐厅预订 agent。用户说"帮我订两人桌"，要弹一张表单；说"找附近的意大利餐厅"，要出一张列表卡片；问"几点打烊"，又得排版一段文字。三种意图、三个界面，Web 一套、App 一套、桌面一套，前端工作量直接翻几倍。

更麻烦的是界面写死了：下一轮对话换个问法，页面没覆盖到就是一片空白。A2UI 想解决的就是这个卡点——界面不再由你预先画好，而是让 agent 按对话现场生成，前端只负责渲染。

📐 把界面当图纸：AI 逻辑和界面怎么解耦

一句话原理：A2UI 把界面当成一张可被任意前端渲染的"图纸"。大模型是画图纸的设计师，客户端是施工队：只按图纸、用自己组件库里的材料施工。这个组件库叫 catalog，本质是一份预先批准的组件白名单（Card、Button、TextField 这类），图纸上没写的东西，agent 造不出来。

数据则是后来搬进屋的家具：agent 单独发一条数据消息，绑在组件上的字段自动刷新，不用重发整个界面。消息走 JSONL 流，一行一个 JSON 对象，常见的三种是：

• createSurface：开一块画布（surface，即一个界面实例）
• updateComponents：放组件，组件靠 id 互相引用
• updateDataModel：按 JSON Pointer 路径往数据模型里写值

因为结构与状态分离，更新只发变化的那一小段；路径变了，绑定的文本或列表自动跟着变，双向绑定说的就是这件事。

仓库 README 对这套设计有一句概括："safe like data, but expressive like code"——像数据一样安全（只是声明式描述，不执行代码），像代码一样有表现力。

🧱 能力盘点：传统做法 vs 用 A2UI

组件不够用时，可以按 open registry 模式注册自定义组件（smart wrapper），把 iframe、图表等现有组件接进同一套绑定和事件系统，沙箱策略由自己定。

🏃 A2UI 怎么用：5 分钟跑通餐厅示例

前置三样：Python + uv、Node.js 18+（含 corepack）、一个 Gemini API key。

git clone https://gitcode.com/GitHub_Trending/a2/a2ui cd a2ui

export GEMINI_API_KEY="你的key" cd samples/client/lit corepack enable && yarn install yarn demo:restaurant

yarn demo:restaurant会同时起 Python agent 和 Web 客户端，打开 http://localhost:5173，试试 "Book a table for 2" 或 "Find Italian restaurants near me"。关键看一点：餐厅列表、预订表单、确认页这些界面，源码里一个都没写——全是大模型现场生成的 JSON 渲染出来的。

agent 端代码在 samples/agent/adk/restaurant_finder/，用 Python ADK + A2A 协议实现，想单独跑就在该目录执行uv run .；完整的 5 分钟指南和排错说明在 docs/public/quickstart.md。

🔍 往哪继续：示例、协议、渲染器

• samples/：A2UI 示例项目集中地，agent 端和 Angular / Lit / React / Flutter 客户端各有一个可跑版本。
• specification/v1_0/docs/a2ui_protocol.md：v1.0 协议规范，消息格式与版本演进的权威定义。
• renderers/：渲染器源码，React、Lit、Angular 和框架无关的 web_core 都在里面，选型先翻这里。

数据绑定（JSON Pointer 路径、动态列表、双向绑定）想抠细节，看 docs/public/concepts/data-binding.md 即可。

回到开头那个"一个意图一个界面"的预订助手：换上 A2UI 之后，你要维护的不再是页面，而是一份 catalog 白名单加 agent 的提示词。现在就可以动手——把上面的 demo 跑起来，问 agent 一个它没准备过的问题，看界面怎么被现场"画"出来。

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