GenUI：从“文本对话”到“可操作界面”的范式转移

写在前面假如我问你“帮我推荐几双500元以下的跑鞋。”传统AI会回复一段文字“推荐李宁超轻系列价格XXX安踏氢跑系列……”你读完再去电商App搜索、筛选、下单。整个过程在“读—搜—筛”之间反复跳转。但如果AI直接生成一个商品卡片列表呢每一张卡片上都印着鞋子的图片、价格、评分旁边还有“筛选”按钮和“加入购物车”——这就是GenUI正在做的事情。GenUIGenerative UI生成式UI正在重塑大语言模型与人类之间的交互方式。它的目标很简单让AI不再只输出文字而是“画”出用户可以真正操作的界面。一、何为GenUI概念与范式转移从“纯文本对话”到“可操作界面”传统大模型对话主要依赖纯文本输入和输出一旦涉及复杂交互、结构化展示或多轮协作就暴露出明显的体验瓶颈——可读性差、表达形式局限一张折线图能直观展示的趋势用文字描述则冗长且不直观交互闭环断裂用户往往需要经历“阅读回复→理解内容→手动输入→发送”的四步流程。生成式UIGenerative UI是一种创新的人机交互范式在对话过程中AI能够动态生成并实时渲染UI界面让模型不再局限于纯文字输出而是能够“画”出表单、按钮、图表、卡片等丰富的交互组件。用户可以直接在生成的界面中操作操作行为即时反馈回对话上下文驱动模型进行下一轮响应使交互与对话融为一体。用一个例子就能说清楚区别你问AI“展示RNA聚合酶的工作原理”。传统AI输出一大段文字解释。而Generative UI则会生成一个完整动态页面——DNA双螺旋动画、RNA聚合酶沿链移动的可视化、各转录阶段用颜色标注、滑块控制转录速度和回放、一键切换“原核vs真核”对比。你不是在“读”内容而是在“进入”一个小应用与AI共同探索。GenUI vs Vibe Coding谁在“发起设计”这里有必要厘清一个容易被混淆的概念。很多人把GenUI和“Vibe Coding”混为一谈但Nielsen Norman Group给出了一个关键的区分标准谁做出“要生成界面”的决定。Vibe Coding用户主动要求AI构建某个界面或应用“帮我做一个伦敦旅行计划App”。用户发起了设计请求。GenUI用户只是提出了一个目标或问题“帮我规划伦敦旅行”系统自主判断这个场景更适合用交互式界面而非纯文本回复于是主动生成日历选择器、住宿卡片、景点筛选器等交互组件。判断力是GenUI的核心定义动作。通俗地说Vibe Coding是你让AI“画”GenUI是AI自己觉得“用画的方式回答你更好”。为什么GenUI是“必然”而非“可能”学术界的实证数据已经给出了答案。斯坦福大学的研究团队将GenUI与传统纯文本对话UIConvUI进行了系统对比结果表明生成式界面在人类偏好上比纯文本对话高出最多72%并且在多轮对话、信息密集型场景和探索性任务中表现尤为突出。Google Research在2025年11月发布的Generative UI技术进一步印证了这一方向——这不仅是让模型“变得更聪明”而是让AI具备即时生成完整交互界面的能力从而改变AI的“呈现方式”与“交互方式”。二、核心亮点GenUI带来的三大突破1. 以界面重构文字释放信息价值传统AI输出长文本用户需要在“文字矿”中自己挖掘有价值的信息。GenUI用表格、卡片、列表、图表等可视化组件让数据和流程一目了然大大降低了认知负担。实测数据支撑在Gemini 3 GenUI的测试中一个“交互式贷款计算器”代替了600字的文字解释用户用滑块即可实时调整本金、利率和期限决策效率提升了约38%。这是文字无法实现的操作密度。2. 打破“两步交互”实现一站式流转传统模式下用户读完AI回复→理解内容→手动输入下一步指令→发送。GenUI打破了这个断裂的闭环用户在生成的表单中填写、在按钮上点击这些操作即时反馈到对话上下文驱动模型的下一轮回复。交互与对话真正融为一体。3. 让工具调用从“指令翻译”变为“表单填写”当LLM需要调用外部工具但缺少参数时传统做法是文字提示用户补充参数信息——用户需要理解每个参数的含义、类型和格式自行组织输入这种体验生硬且容易出错。GenUI的解决方案是模型自动生成交互式表单收集所需信息。用户只需在表单中填写并提交参数即被正确传递给工具无需理解参数格式、无需翻译需求。4. GenUI vs 传统对话对比一图看懂维度传统对话UIGenUI输出形式纯文本/Markdown交互式组件表单、图表、卡片等用户操作阅读→理解→手动输入点击、选择、滑动、提交操作即指令信息密度文字线性展开需自行“挖掘”可视化呈现一目了然交互闭环断裂需要手动输入下一步闭环操作即时驱动模型工具调用体验文字提示补充参数易出错自动生成表单填写即传递典型痛点复杂信息用文字描述冗长不直观依赖模型输出质量需定义好组件库三、案例体验当GenUI走进真实场景案例1旅行规划助手用户输入“帮我规划下周去东京的行程”。传统AI输出一份包含景点、住宿、交通的文字清单。而LangChain的Agent Chat UI中旅行规划Agent会调用GenUI组件直接渲染出住宿选择界面和餐厅推荐卡片——用户可以在对话中直接筛选酒店、浏览餐厅详情无需跳转外部App。背后的技术逻辑是Agent首先从用户输入中提取location、startDate、endDate、numberOfGuests等字段然后通过工具调用生成UI组件来收集用户偏好。位置是必填项其余为可选项AI会根据对话上下文智能补全默认值。案例2购物助手传统AI购物助手的对话模式是“文字问答”用户问“推荐500元以下的跑鞋”AI列出几款鞋的文字描述。VGV基于Flutter GenUI SDK构建的购物助手完全不同AI直接组装出交互式商品卡片、价格筛选器和品牌选项——每一个组件都是真实的Flutter Widget用户看到的不是一个聊天记录而是一个完整的商品浏览界面。这里最关键的设计是Catalog组件目录开发者预先注册好产品卡片、筛选按钮、轮播图等自定义组件AI只能在Catalog中组合这些组件从而确保生成的UI始终符合品牌设计规范。这种模式让GenUI既灵活又可控。案例3股票交易看板在LangGraph GenUI示例中用户输入“查看我的投资组合”Stockbroker Agent会渲染出一个带有股价走势图、持有数量、盈亏状态的交互式仪表板。用户甚至可以在这个UI中直接完成买入操作——所有交互状态实时回传AI驱动后续响应。案例4交互式数据探索Gemini 3 GenUI在处理比较类问题时尤为出色。用户问“帮我比较这几款手机的续航表现”AI直接生成并排卡片布局每张卡片内嵌滑块可调整测试条件亮度、网络状态数据实时联动刷新。这就是GenUI区别于“静态界面生成”的关键——它不只是画一个界面而是让界面“活”起来与用户进行双向互动。四、上手指南从0开始使用GenUI SDK目前市面上主流的GenUI SDK主要有两条技术路线Flutter生态Google官方推动的A2UI协议和React/Vue生态OpenTiny GenUI SDK、Thesys等。本节以Flutter GenUI SDK为例从零搭建一个完整的GenUI工程。4.1 GenUI SDK的核心架构在动手之前先理解GenUI SDK的设计哲学。GenUI SDK本质上是一个编排层orchestration layer它协调用户、Flutter Widget和AI Agent之间的信息流将基于文本的对话转化为丰富的交互式体验。它的核心工作流程如下Step 1用户发送Prompt用户输入自然语言请求App调用AI Agent同时携带Catalog信息——告诉AI它可以使用哪些Widget来组装UI。Step 2AI生成内容UI描述AI Agent生成回复但它不只输出文字而是通过GenUI SDK提供的工具来描述最适合内容的UI结构以JSON格式返回。Step 3动态渲染UIGenUI SDK接收回复反序列化JSON并在运行时构建对应的Widget。有些是信息展示型组件有些是布局组件有些是可交互组件如滑块、按钮、日期选择器。Step 4交互反馈闭环用户点击按钮、拖动滑块等操作会触发后续请求发送给AgentAgent据此更新UI形成持续迭代的交互循环。这一架构的巧妙之处在于AI不生成Dart代码只生成结构化数据。运行时反序列化确保了安全性同时也让开发者可以完全控制哪些Widget可以被AI使用。4.2 环境准备与依赖配置前置要求Flutter SDK已安装建议stable channelDart版本需3.9-获得Gemini API KeyGoogle AI Studio免费申请基本Flutter知识理解Widget组成和基础状态管理创建新项目并添加依赖flutter create my_genui_app cd my_genui_app flutter pub add genui google_generative_ai4.3 定义Widget Catalog组件目录Catalog是GenUI中最核心的设计约束——它定义了AI可以“使用”哪些UI组件。没有注册到Catalog中的WidgetAI无法生成。这确保了AI生成的界面始终符合品牌规范。import package:genui/genui.dart; import package:flutter/material.dart; // 定义一个简单的产品卡片组件 class ProductCard extends StatelessWidget implements UiComponentMapString, dynamic { final String name; final double price; final String imageUrl; const ProductCard({ required this.name, required this.price, required this.imageUrl, }); override Widget build(BuildContext context) { return Card( child: Column( children: [ Image.network(imageUrl, height: 100), Text(name), Text(\$$price), ], ), ); } // 实现fromJson方法让AI能够通过JSON描述来实例化此组件 static ProductCard fromJson(MapString, dynamic json) { return ProductCard( name: json[name] as String, price: (json[price] as num).toDouble(), imageUrl: json[imageUrl] as String, ); } } // 构建Catalog final catalog Catalog( components: [ CatalogComponent( type: ProductCard, builder: (props) ProductCard.fromJson(props), ), // 可以注册更多组件按钮、筛选器、滑块等 ], );4.4 配置AI Agent并建立ConversationGenUI SDK支持多种AI提供商接入Google Gemini AI快速原型、Firebase AI Logic生产环境、A2UI协议客户端-服务器架构以及自定义适配器。import package:genui/genui.dart; import package:google_generative_ai/google_generative_ai.dart; void setupGenUI() async { // 1. 创建SurfaceController——管理UI的“表面”区域 final surfaceController SurfaceController(catalogs: [catalog]); // 2. 配置传输适配器处理AI与UI之间的消息流 final transportAdapter A2uiTransportAdapter(); transportAdapter.messageStream.listen(surfaceController.handleMessage); // 3. 构建PromptBuilder——定义AI的角色和行为边界 final promptBuilder PromptBuilder.chat( catalog: catalog, instructions: 你是一个智能购物助手。当用户询问商品推荐时请使用ProductCard组件展示结果。 每张卡片应包含商品名称、价格和图片。 , ); // 4. 初始化Gemini模型 final model GenerativeModel( model: gemini-2.5-flash, apiKey: YOUR_GEMINI_API_KEY, systemInstruction: Content.system(promptBuilder.systemPrompt), ); // 5. 创建Conversation——这是GenUI的“大脑” final conversation Conversation( surfaceController: surfaceController, transportAdapter: transportAdapter, ); // 6. 发送用户消息触发UI生成 await conversation.sendMessage( Content.text(推荐几款500元以下的跑步鞋), ); }4.5 在UI中渲染GenUI Surface最后一步在Flutter Widget树中预留一个“Surface”——这是AI生成的UI将要出现的位置class GenUIPage extends StatelessWidget { final SurfaceController surfaceController; const GenUIPage({required this.surfaceController}); override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text(GenUI Demo)), body: GenUiSurface( controller: surfaceController, loadingWidget: const Center(child: CircularProgressIndicator()), errorWidget: (error) Center(child: Text(渲染失败: $error)), ), ); } }4.6 生产环境配置建议GenUI SDK目前仍处于Alpha阶段API稳定性有待社区反馈迭代。在生产环境中部署时以下几点需要特别关注API Key安全管理开发阶段可直接使用google_generative_ai包传入API Key生产环境建议使用Firebase AI Logic让Firebase安全地管理API Key。错误处理由于UI由LLM生成存在“幻觉”风险——AI可能尝试使用Catalog中不存在的组件或属性。必须实现健壮的错误处理和降级UI。定义清晰的边界GenUI应被视为一个协作系统而非自治系统。开发者仍然需要①定义AI可用的Catalog ②审查组件的组合逻辑 ③在真实场景中测试生成的界面。五、展望GenUI生态的未来格局GenUI领域正在快速演进目前呈现出三股主要力量OpenAI Apps SDK专有生态聚焦ChatGPT内部的应用分发和组件渲染。MCP UIModel Context Protocol开源标准追求厂商中立性让工具和组件能在Claude、VS Code等多个AI客户端中通用。Google A2UI高性能跨平台方案基于声明式蓝图在移动端和桌面端原生渲染。无论哪一标准最终成为主流GenUI的崛起已是不可逆转的趋势。用户不想再面对密密麻麻的文字墙——他们想要的是可以直接点击、滑动、填写的可操作界面。Text-only的对话体验或许很快就会被新一代交互范式所取代。而作为开发者我们现在要做的就是打开Editor写下第一行Catalog定义让AI开始在界面上“画”起来。