A2UI 快速上手完整指南让 AI Agent 自动生成界面的开源协议【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui你想让 AI 应用拥有真正的交互界面却不想为前端开发再雇一个人、再排一个季度的期A2UIAgent to User Interface为此而生它是一套开放标准加配套库让 AI Agent 直接说 UI——Agent 输出一段描述界面意图的声明式 JSON你的客户端用自己的原生组件把它渲染出来。下面这份指南带你从原理到跑通示例完整走一遍 A2UI 的核心链路。A2UI 的核心主张只有一句话Agent 生成的界面要像数据一样安全又像代码一样 expressive表达力强。A2UI 能为你解决什么问题A2UI 不是一种 UI 框架而是一个界面传输协议。Agent 负责生成客户端负责渲染中间靠 JSON 消息流动。拆开看它给你提供了四层能力声明式 JSON 消息替代不可信代码让 LLM 直接生成 HTML/JavaScript 塞进 iframe是安全审查的噩梦。A2UI 把界面变成纯数据一条createSurface创建画布updateComponents描述组件updateDataModel填充状态。客户端不执行任何远程代码只解析 JSON 并映射到本地组件。协议细节可以顺着 specification/ 目录逐版本v0.8、v0.9、v1.0查看。客户端组件目录Catalog安全边界由你掌控客户端应用维护一份可信组件清单Agent 只能请求渲染目录里存在的组件Card、Button、TextField 等无法凭空注入任意内容。目录本身也是声明式的 JSON官方基础目录在 specification/v1_0/catalogs/basic/你还能按 自定义目录指南 定义自己的组件集把信任阶梯写进自己的业务里。扁平组件列表 数据绑定为 LLM 和流式渲染设计组件用扁平列表加 ID 引用来表达层级而不是嵌套树。这种结构让 LLM 更容易逐条增量生成也让客户端可以边收边渲染、局部更新。数据绑定通过 JSON Pointer 路径如/reservation/date把组件和状态解耦Agent 更新数据后界面自动响应。概念详解见 docs/public/concepts/。一套 JSON多端渲染同一条 Agent 响应可以在 Lit、React、AngularWeb和 Flutter移动/桌面/Web上渲染Swift 渲染器也已提供核心实现。renderers/ 目录里每个渲染器都是独立工程完整渲染器清单 还列出了社区贡献的版本。一条真实链路餐厅查找器是怎么跑起来的仓库里最能说明问题的示例是餐厅查找与订座 Agentsamples/agent/adk/restaurant_finder/它是官方 Quickstart 的主角。整条链路是这样的你输入什么在 Lit 客户端里输入Book a table for 2或Find me an Italian restaurant。项目如何处理Python 侧的 ADK Agent 收到消息后把对话交给 Gemini由模型生成 A2UI JSON 消息流再通过 A2A 协议流式回传给客户端。生成的消息大致长这样v0.9.1{ version: v0.9.1, createSurface: { surfaceId: main, catalogId: .../basic/catalog.json } } { version: v0.9.1, updateComponents: { surfaceId: main, components: [ { id: header, component: Text, text: # Book Your Table, variant: h1 }, { id: date-picker, component: DateTimeInput, value: { path: /reservation/date }, enableDate: true }, { id: submit-btn, component: Button, child: submit-text, action: { event: { name: confirm_booking } } } ] } } { version: v0.9.1, updateDataModel: { surfaceId: main, path: /reservation, value: { date: 2025-12-15, time: 19:00, guests: 2 } } }你最终得到什么渲染器解析这些消息用原生组件画出一张订座表单填好日期、时间、人数你点Confirm后用户操作被打包成userAction消息回传 AgentAgent 再流式推送下一轮更新。整个过程中餐厅列表、订座流程、确认页面全部由 LLM 现场生成客户端源码里没有任何硬编码的界面。注意一个容易忽略的细节界面的长什么样由客户端目录决定Agent 只能决定用哪些组件、填什么数据。所以换个渲染器同一份 JSON 会呈现出完全不同的原生风格。三步跑通示例你只要做这几件事以 Lit 客户端为例准备环境Node.js 18开启 Corepack、Python 包管理器 uv、一个 Gemini API Key。克隆并启动git clone https://gitcode.com/GitHub_Trending/a2/a2ui cd a2ui export GEMINI_API_KEYyour_gemini_api_key corepack enable yarn install cd samples/client/lit yarn demo:restaurantdemo:restaurant会同时拉起 Python Agent等价于在 samples/agent/adk/restaurant_finder/ 下执行uv run .和 Lit 客户端浏览器打开http://localhost:5173即可。换句话试试把Find Italian restaurants near me换成任意需求观察不同意图如何映射到不同的界面布局。更完整的分步说明在 Quickstart 文档Agent 侧开发见 Agent 开发指南。不想装环境仓库里的 A2UI Composer 是一个可视化编辑器用自然语言描述就能生成 A2UI JSON再粘贴进任意 Agent 的提示词里。过来人视角设计与避坑首屏报ERR_CONNECTION_REFUSED不用慌。Web 客户端往往比 Python Agent 先启动完这是已知的竞态等几秒刷新即可。端口被占用会自动顺延。5173 被占用时 dev server 会换下一个端口以终端实际打印的 URL 为准。API Key 报错先自查echo $GEMINI_API_KEY确认已导出且用的是有效的 Gemini Key。生产环境把外部 Agent 当不可信输入。示例的 README 安全声明 写得很直白外部 Agent 的字段、UI 定义、数据流都可能携带注入或伪造内容务必做输入清洗、CSP、嵌入内容隔离。A2UI 的目录机制降低了风险面但没有取消你的验证责任。别把它当成完整前端框架。A2UI 刻意不追求强大的样式系统——样式归客户端所有Agent 只描述结构、状态与交互意图。如果你的场景需要像素级视觉控制那应该是自定义目录 自定义组件的路子而不是指望协议本身。调试时可以从两个方向入手用浏览器开发者工具观察 SSE 消息流逐条对照 消息参考或对照 specification/v1_0/test/cases/ 里的协议测试用例理解每条消息的合法形态。生态与走向A2UI 目前是早期公开预览生产可用的版本是 v0.9.1v1.0 规范已是发布候选v0.8 作为遗留版本继续保留。路线图 的方向大致有四条规范走向 v1.0 稳定、补齐 SwiftUI 与 Jetpack Compose 官方渲染器、增加 REST 等传输方式、接入更多 Agent 框架Genkit、LangGraph 等。社区侧已经有 React Native、Android Compose、跨平台原生等第三方渲染器在跟进。它也在往 MCP 生态延伸MCP Apps 集成指南 演示了让 MCP 服务返回 A2UI 界面的玩法。接下来你可以做把yarn demo:restaurant真正跑一遍然后只改 Agent 提示词观察界面如何随之变化——这是理解 A2UI 最快的方式。按 自定义目录指南 给自己业务定一份最小目录体会信任边界由你掌控的含义。读 贡献指南挑一个渲染器或示例贡献起来项目采用 Apache 2.0 许可社区正缺客户端渲染器方向的参与。协议已经把Agent 说界面这件事标准化了剩下的一步是你把手里的第一个 Agent 接上去。跑起来看看。【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/18 22:34:53 · 阅读 1.2k A2UI 快速上手完整指南：让 AI Agent 自动生成界面的开源协议
A2UI 快速上手完整指南让 AI Agent 自动生成界面的开源协议【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui你想让 AI 应用拥有真正的交互界面却不想为前端开发再雇一个人、再排一个季度的期A2UIAgent to User Interface为此而生它是一套开放标准加配套库让 AI Agent 直接说 UI——Agent 输出一段描述界面意图的声明式 JSON你的客户端用自己的原生组件把它渲染出来。下面这份指南带你从原理到跑通示例完整走一遍 A2UI 的核心链路。A2UI 的核心主张只有一句话Agent 生成的界面要像数据一样安全又像代码一样 expressive表达力强。A2UI 能为你解决什么问题A2UI 不是一种 UI 框架而是一个界面传输协议。Agent 负责生成客户端负责渲染中间靠 JSON 消息流动。拆开看它给你提供了四层能力声明式 JSON 消息替代不可信代码让 LLM 直接生成 HTML/JavaScript 塞进 iframe是安全审查的噩梦。A2UI 把界面变成纯数据一条createSurface创建画布updateComponents描述组件updateDataModel填充状态。客户端不执行任何远程代码只解析 JSON 并映射到本地组件。协议细节可以顺着 specification/ 目录逐版本v0.8、v0.9、v1.0查看。客户端组件目录Catalog安全边界由你掌控客户端应用维护一份可信组件清单Agent 只能请求渲染目录里存在的组件Card、Button、TextField 等无法凭空注入任意内容。目录本身也是声明式的 JSON官方基础目录在 specification/v1_0/catalogs/basic/你还能按 自定义目录指南 定义自己的组件集把信任阶梯写进自己的业务里。扁平组件列表 数据绑定为 LLM 和流式渲染设计组件用扁平列表加 ID 引用来表达层级而不是嵌套树。这种结构让 LLM 更容易逐条增量生成也让客户端可以边收边渲染、局部更新。数据绑定通过 JSON Pointer 路径如/reservation/date把组件和状态解耦Agent 更新数据后界面自动响应。概念详解见 docs/public/concepts/。一套 JSON多端渲染同一条 Agent 响应可以在 Lit、React、AngularWeb和 Flutter移动/桌面/Web上渲染Swift 渲染器也已提供核心实现。renderers/ 目录里每个渲染器都是独立工程完整渲染器清单 还列出了社区贡献的版本。一条真实链路餐厅查找器是怎么跑起来的仓库里最能说明问题的示例是餐厅查找与订座 Agentsamples/agent/adk/restaurant_finder/它是官方 Quickstart 的主角。整条链路是这样的你输入什么在 Lit 客户端里输入Book a table for 2或Find me an Italian restaurant。项目如何处理Python 侧的 ADK Agent 收到消息后把对话交给 Gemini由模型生成 A2UI JSON 消息流再通过 A2A 协议流式回传给客户端。生成的消息大致长这样v0.9.1{ version: v0.9.1, createSurface: { surfaceId: main, catalogId: .../basic/catalog.json } } { version: v0.9.1, updateComponents: { surfaceId: main, components: [ { id: header, component: Text, text: # Book Your Table, variant: h1 }, { id: date-picker, component: DateTimeInput, value: { path: /reservation/date }, enableDate: true }, { id: submit-btn, component: Button, child: submit-text, action: { event: { name: confirm_booking } } } ] } } { version: v0.9.1, updateDataModel: { surfaceId: main, path: /reservation, value: { date: 2025-12-15, time: 19:00, guests: 2 } } }你最终得到什么渲染器解析这些消息用原生组件画出一张订座表单填好日期、时间、人数你点Confirm后用户操作被打包成userAction消息回传 AgentAgent 再流式推送下一轮更新。整个过程中餐厅列表、订座流程、确认页面全部由 LLM 现场生成客户端源码里没有任何硬编码的界面。注意一个容易忽略的细节界面的长什么样由客户端目录决定Agent 只能决定用哪些组件、填什么数据。所以换个渲染器同一份 JSON 会呈现出完全不同的原生风格。三步跑通示例你只要做这几件事以 Lit 客户端为例准备环境Node.js 18开启 Corepack、Python 包管理器 uv、一个 Gemini API Key。克隆并启动git clone https://gitcode.com/GitHub_Trending/a2/a2ui cd a2ui export GEMINI_API_KEYyour_gemini_api_key corepack enable yarn install cd samples/client/lit yarn demo:restaurantdemo:restaurant会同时拉起 Python Agent等价于在 samples/agent/adk/restaurant_finder/ 下执行uv run .和 Lit 客户端浏览器打开http://localhost:5173即可。换句话试试把Find Italian restaurants near me换成任意需求观察不同意图如何映射到不同的界面布局。更完整的分步说明在 Quickstart 文档Agent 侧开发见 Agent 开发指南。不想装环境仓库里的 A2UI Composer 是一个可视化编辑器用自然语言描述就能生成 A2UI JSON再粘贴进任意 Agent 的提示词里。过来人视角设计与避坑首屏报ERR_CONNECTION_REFUSED不用慌。Web 客户端往往比 Python Agent 先启动完这是已知的竞态等几秒刷新即可。端口被占用会自动顺延。5173 被占用时 dev server 会换下一个端口以终端实际打印的 URL 为准。API Key 报错先自查echo $GEMINI_API_KEY确认已导出且用的是有效的 Gemini Key。生产环境把外部 Agent 当不可信输入。示例的 README 安全声明 写得很直白外部 Agent 的字段、UI 定义、数据流都可能携带注入或伪造内容务必做输入清洗、CSP、嵌入内容隔离。A2UI 的目录机制降低了风险面但没有取消你的验证责任。别把它当成完整前端框架。A2UI 刻意不追求强大的样式系统——样式归客户端所有Agent 只描述结构、状态与交互意图。如果你的场景需要像素级视觉控制那应该是自定义目录 自定义组件的路子而不是指望协议本身。调试时可以从两个方向入手用浏览器开发者工具观察 SSE 消息流逐条对照 消息参考或对照 specification/v1_0/test/cases/ 里的协议测试用例理解每条消息的合法形态。生态与走向A2UI 目前是早期公开预览生产可用的版本是 v0.9.1v1.0 规范已是发布候选v0.8 作为遗留版本继续保留。路线图 的方向大致有四条规范走向 v1.0 稳定、补齐 SwiftUI 与 Jetpack Compose 官方渲染器、增加 REST 等传输方式、接入更多 Agent 框架Genkit、LangGraph 等。社区侧已经有 React Native、Android Compose、跨平台原生等第三方渲染器在跟进。它也在往 MCP 生态延伸MCP Apps 集成指南 演示了让 MCP 服务返回 A2UI 界面的玩法。接下来你可以做把yarn demo:restaurant真正跑一遍然后只改 Agent 提示词观察界面如何随之变化——这是理解 A2UI 最快的方式。按 自定义目录指南 给自己业务定一份最小目录体会信任边界由你掌控的含义。读 贡献指南挑一个渲染器或示例贡献起来项目采用 Apache 2.0 许可社区正缺客户端渲染器方向的参与。协议已经把Agent 说界面这件事标准化了剩下的一步是你把手里的第一个 Agent 接上去。跑起来看看。【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考