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、Angular（Web）和Flutter（GenUI 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="你的key"corepack 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分钟demo）：docs/public/quickstart.md
- 代理端核心模块（Python SDK）：agent_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），仅供参考
