A2UI 完整指南5 分钟让 AI 代理动态生成交互式界面【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui让 AI 代理说一句帮我把明天的订位定下来屏幕里直接出现一张带日期选择、时间选择和确认按钮的表单——不用你切到别的 App也不用再打一段话。这不是提前做好的静态页面而是 AI 当场画出来的界面。做到这一点的就是 A2UIAgent-to-User Interface一个让 AI 代理直接生成、渲染交互式界面的开源框架。它当前稳定版本是 v0.9.1v1.0 规范已处于候选发布阶段。为什么AI 直接生成界面值得要换个角度看这件事界面一旦从纯文本变成可操作的 UI用户体验会有几个实打实的提升。少说多做。文字对话里每个字段都要靠问答一轮轮挤出来表单里点一下、选一下、填一下三步就完事。结果即操作。AI 找到的餐厅、航班、待办事项不再是一段需要你自己抄到别处的描述而是带按钮、带图片、可直接点击的卡片。风格统一。界面是用你应用自己的组件库渲染的视觉上和原生功能没有区别不会出现贴进来一块突兀的外来网页。一句话AI 负责想清楚该给用户看什么你的 App 负责把它长得像自己地画出来。它是怎么工作的一条数据流看懂 A2UIA2UI 的核心是一条闭环数据流拆开看只有四个角色在交接工作AI 生成代理把界面意图写成声明式 JSON——组件有哪些、怎么排列、数据绑在哪里。注意是描述不是可执行代码。消息传输这段 JSON 通过 A2A、AG-UI、SSE 或 WebSocket 等任意通道发往客户端。客户端渲染渲染器Renderer解析 JSON把抽象组件如TextField映射成 App 自己的原生控件然后画出来。事件回传用户点按钮、改输入框客户端打包成userAction事件发回给代理代理再发增量更新界面即时刷新。这个设计带来两个关键好处。第一是安全客户端持有一份可信组件目录CatalogAI 只能点单目录里已有的组件无法执行任意代码。第二是快组件是扁平列表加 ID 引用LLM 可以边生成边输出、边渲染用户不必等整个界面生成完才能看到内容。能力盘点开箱即用的组件与特性不用从零搭轮子A2UI 的基础组件目录specification/ 中可查定义已经提供了 18 种常用控件布局类Row、Column、List、Card、Tabs、Modal、Divider交互类Button、TextField、CheckBox、ChoicePicker、Slider、DateTimeInput内容类Text、Image、Icon、Video、AudioPlayer跨平台能力同样现成。官方渲染器覆盖WebReact、LitWeb Components、Angular均已稳定同一份 A2UI JSON 在三个框架上都能渲染renderers/ 查看完整列表移动端/桌面FlutterGenUI SDK 底层即 A2UI开发侧则有现成的 Python 代理 SDKa2ui-agent-sdk把 A2UI 生成能力直接接进 Google ADK、LangChain 等框架增量更新、主题定制、表达式绑定等特性也都在协议层内置。从零到跑通生成你的第一个界面官方 Quickstart 用餐厅推荐示例串起完整链路一个 Gemini 驱动的 Python ADK 代理 Lit 渲染客户端约 5 分钟能跑起来。前置条件Node.js 18开启 Corepack、uvPython 包管理器、一个 Gemini API Key。第一步获取代码git clone https://gitcode.com/GitHub_Trending/a2/a2ui cd a2ui第二步配置并启动export GEMINI_API_KEY你的_api_key corepack enable yarn install cd samples/client/lit yarn demo:restaurant最后一条命令会同时拉起代理和客户端浏览器打开http://localhost:5173就进入了。试着输入找一家评分高的意餐你会看到 AI 生成的餐厅卡片再输入订明天晚上 7 点界面会直接变成一个可填写的预订表单。它能玩出什么花样三个 AI 能帮你做的事1. 把搜索结果变成可下单的卡片。示例里的餐厅助手会按口味和评分返回带菜品图、星级、人均的卡片卡片上的预订按钮一按代理立刻接住这个动作并推进到确认流程samples/agent/adk/ 中有完整实现。2. 让待办清单活起来。代理生成任务看板后你勾选完成、调整优先级事件实时回传AI 可以据此重新排期、拆分子任务——界面是 AI 的手也是你给它的反馈通道。3. 对话即仪表盘。问一句上个月各渠道转化率代理现场拼出筛选器、图表和明细表你切筛选条件数据随动。官方社区示例里的 Recipe Studio 就是同款思路左边选烹饪方式 蛋白质类型右边即时生成一张菜谱卡。生态与进阶从自定义组件到可视化创作跑通之后进阶路径大致有三条注册自己的组件。组件目录是开放的任何现有控件包括 iframe 容器、遗留模块都可以通过Smart Wrapper注册进 A2UI 的绑定和事件体系沙箱策略由你自己掌控。接入更多平台。除官方渲染器外社区已有 Jetpack Compose、React Native、Lynx、AGenUIiOS/Android/鸿蒙等实现想给新框架写渲染器docs/public/guides/ 里有渲染器开发指南。不写代码先玩起来。项目自带 Composer 可视化工具tools/composer/拖拖拽拽就能产出 A2UI JSON直接粘进你的代理提示词里当范例无需任何安装。现在就可以开始A2UI 把AI 生成界面从概念变成了可以本地跑通的工程。建议的路线按上面的 Quickstart 把餐厅示例跑起来感受完整闭环读一遍官方文档里的概念与规范docs/对照 specification/ 的组件目录想清楚自己业务里哪些界面可以交给 AI 生成动手改示例代理samples/agent/adk/把它的餐厅换成你的场景。项目采用 Apache 2.0 许可欢迎在渲染器、传输层、代理框架支持这些方向上提交贡献。【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 A2UI 完整指南：5 分钟让 AI 代理动态生成交互式界面
A2UI 完整指南5 分钟让 AI 代理动态生成交互式界面【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui让 AI 代理说一句帮我把明天的订位定下来屏幕里直接出现一张带日期选择、时间选择和确认按钮的表单——不用你切到别的 App也不用再打一段话。这不是提前做好的静态页面而是 AI 当场画出来的界面。做到这一点的就是 A2UIAgent-to-User Interface一个让 AI 代理直接生成、渲染交互式界面的开源框架。它当前稳定版本是 v0.9.1v1.0 规范已处于候选发布阶段。为什么AI 直接生成界面值得要换个角度看这件事界面一旦从纯文本变成可操作的 UI用户体验会有几个实打实的提升。少说多做。文字对话里每个字段都要靠问答一轮轮挤出来表单里点一下、选一下、填一下三步就完事。结果即操作。AI 找到的餐厅、航班、待办事项不再是一段需要你自己抄到别处的描述而是带按钮、带图片、可直接点击的卡片。风格统一。界面是用你应用自己的组件库渲染的视觉上和原生功能没有区别不会出现贴进来一块突兀的外来网页。一句话AI 负责想清楚该给用户看什么你的 App 负责把它长得像自己地画出来。它是怎么工作的一条数据流看懂 A2UIA2UI 的核心是一条闭环数据流拆开看只有四个角色在交接工作AI 生成代理把界面意图写成声明式 JSON——组件有哪些、怎么排列、数据绑在哪里。注意是描述不是可执行代码。消息传输这段 JSON 通过 A2A、AG-UI、SSE 或 WebSocket 等任意通道发往客户端。客户端渲染渲染器Renderer解析 JSON把抽象组件如TextField映射成 App 自己的原生控件然后画出来。事件回传用户点按钮、改输入框客户端打包成userAction事件发回给代理代理再发增量更新界面即时刷新。这个设计带来两个关键好处。第一是安全客户端持有一份可信组件目录CatalogAI 只能点单目录里已有的组件无法执行任意代码。第二是快组件是扁平列表加 ID 引用LLM 可以边生成边输出、边渲染用户不必等整个界面生成完才能看到内容。能力盘点开箱即用的组件与特性不用从零搭轮子A2UI 的基础组件目录specification/ 中可查定义已经提供了 18 种常用控件布局类Row、Column、List、Card、Tabs、Modal、Divider交互类Button、TextField、CheckBox、ChoicePicker、Slider、DateTimeInput内容类Text、Image、Icon、Video、AudioPlayer跨平台能力同样现成。官方渲染器覆盖WebReact、LitWeb Components、Angular均已稳定同一份 A2UI JSON 在三个框架上都能渲染renderers/ 查看完整列表移动端/桌面FlutterGenUI SDK 底层即 A2UI开发侧则有现成的 Python 代理 SDKa2ui-agent-sdk把 A2UI 生成能力直接接进 Google ADK、LangChain 等框架增量更新、主题定制、表达式绑定等特性也都在协议层内置。从零到跑通生成你的第一个界面官方 Quickstart 用餐厅推荐示例串起完整链路一个 Gemini 驱动的 Python ADK 代理 Lit 渲染客户端约 5 分钟能跑起来。前置条件Node.js 18开启 Corepack、uvPython 包管理器、一个 Gemini API Key。第一步获取代码git clone https://gitcode.com/GitHub_Trending/a2/a2ui cd a2ui第二步配置并启动export GEMINI_API_KEY你的_api_key corepack enable yarn install cd samples/client/lit yarn demo:restaurant最后一条命令会同时拉起代理和客户端浏览器打开http://localhost:5173就进入了。试着输入找一家评分高的意餐你会看到 AI 生成的餐厅卡片再输入订明天晚上 7 点界面会直接变成一个可填写的预订表单。它能玩出什么花样三个 AI 能帮你做的事1. 把搜索结果变成可下单的卡片。示例里的餐厅助手会按口味和评分返回带菜品图、星级、人均的卡片卡片上的预订按钮一按代理立刻接住这个动作并推进到确认流程samples/agent/adk/ 中有完整实现。2. 让待办清单活起来。代理生成任务看板后你勾选完成、调整优先级事件实时回传AI 可以据此重新排期、拆分子任务——界面是 AI 的手也是你给它的反馈通道。3. 对话即仪表盘。问一句上个月各渠道转化率代理现场拼出筛选器、图表和明细表你切筛选条件数据随动。官方社区示例里的 Recipe Studio 就是同款思路左边选烹饪方式 蛋白质类型右边即时生成一张菜谱卡。生态与进阶从自定义组件到可视化创作跑通之后进阶路径大致有三条注册自己的组件。组件目录是开放的任何现有控件包括 iframe 容器、遗留模块都可以通过Smart Wrapper注册进 A2UI 的绑定和事件体系沙箱策略由你自己掌控。接入更多平台。除官方渲染器外社区已有 Jetpack Compose、React Native、Lynx、AGenUIiOS/Android/鸿蒙等实现想给新框架写渲染器docs/public/guides/ 里有渲染器开发指南。不写代码先玩起来。项目自带 Composer 可视化工具tools/composer/拖拖拽拽就能产出 A2UI JSON直接粘进你的代理提示词里当范例无需任何安装。现在就可以开始A2UI 把AI 生成界面从概念变成了可以本地跑通的工程。建议的路线按上面的 Quickstart 把餐厅示例跑起来感受完整闭环读一遍官方文档里的概念与规范docs/对照 specification/ 的组件目录想清楚自己业务里哪些界面可以交给 AI 生成动手改示例代理samples/agent/adk/把它的餐厅换成你的场景。项目采用 Apache 2.0 许可欢迎在渲染器、传输层、代理框架支持这些方向上提交贡献。【免费下载链接】a2ui项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考