企业官网建设流程全解析

让 AI 代理直接"画"出界面：A2UI 从概念到跑通的完整指南

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

让 AI 帮你订餐厅时，回你的不再是几行文字，而是一个能选日期、选人数、直接点确认的预订表单；让它管待办、看数据，回复同样是可点击、可交互的界面。这个效果的背后是 A2UI（Agent-to-User Interface）——一个开源的 AI 生成界面框架：代理用 JSON 描述界面，客户端用自己的原生组件把它渲染出来。

A2UI 是什么：代理"说界面"，客户端负责画

一句话定位：A2UI 是一套让 Agent 交互式 UI 成为可能的开源标准加配套库。代理发送声明式 JSON，描述界面的"意图"；客户端的 A2UI 渲染器解析之后，把抽象组件（如type: 'text-field'）映射成本地组件库里的真实控件。整个链路不执行任何代理生成的代码——产出物像数据一样可审查，又像组件一样有表现力。

图中展示了完整链路：服务端以 SSE 流式下发 JSON，客户端缓冲消息、构建组件树并解析数据绑定；用户点击按钮产生的 userAction 再通过独立消息回传给代理，触发下一轮动态更新。

三个核心能力，决定了它能做什么

理解了这条链路，再看 A2UI 的设计取向就很清楚了，它主要围绕三件事展开。

• 对 LLM 友好、可增量更新：UI 是带 ID 引用的扁平组件列表，大模型容易逐步生成，支持边生成边渲染，后续只需更新对话中新变化的部分。
• 信任组件目录（Catalog）保证安全：客户端维护一份预先审核过的组件目录（Card、Button、TextField 等），代理只能请求渲染目录内的组件。安全边界握在客户端手里，而不是依赖代理的"自觉"。
• 框架无关、一份 JSON 多端渲染：界面结构与实现解耦，同一份 A2UI 载荷可以在不同框架的客户端上各自渲染成原生控件。

航班状态、任务卡片、餐厅推荐——上图这些界面都来自同一套基础组件目录（Basic Catalog）的不同组合。

5 分钟跑通：本地启动餐厅预订演示

概念看多了不如跑一遍。🍜 A2UI 内置了一个端到端的餐厅预订演示：基于 ADK 的 Python 代理 + Lit 网页客户端。前置条件是 Node.js 18+（开启 Corepack）、Python 包管理器 uv、一个 Gemini API 密钥。

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

最后一条命令会同时拉起代理和客户端，浏览器打开 http://localhost:5173 后输入 "Book a table for 2"，模型会现场生成一张预订表单。注意界面上的餐厅列表、预订流程、确认页——这些都不是源码里写死的，而是模型按 A2UI 格式现编的。

生态与扩展：支持哪些平台渲染器？

跑通 demo 只是起点，可扩展性才是 A2UI 作为开源 UI 生成框架的长期价值。

• 渲染器矩阵：仓库自带 Lit、React、Angular 渲染器，以及框架无关的核心层 web_core；Flutter 侧通过 Flutter Gen UI SDK 的 genui_a2a 包渲染 A2UI 载荷，路线图里还列有 Jetpack Compose、SwiftUI 等目标。
• 自定义组件：扩展 catalog 定义，或注册一个 "Smart Wrapper"，把服务端类型映射到你自己的客户端实现——从原生控件到安全的 iframe 容器都可以接入。
• 主题定制：完整的主题系统可自定义颜色、字体、间距，让生成的界面贴合品牌规范。
• 免安装可视化工具 Composer：在浏览器里组合出界面并导出 A2UI JSON，直接粘进任何代理的提示词里。

它能帮你解决什么：三个应用启发

生态之外，A2UI 真正回答的问题是"代理该以什么形态交付信息"。官方文档归纳了三类典型场景，很适合拿来对照自己的业务。

• 动态表单与数据采集：代理根据对话上下文即时生成表单（日期选择、滑块、输入框），不必为每个场景预先开发界面。
• 远程子代理：编排型代理把任务交给远端的专业代理，后者的 UI 载荷直接嵌进主对话窗口渲染。
• 自适应工作流：企业代理按用户的问题即时生成审批看板或数据可视化。

下一步：先跑通，再深挖

如果你打算动手，第一步就是照上文"5 分钟跑通"一节把餐厅预订演示跑起来，输入几个不同指令，观察界面如何随意图变化。想深入时，这几个入口够用：

• Python 代理 SDK 与核心库：a2ui_agent / a2ui_core 的源码与文档，自建代理时可参考其消息生成方式。
• 餐厅预订完整示例：从代理指令到客户端的端到端实现。
• 官方文档与指南：客户端接入、自定义 catalog、主题定制都有专文。

如果之后要写自己的代理，官方指南给出的起点是pip install google-adk加adk create my_agent，再按 agent-development 指南把文本回复逐步升级为 A2UI JSON。

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