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

写在前面

假如我问你："帮我推荐几双500元以下的跑鞋。"传统AI会回复一段文字："推荐李宁超轻系列，价格XXX；安踏氢跑系列......"你读完，再去电商App搜索、筛选、下单。整个过程在"读---搜---筛"之间反复跳转。

但如果AI直接生成一个商品卡片列表呢？每一张卡片上都印着鞋子的图片、价格、评分，旁边还有"筛选"按钮和"加入购物车"------这就是GenUI正在做的事情。

GenUI（Generative UI，生成式UI），正在重塑大语言模型与人类之间的交互方式。它的目标很简单：让AI不再只输出文字，而是"画"出用户可以真正操作的界面。

一、何为GenUI：概念与范式转移

从"纯文本对话"到"可操作界面"

传统大模型对话主要依赖纯文本输入和输出，一旦涉及复杂交互、结构化展示或多轮协作，就暴露出明显的体验瓶颈------可读性差、表达形式局限，一张折线图能直观展示的趋势，用文字描述则冗长且不直观；交互闭环断裂，用户往往需要经历"阅读回复→理解内容→手动输入→发送"的四步流程。

生成式UI（Generative 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与传统纯文本对话UI（ConvUI）进行了系统对比，结果表明：生成式界面在人类偏好上比纯文本对话高出最多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 传统对话：对比一图看懂

维度	传统对话UI	GenUI
输出形式	纯文本/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 2：AI生成内容+UI描述

AI Agent生成回复，但它不只输出文字，而是通过GenUI SDK提供的工具来描述最适合内容的UI结构（以JSON格式返回）。

Step 3：动态渲染UI

GenUI SDK接收回复，反序列化JSON，并在运行时构建对应的Widget。有些是信息展示型组件，有些是布局组件，有些是可交互组件（如滑块、按钮、日期选择器）。

Step 4：交互反馈闭环

用户点击按钮、拖动滑块等操作会触发后续请求发送给Agent，Agent据此更新UI，形成持续迭代的交互循环。

这一架构的巧妙之处在于：AI不生成Dart代码，只生成结构化数据。运行时反序列化确保了安全性，同时也让开发者可以完全控制哪些Widget可以被AI使用。

4.2 环境准备与依赖配置

前置要求：

Flutter SDK已安装（建议stable channel），Dart版本需3.9+-
获得Gemini API Key（Google AI Studio免费申请）
基本Flutter知识（理解Widget组成和基础状态管理）

创建新项目并添加依赖：

复制代码

flutter create my_genui_app
cd my_genui_app
flutter pub add genui google_generative_ai

Catalog是GenUI中最核心的设计约束------它定义了AI可以"使用"哪些UI组件。没有注册到Catalog中的Widget，AI无法生成。这确保了AI生成的界面始终符合品牌规范。

复制代码

import 'package:genui/genui.dart';
import 'package:flutter/material.dart';

// 定义一个简单的产品卡片组件
class ProductCard extends StatelessWidget implements UiComponent<Map<String, 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(Map<String, 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并建立Conversation

GenUI 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 UI（Model Context Protocol） ：开源标准，追求厂商中立性，让工具和组件能在Claude、VS Code等多个AI客户端中通用。
Google A2UI：高性能跨平台方案，基于声明式蓝图在移动端和桌面端原生渲染。

无论哪一标准最终成为主流，GenUI的崛起已是不可逆转的趋势。用户不想再面对密密麻麻的文字墙------他们想要的是可以直接点击、滑动、填写的可操作界面。Text-only的对话体验，或许很快就会被新一代交互范式所取代。

而作为开发者，我们现在要做的，就是打开Editor，写下第一行Catalog定义，让AI开始在界面上"画"起来。

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

写在前面

一、何为GenUI：概念与范式转移

从"纯文本对话"到"可操作界面"

GenUI vs Vibe Coding：谁在"发起设计"？

为什么GenUI是"必然"而非"可能"

二、核心亮点：GenUI带来的三大突破

1. 以界面重构文字，释放信息价值

2. 打破"两步交互"，实现一站式流转

3. 让工具调用从"指令翻译"变为"表单填写"

4. GenUI vs 传统对话：对比一图看懂

三、案例体验：当GenUI走进真实场景

案例1：旅行规划助手

案例2：购物助手

案例3：股票交易看板

案例4：交互式数据探索

四、上手指南：从0开始使用GenUI SDK

4.1 GenUI SDK的核心架构

4.2 环境准备与依赖配置

4.3 定义Widget Catalog（组件目录）

4.4 配置AI Agent并建立Conversation

4.5 在UI中渲染GenUI Surface

4.6 生产环境配置建议

五、展望：GenUI生态的未来格局