GenUI：当 AI 不只生成内容，还生成完整用户体验

引言

传统的 AI Agent 交互以聊天为主——用户输入文字，AI 返回文字。这种方式虽然通用，但在进度反馈、表单校验、多步任务流程等场景下，表达力和有效性都存在明显局限。

GenUI（Generative UI） 提出了一种新范式：AI 模型不仅生成内容，还动态生成完整的用户界面——表单、进度条、确认卡片、数据看板，甚至是交互式应用。

一句话概括：

GenUI = LLM 输出 → 结构化 UI 描述 → 客户端实时渲染为交互界面

纯文本 Agent 的痛点

以「买火车票」为例，看看纯文本 Agent 的典型问题：

问题	表现
信息密度低	AI 输出大段自然语言，用户需要从中提取关键信息
输入模糊	用户用自然语言描述需求，AI 容易误解（"帮我买明天去上海的票"——哪个站？什么时间？几等座？）
流程断裂	多步骤操作仅靠自然语言难以连贯，每一步都需要重新确认

GenUI 的解决方案是：在需要时精准渲染针对特定任务的用户界面——收集结构化且经过验证的输入，以真实的 UI 展示进度和中间结果，并根据计划的变化动态调整界面。

技术架构

核心数据流

Agent 层（LLM 推理）
  ↓ 生成结构化 UI 描述（如 A2UI JSON）
传输层（AG-UI 协议）
  ↓ 流式传递 UI 消息
渲染层（Flutter / React / Vue / iOS / Android / HarmonyOS）
  ↓ 映射到客户端组件、状态、事件
用户交互 → 状态回传 Agent → 闭环

关键协议

在 GenUI 的技术栈中，有几个重要的协议值得关注：

A2UI（Agent to User Interface）
Google 提出的声明式 GenUI 协议，用于结构化表达界面。同维度的协议还有 Open-JSON-UI（OpenAI）和 MCP-UI（Microsoft + Shopify）。

AG-UI（Agent User Interaction Protocol）
CopilotKit 提出的用户界面与 Agent 通信协议，规范了事件交换、会话管理、推理、共享状态、工具调用等。

端到端数据流

整个流程可以分为以下阶段：

1. Server Stream：服务端通过 SSE（Server-Sent Events）发送 JSON 流
2. Client Buffering：客户端解析并缓冲消息
3. Render Signal：服务端发送 beginRendering 信号
4. Client-Side Rendering：客户端递归渲染组件树
5. User Interaction：用户与 UI 交互
6. Event Handling：客户端构造 userAction payload 回传
7. Dynamic Updates：服务端处理并发送更新消息，动态更新 UI

三种实现模式

1. 静态 GenUI

Agent 仅选择要显示的预定义组件并用数据填充。最简单，适合固定模板的场景。

2. 声明式 GenUI

Agent 返回使用结构化的 UI 规范（卡片、列表、表单、小组件），前端根据自身的约束和样式进行渲染。

代表项目：

• AGenUI：跨平台原生 A2UI 渲染 SDK
• OpenTiny GenUI-SDK：Vue 生态 GenUI 集成

3. 开放式 GenUI

Agent 返回完整的 UI 表面（如 HTML/iframe），代表项目为 MCP Apps。

适用场景分析

✅ 适合使用 GenUI 的场景

• 个性化推荐体验：根据用户偏好动态生成推荐卡片
• 跨端界面一致性：一套 UI 描述，多端渲染
• 高频变化页面：数据驱动的仪表盘、实时监控面板

❌ 不适合使用 GenUI 的场景

• 交互长期稳定的页面：静态内容页面用传统前端更高效
• 强审计与强合规场景：生成式 UI 的可审计性较弱
• 可预测流程：固定流程用传统表单更可靠

生态与工具链

项目	说明	链接
Flutter GenUI	Flutter 官方 GenUI SDK	GitHub
AGenUI	跨平台原生 A2UI 渲染 SDK	GitHub
OpenTiny GenUI-SDK	Vue 生态 GenUI 集成	文档
A2UI Agent SDK	Python Agent 端集成	PyPI
CopilotKit A2UI Starter	SDK 集成文档与示例	文档
Vercel json-render	社区 Generative UI 框架	GitHub
AG2 A2UIAgent	AG2 生态的 A2UI 原生 Agent 集成	文档

总结

GenUI 代表了 AI 交互的一个重要演进方向：从「AI 生成文字」到「AI 生成体验」。随着 A2UI、AG-UI 等协议的成熟，以及各大框架（Flutter、React、Vue）的 GenUI SDK 逐步完善，这种技术正在从概念走向生产实践。

对于前端开发者而言，GenUI 不是要取代传统前端，而是在特定场景下提供了更灵活的选择——让 AI 能够根据上下文动态生成最合适的交互界面，而不是让用户去适应固定的 UI 模式。

---

参考资料

• Google A2UI 介绍
• CopilotKit GenUI 指南
• 三大 Agent-UI 协议深度剖析