尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
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),仅供参考
RELATED

相关推荐

Res2Net图像分类实战:基于PyTorch的多尺度特征提升模型精度

Res2Net图像分类实战:基于PyTorch的多尺度特征提升模型精度

1. 项目概述与核心需求解析1.1 这个项目到底解决什么问题做图像分类的读者应该都有这种感觉:从LeNet、VGG一路用过来,ResNet几乎成了大家的“默认基线”。残差连接解决了深层网络难训练的问题,但有一个点始终没有完美处理——多尺度特征的表达…

📅 2026/9/16 20:39:21
Hister MCP完整指南:给AI助手配一块私有长期记忆

Hister MCP完整指南:给AI助手配一块私有长期记忆

Hister MCP完整指南:给AI助手配一块私有长期记忆 【免费下载链接】hister Your own search engine 项目地址: https://gitcode.com/GitHub_Trending/hi/hister AI助手很聪明,但"失忆"是它最大的短板——它不知道你上周读过哪篇文档&…

📅 2026/9/16 20:39:21
Claude Code 配 TaoToken:整合 DeepSeek-V4

Claude Code 配 TaoToken:整合 DeepSeek-V4

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📅 2026/9/16 20:34:21
MORE NEWS

更多资讯

📰

SkyPilot 优先级调度与抢占实战:利用 Kubernetes PriorityClass 实现高优任务抢占

SkyPilot 优先级调度与抢占实战:利用 Kubernetes PriorityClass 实现高优任务抢占 【免费下载链接】skypilot The AI Compute Platform for frontier teams. SkyPilot turns fragmented AI compute into one AI supercomputer, so frontier AI teams build custom i…

📰

x5sec滑块逆向实战:slidedata参数分析与自动化过码方案设计

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

文件夹同步与自动化定时备份:工具选型与实操指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

VidBee:把 1000+ 网站视频离线保存成能搜索的本地媒体库

VidBee:把 1000 网站视频离线保存成能搜索的本地媒体库 【免费下载链接】VidBee Download video and audio from YouTube , TikTok , Twitter , Instagram , Facebook , Twitch , Bilibili , and 1000 sites—or import local media. Create searchable transcripts…

📰

打造自己的Obsidian配置同步工具:从需求分析到落地的完整实践

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

javac 报 NoClassDefFoundError?TaoToken 这样给 Codex 配 Base URL 查 Welcome.java 类名

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬