A2UI完整指南如何让AI代理直接生成交互式界面【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui在聊天框输入预订一张两人位几秒后界面里出现一张预订卡片日期选择器、时间输入框和一个确认按钮。A2UI是一个让AI代理通过声明式JSON说UI的开放标准——代理负责描述界面客户端用自己的原生组件渲染它。它是怎么做到的跟着一份JSON数据走一遍用餐厅示例讲机制。你在网页里输入订位这条消息发给 samples/agent/adk/restaurant_finder/ 里的Python代理代理把对话转发给Gemini。LLM返回三组A2UI消息createSurface开一块画布updateComponents声明一组扁平的组件列表Text、DateTimeInput、Button用ID互相引用updateDataModel把预订日期和人数写入数据模型。消息经A2A协议流式送达客户端renderers/lit/ 里的Lit渲染器把每个组件名映射成本地Web组件并解析数据绑定。你点击确认按钮后客户端把事件名和当前数据打包成userAction回传给代理代理再顺着原来的流继续更新界面。看图时重点看服务端与客户端之间的下半部分第5步是UI操作回流到代理第9步是服务器增量消息触发界面重建。它能做什么、不能做什么先看官方组件目录能渲染出什么能生成基本目录里的18个组件Button、Card、Text、TextField、DateTimeInput、Slider、Tabs等附36份可直接阅读的示例JSON。不能执行任意代码A2UI是声明式数据格式代理只能请求客户端目录内的组件这是安全上的有意取舍。能多平台渲染同一份JSON在React、Lit、AngularWeb和FlutterGenUI SDK上均为稳定支持。需条件宿主应用必须是这些框架之一SwiftUI与Jetpack Compose渲染器还在路线图上。能增量更新组件列表是扁平结构代理可边生成边推送界面渐进渲染。有限制当前正式版是v0.9.1处于早期公开预览v1.0只是候选版规格仍可能变动。样式由客户端决定外观继承宿主应用主题服务端可控的样式选项有限A2UI不是完整的样式系统。实机体验零配置10分钟从零到出效果前置条件Node.js 18启用Corepack、Python的uv、一个Gemini API key。git clone https://gitcode.com/GitHub_Trending/a2/a2ui cd a2ui export GEMINI_API_KEY你的keycorepack enable yarn installcd samples/client/lit yarn demo:restaurantyarn demo:restaurant会同时启动Python代理和Web客户端。最常见的一个坑浏览器打开后显示ERR_CONNECTION_REFUSED——这是前端先于代理启动的已知竞态等几秒刷新页面即可遇到uv: command not found则先安装uv。成功后你会看到浏览器打开 http://localhost:5173聊天框输入Book a table for 2界面出现一张预订表单日期选择器、人数输入和Confirm Reservation按钮。这个界面没有写在应用源码里是Gemini运行时生成的。挑个场景试试给前端工程师把现有React应用里AI只回纯文本的部分换成A2UI渲染。按 docs/public/guides/client-setup.md 接入React渲染器代理输出的界面会直接使用你应用的组件样式不再是一个隔离的iframe。给产品经理打开 tools/composer/ 的可视化编辑器拖组件拼出一张卡片就能得到可直接粘贴进代理提示词里的A2UI JSON不用写代码。给数据分析师基本目录的36个示例覆盖了表单、仪表板与数据网格见 specification/v0_9_1/catalogs/basic/examples/可以让代理基于查询结果直接生成可筛选、可钻取的界面。资源导航快速上手5分钟demodocs/public/quickstart.md代理端核心模块Python SDKagent_sdks/python/渲染器集合renderers/基本目录定义specification/v0_9_1/catalogs/basic/catalog.json代理示例samples/agent/adk/restaurant_finder/跑通demo之后你可以先试试如果换成自己维护的目录能给代理的组件词汇表加进哪几类新组件【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 A2UI完整指南：如何让AI代理直接生成交互式界面
A2UI完整指南如何让AI代理直接生成交互式界面【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui在聊天框输入预订一张两人位几秒后界面里出现一张预订卡片日期选择器、时间输入框和一个确认按钮。A2UI是一个让AI代理通过声明式JSON说UI的开放标准——代理负责描述界面客户端用自己的原生组件渲染它。它是怎么做到的跟着一份JSON数据走一遍用餐厅示例讲机制。你在网页里输入订位这条消息发给 samples/agent/adk/restaurant_finder/ 里的Python代理代理把对话转发给Gemini。LLM返回三组A2UI消息createSurface开一块画布updateComponents声明一组扁平的组件列表Text、DateTimeInput、Button用ID互相引用updateDataModel把预订日期和人数写入数据模型。消息经A2A协议流式送达客户端renderers/lit/ 里的Lit渲染器把每个组件名映射成本地Web组件并解析数据绑定。你点击确认按钮后客户端把事件名和当前数据打包成userAction回传给代理代理再顺着原来的流继续更新界面。看图时重点看服务端与客户端之间的下半部分第5步是UI操作回流到代理第9步是服务器增量消息触发界面重建。它能做什么、不能做什么先看官方组件目录能渲染出什么能生成基本目录里的18个组件Button、Card、Text、TextField、DateTimeInput、Slider、Tabs等附36份可直接阅读的示例JSON。不能执行任意代码A2UI是声明式数据格式代理只能请求客户端目录内的组件这是安全上的有意取舍。能多平台渲染同一份JSON在React、Lit、AngularWeb和FlutterGenUI SDK上均为稳定支持。需条件宿主应用必须是这些框架之一SwiftUI与Jetpack Compose渲染器还在路线图上。能增量更新组件列表是扁平结构代理可边生成边推送界面渐进渲染。有限制当前正式版是v0.9.1处于早期公开预览v1.0只是候选版规格仍可能变动。样式由客户端决定外观继承宿主应用主题服务端可控的样式选项有限A2UI不是完整的样式系统。实机体验零配置10分钟从零到出效果前置条件Node.js 18启用Corepack、Python的uv、一个Gemini API key。git clone https://gitcode.com/GitHub_Trending/a2/a2ui cd a2ui export GEMINI_API_KEY你的keycorepack enable yarn installcd samples/client/lit yarn demo:restaurantyarn demo:restaurant会同时启动Python代理和Web客户端。最常见的一个坑浏览器打开后显示ERR_CONNECTION_REFUSED——这是前端先于代理启动的已知竞态等几秒刷新页面即可遇到uv: command not found则先安装uv。成功后你会看到浏览器打开 http://localhost:5173聊天框输入Book a table for 2界面出现一张预订表单日期选择器、人数输入和Confirm Reservation按钮。这个界面没有写在应用源码里是Gemini运行时生成的。挑个场景试试给前端工程师把现有React应用里AI只回纯文本的部分换成A2UI渲染。按 docs/public/guides/client-setup.md 接入React渲染器代理输出的界面会直接使用你应用的组件样式不再是一个隔离的iframe。给产品经理打开 tools/composer/ 的可视化编辑器拖组件拼出一张卡片就能得到可直接粘贴进代理提示词里的A2UI JSON不用写代码。给数据分析师基本目录的36个示例覆盖了表单、仪表板与数据网格见 specification/v0_9_1/catalogs/basic/examples/可以让代理基于查询结果直接生成可筛选、可钻取的界面。资源导航快速上手5分钟demodocs/public/quickstart.md代理端核心模块Python SDKagent_sdks/python/渲染器集合renderers/基本目录定义specification/v0_9_1/catalogs/basic/catalog.json代理示例samples/agent/adk/restaurant_finder/跑通demo之后你可以先试试如果换成自己维护的目录能给代理的组件词汇表加进哪几类新组件【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考