A2UI 实战如何用 JSON 描述界面让 AI Agent 直接生成 UI【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui用户说订一张两人位的桌Agent 没有回一段文字而是把一张预订表单的界面发了过来。A2UI 就是做这件事的开放标准AI Agent 用 JSON 描述界面客户端用自己的原生组件把它渲染出来全程不执行任何一行生成的代码。它到底是什么A2UIAgent-to-User Interface是一套声明式界面描述标准。Agent 输出的是一串 JSON 消息createSurface开一块屏幕updateComponents增删组件updateDataModel改数据。客户端拿到后把抽象组件映射成自己框架的原生控件Lit、Angular、React、Flutter 都能接。它的目标很单一让远程 Agent 有一个安全、跨平台的方式说界面适合想把 AI 生成界面塞进现有应用的团队。A2UI 的三个核心能力组件契约Catalog每块界面都挂在一个 catalog 上这是一个 JSON Schema 文件告诉 Agent 允许使用哪些组件。Agent 的输出要先过 schema 校验不通过就重试或退回纯文本所以它没法在界面上画任意可执行的东西。仓库里现成的 Basic Catalog 包含 Button、Card、TextField 等基础组件上手不用写 schema。数据绑定组件只声明结构数据放在 data model 里两者靠 JSON Pointer 路径RFC 6901一种用路径取 JSON 字段的写法连接。文本组件绑定/user/name后Agent 只发一条updateDataModel改这个路径文字就自动变了不必重发整屏列表用模板加作用域路径按条目渲染增删条目界面自动同步细节见 docs/public/concepts/data-binding.md。多端渲染与工具链同一份 JSON 可以由不同渲染器画出来renderers/ 下有 web_core、Lit、Angular、React、Flutter 等官方实现。不想手写 JSON 的话tools/composer/ 是可视化编辑器用对话生成界面 JSON 再粘进 Agent 提示词tools/inspector/ 能可视化检查客户端收到的消息序列排查绑错字段很方便。走一遍餐厅查找示例samples/agent/adk/restaurant_finder/ 是一个完整闭环按顺序经历五步你在 samples/client/lit/ 的客户端里输入找纽约的意大利餐厅。Python Agent 在 agent.py 里把会话交给 Gemini 并调用get_restaurants工具模型直接吐出 A2UI JSON 消息序列。发出前 Agent 按 catalog schema 校验输出失败自动带错误信息重试一次仍失败就退回文字。渲染器把消息逐条翻译成原生组件/restaurants/0/name这类数据路径自动绑定到值。界面实时刷新点预订按钮时confirm事件回传给 Agent继续走确认流程。跑通第一个示例的步骤前置条件Node.js 18、Python 包管理器 uv、一个 Gemini API key。先克隆仓库并设置密钥git clone https://gitcode.com/GitHub_Trending/a2/a2ui cd a2ui export GEMINI_API_KEYyour_key然后进 Lit 客户端目录一条命令装依赖、起 Agent、开浏览器访问 http://localhost:5173cd samples/client/lit yarn install yarn demo:restaurant跑起来后值得翻的三处specification/ 看协议消息与 schema 定义samples/client/ 看 Angular、React、Flutter 等各框架客户端示例renderers/web_core/ 看 Web 渲染器共用的核心逻辑。常见问题与调优手段首启看到ERR_CONNECTION_REFUSED别慌是客户端先于 Agent 启动等几秒刷新即可。5173 端口被占用时 dev server 会自动换端口以终端实际打印的 URL 为准。长列表用模板加作用域路径按条目渲染更新只发改动的路径别整屏重发。排查界面不对时开 tools/inspector/ 逐条看客户端收到的 JSON 消息。模型反复输出非法 JSON 时参考示例的 prompt_builder.py 往提示词里补 schema 示例。生态现状与近期动向当前稳定版是 v0.9.1v1.0 已是 release candidateroadmap 里 SwiftUI 和 Jetpack Compose 渲染器排在 2026 年 Q2samples/community/ 下还有社区贡献的个性化学习、MCP 计算器等完整案例。先把 samples/ 里的餐厅示例跑通、亲眼看一遍消息序列再谈接入自己的应用。【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
A2UI 实战：如何用 JSON 描述界面，让 AI Agent 直接生成 UI
A2UI 实战如何用 JSON 描述界面让 AI Agent 直接生成 UI【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui用户说订一张两人位的桌Agent 没有回一段文字而是把一张预订表单的界面发了过来。A2UI 就是做这件事的开放标准AI Agent 用 JSON 描述界面客户端用自己的原生组件把它渲染出来全程不执行任何一行生成的代码。它到底是什么A2UIAgent-to-User Interface是一套声明式界面描述标准。Agent 输出的是一串 JSON 消息createSurface开一块屏幕updateComponents增删组件updateDataModel改数据。客户端拿到后把抽象组件映射成自己框架的原生控件Lit、Angular、React、Flutter 都能接。它的目标很单一让远程 Agent 有一个安全、跨平台的方式说界面适合想把 AI 生成界面塞进现有应用的团队。A2UI 的三个核心能力组件契约Catalog每块界面都挂在一个 catalog 上这是一个 JSON Schema 文件告诉 Agent 允许使用哪些组件。Agent 的输出要先过 schema 校验不通过就重试或退回纯文本所以它没法在界面上画任意可执行的东西。仓库里现成的 Basic Catalog 包含 Button、Card、TextField 等基础组件上手不用写 schema。数据绑定组件只声明结构数据放在 data model 里两者靠 JSON Pointer 路径RFC 6901一种用路径取 JSON 字段的写法连接。文本组件绑定/user/name后Agent 只发一条updateDataModel改这个路径文字就自动变了不必重发整屏列表用模板加作用域路径按条目渲染增删条目界面自动同步细节见 docs/public/concepts/data-binding.md。多端渲染与工具链同一份 JSON 可以由不同渲染器画出来renderers/ 下有 web_core、Lit、Angular、React、Flutter 等官方实现。不想手写 JSON 的话tools/composer/ 是可视化编辑器用对话生成界面 JSON 再粘进 Agent 提示词tools/inspector/ 能可视化检查客户端收到的消息序列排查绑错字段很方便。走一遍餐厅查找示例samples/agent/adk/restaurant_finder/ 是一个完整闭环按顺序经历五步你在 samples/client/lit/ 的客户端里输入找纽约的意大利餐厅。Python Agent 在 agent.py 里把会话交给 Gemini 并调用get_restaurants工具模型直接吐出 A2UI JSON 消息序列。发出前 Agent 按 catalog schema 校验输出失败自动带错误信息重试一次仍失败就退回文字。渲染器把消息逐条翻译成原生组件/restaurants/0/name这类数据路径自动绑定到值。界面实时刷新点预订按钮时confirm事件回传给 Agent继续走确认流程。跑通第一个示例的步骤前置条件Node.js 18、Python 包管理器 uv、一个 Gemini API key。先克隆仓库并设置密钥git clone https://gitcode.com/GitHub_Trending/a2/a2ui cd a2ui export GEMINI_API_KEYyour_key然后进 Lit 客户端目录一条命令装依赖、起 Agent、开浏览器访问 http://localhost:5173cd samples/client/lit yarn install yarn demo:restaurant跑起来后值得翻的三处specification/ 看协议消息与 schema 定义samples/client/ 看 Angular、React、Flutter 等各框架客户端示例renderers/web_core/ 看 Web 渲染器共用的核心逻辑。常见问题与调优手段首启看到ERR_CONNECTION_REFUSED别慌是客户端先于 Agent 启动等几秒刷新即可。5173 端口被占用时 dev server 会自动换端口以终端实际打印的 URL 为准。长列表用模板加作用域路径按条目渲染更新只发改动的路径别整屏重发。排查界面不对时开 tools/inspector/ 逐条看客户端收到的 JSON 消息。模型反复输出非法 JSON 时参考示例的 prompt_builder.py 往提示词里补 schema 示例。生态现状与近期动向当前稳定版是 v0.9.1v1.0 已是 release candidateroadmap 里 SwiftUI 和 Jetpack Compose 渲染器排在 2026 年 Q2samples/community/ 下还有社区贡献的个性化学习、MCP 计算器等完整案例。先把 samples/ 里的餐厅示例跑通、亲眼看一遍消息序列再谈接入自己的应用。【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考