A2UI把 AI 的 JSON 变成可点击的界面【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2uiA2UI 是 Google 等发起的开源项目解决一个问题AI 代理如何跨过信任边界把可交互的 UI 安全地交到用户手里。它让代理输出声明式 JSON 描述界面客户端用原生组件库渲染全程不执行任意代码。你一说「订桌」AI 回你一份 JSON 组件清单官方的餐厅助手 demo 是最好的入口。你说「帮我订一张两人桌」agent 不再回一段文字而是流式回传一串 A2UI 消息客户端边收边渲染出订座表单。消息走 A2A、SSE 这类通道传输agent 和客户端彻底解耦。截图里的 Epicure 餐厅应用就是那个客户端餐厅列表、订座表单、确认页全是 LLM 现场生成源码里没有一行硬编码页面。偷看 agent 返回的报文大概是这样的{updateComponents: {components: [ {id: date-picker, component: DateTimeInput, value: {path: /reservation/date}}, {id: submit-btn, component: Button, action: {event: {name: confirm_booking}}} ]}}注意这是数据不是代码。渲染器把 Button 映射成自己的原生按钮action 事件在用户点击时回流给 agent——生成与交互的闭环到这里闭合了。不让 LLM 画嵌套树邻接列表的平铺技巧让 LLM 一次生成深度嵌套的 JSON错一层整个结构就废还想流式发送更难。A2UI 的答案是平铺组件存成带 ID 的扁平列表父子关系靠 ID 引用表达这就是组件模型里的邻接列表adjacency list。agent 想改一个按钮只发那个组件的增量更新即可不用重写整棵树结构再和状态分离输入框的值用 JSON Pointer 路径绑定数据一变界面自动跟随。这个设计直接换来渐进式渲染流里每一行消息到哪儿界面就长到哪儿用户看到的是屏幕逐块搭起来而不是盯着转圈等待。机制细节在 docs/public/concepts/components.md建议花十分钟读完它解释了为什么扁平列表比嵌套树更适合 AI 生成 UI 的 JSON 协议。客户端白名单决定 AI 能用哪些组件A2UI 协议里有一条硬性的安全线客户端预先定义一份可信组件目录catalog比如 Card、Button、TextFieldagent 只能点选目录里的组件不能自创。也就是说agent 最坏的情况是「排错版」而不是「注入代码」。官方给这个设计的说法是像数据一样安全像代码一样有表现力。想接自己的组件也有正规入口注册一个 Smart Wrapper把任何现成 UI——包括套着沙箱的 iframe——挂进 A2UI 的数据绑定和事件系统信任策略写在你自己的组件逻辑里。完整规范见 specification/v0_9/docs/a2ui_protocol.md。一份 payload 多套框架跨平台渲染怎么跑agent 发出去的同一份 A2UI JSON 不挑客户端Lit、React、Angular、Flutter 都能原生渲染出同一个订座表单样式各自跟随平台的设计语言。不想装环境的人可以先用仓库里的 A2UI Composer 可视化编辑器生成一段 JSON粘进任何 agent 的 prompt 里感受格式。仓库已有多套渲染器实现renderers/目录下是 Angular、Lit、React 与 web_core另有 Dart 和 Swift 的核心库。组件目录能搭出什么下面的画廊是最直接的答案。5 分钟把第一个 AI 生成的界面跑起来不用先看懂全部再动手先把 demo 跑起来回头读文档会快很多。完整步骤在 docs/public/quickstart.mdgit clone https://gitcode.com/GitHub_Trending/a2/a2ui cd a2ui export GEMINI_API_KEYyour_key cd samples/client/lit yarn install yarn demo:restaurant浏览器打开 localhost:5173输入「Find Italian restaurants near me」半分钟看到第一张 LLM 现画的界面再试试「Book a table for 2」看表单生成「What are your hours?」看同一个 agent 换一套布局。项目目前处于早期预览阶段v0.9.1 协议稳定、v1.0 候选版在打磨——协议定型前的窗口期正是上手把玩的时机。【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 A2UI：把 AI 的 JSON 变成可点击的界面
A2UI把 AI 的 JSON 变成可点击的界面【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2uiA2UI 是 Google 等发起的开源项目解决一个问题AI 代理如何跨过信任边界把可交互的 UI 安全地交到用户手里。它让代理输出声明式 JSON 描述界面客户端用原生组件库渲染全程不执行任意代码。你一说「订桌」AI 回你一份 JSON 组件清单官方的餐厅助手 demo 是最好的入口。你说「帮我订一张两人桌」agent 不再回一段文字而是流式回传一串 A2UI 消息客户端边收边渲染出订座表单。消息走 A2A、SSE 这类通道传输agent 和客户端彻底解耦。截图里的 Epicure 餐厅应用就是那个客户端餐厅列表、订座表单、确认页全是 LLM 现场生成源码里没有一行硬编码页面。偷看 agent 返回的报文大概是这样的{updateComponents: {components: [ {id: date-picker, component: DateTimeInput, value: {path: /reservation/date}}, {id: submit-btn, component: Button, action: {event: {name: confirm_booking}}} ]}}注意这是数据不是代码。渲染器把 Button 映射成自己的原生按钮action 事件在用户点击时回流给 agent——生成与交互的闭环到这里闭合了。不让 LLM 画嵌套树邻接列表的平铺技巧让 LLM 一次生成深度嵌套的 JSON错一层整个结构就废还想流式发送更难。A2UI 的答案是平铺组件存成带 ID 的扁平列表父子关系靠 ID 引用表达这就是组件模型里的邻接列表adjacency list。agent 想改一个按钮只发那个组件的增量更新即可不用重写整棵树结构再和状态分离输入框的值用 JSON Pointer 路径绑定数据一变界面自动跟随。这个设计直接换来渐进式渲染流里每一行消息到哪儿界面就长到哪儿用户看到的是屏幕逐块搭起来而不是盯着转圈等待。机制细节在 docs/public/concepts/components.md建议花十分钟读完它解释了为什么扁平列表比嵌套树更适合 AI 生成 UI 的 JSON 协议。客户端白名单决定 AI 能用哪些组件A2UI 协议里有一条硬性的安全线客户端预先定义一份可信组件目录catalog比如 Card、Button、TextFieldagent 只能点选目录里的组件不能自创。也就是说agent 最坏的情况是「排错版」而不是「注入代码」。官方给这个设计的说法是像数据一样安全像代码一样有表现力。想接自己的组件也有正规入口注册一个 Smart Wrapper把任何现成 UI——包括套着沙箱的 iframe——挂进 A2UI 的数据绑定和事件系统信任策略写在你自己的组件逻辑里。完整规范见 specification/v0_9/docs/a2ui_protocol.md。一份 payload 多套框架跨平台渲染怎么跑agent 发出去的同一份 A2UI JSON 不挑客户端Lit、React、Angular、Flutter 都能原生渲染出同一个订座表单样式各自跟随平台的设计语言。不想装环境的人可以先用仓库里的 A2UI Composer 可视化编辑器生成一段 JSON粘进任何 agent 的 prompt 里感受格式。仓库已有多套渲染器实现renderers/目录下是 Angular、Lit、React 与 web_core另有 Dart 和 Swift 的核心库。组件目录能搭出什么下面的画廊是最直接的答案。5 分钟把第一个 AI 生成的界面跑起来不用先看懂全部再动手先把 demo 跑起来回头读文档会快很多。完整步骤在 docs/public/quickstart.mdgit clone https://gitcode.com/GitHub_Trending/a2/a2ui cd a2ui export GEMINI_API_KEYyour_key cd samples/client/lit yarn install yarn demo:restaurant浏览器打开 localhost:5173输入「Find Italian restaurants near me」半分钟看到第一张 LLM 现画的界面再试试「Book a table for 2」看表单生成「What are your hours?」看同一个 agent 换一套布局。项目目前处于早期预览阶段v0.9.1 协议稳定、v1.0 候选版在打磨——协议定型前的窗口期正是上手把玩的时机。【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考