生成式 UI：框架、协议与实现类型

推荐语

生成式 UI 正在重新定义人机交互，让界面动态适应用户需求，实现真正的个性化体验。

核心内容：
1. 生成式 UI 的工作原理与关键流程
2. Agent 协议与框架的核心作用
3. 主流 Agent UI 框架的对比与应用场景

杨芳贤

53AI创始人/腾讯云(TVP)最具价值专家

生成式 UI 是由 AI 根据用户的上下文、意图和数据，实时动态地创建和调整的用户界面，目标是提供适应用户需求与场景的个性化体验。

Generative UI 的核心是从"设计界面"转变为"设计能够生成界面的系统"。

目前 GenUI 做得比较好的产品：

生成式 UI 如何工作

GenUI 解读意图（来自用户指令、系统状态或历史数据）并生成相应的界面组件。

1. 用户输入或上下文触发：可以是文本指令、语音命令，或诸如用户行为、应用状态等上下文数据。
2. AI 推理：模型解析输入，以理解用户的意图。
3. 界面生成：系统根据意图编排或直接生成定制的 UI 元素。
4. 渲染与执行：使用前端框架（如 React）渲染 UI，并动态连接到业务逻辑或 API。

其中也包括自适应的界面更新 adaptive UI，根据不断变化的用户需求来调整界面。

关键要素

Agent 协议和框架

生成式 UI 的核心是 Agent 驱动的动态界面生成与交互。Agent 是决策核心，其框架定义了能力边界，协议则保障了交互的稳定性与扩展性。

Agent 协议

用来“让不同Agent/组件能互通”的消息/事件/数据格式规范——Agent 之间怎么对话、前后端怎么对话、UI 怎么描述、事件怎么流、用什么传输等等。

目前主流的协议包括：

MCP：“Agent/AI 应用 ↔ 工具/数据”的连接协议

A2A：“Agent 彼此聊天协作”的 agent-to-agent 通信协议

Agent UI 协议

Agent 与 UI 层、上下游系统的 “通信规则”，确保各方数据传递和指令交互的一致性、准确性。

Agent 框架

用来“写/跑 agent 逻辑”的代码库或运行时——编排、多 agent 协作、工具调用、状态/记忆、容错、部署等

• LangChain / LangGraph：面向生产的 agent 编排/运行时与图式工作流。
• AutoGen：多 agent 会话/协作框架。
• CrewAI：多 agent 编排框架。
• Google ADK：Google 的 agent 开发/部署框架。

Agent UI 框架

是界面开发的 “骨架” 与 “能力引擎”，定义了 Agent 如何与 UI 组件联动、如何驱动界面动态生成和交互

Agent UI 框架/SDK

• Vercel AI SDK（含 UI 能力）：更偏“AI 应用开发工具箱”，把工具调用结果映射到前端 UI 的路径很成熟，但它本身不等同“agent 编排框架”。
• assistant-ui / CopilotKit / Tambo / Crayon：主要解决“怎么把 agent 交互做成产品级 UI”，属于 UI SDK/前端框架范畴。
• Chainlit / Streamlit / Gradio：更像“快速把 agent 跑起来给人用”的 UI 容器/原型框架。
• Open WebUI^[3]：成品外壳/平台型 UI。

生成式 UI 的实现类型

• CSR（Client-Side Rendering）：客户端渲染模式下，LLM 输出 JSON 数据，前端根据预定义映射表决定渲染哪个组件。逻辑位于客户端。
• RSC（React Server Streaming）：在服务器模式下，LLM 在服务器生成 React 组件并流式传输到前端渲染结果。客户端无需将数据映射到组件，只需接收 UI 树。

Q&A

MCP Apps 和 A2UI 有什么不同？

• MCP 解决 Agent 如何调用外部工具/数据源的问题，属于 Agent ↔ 工具 的连接层。
• A2UI 让 agent 输出声明式 JSON UI 意图，客户端用本地组件库渲染，属于UI 描述/DSL 层。

两者可以同时存在：一个用于“工具自带的交互面板”，一个用于“Agent 临场生成的跨端界面”。

Agent skills 和 A2UI 有什么不同？

• Agent skill：让 agent “会做事”（把任务变成可复用、可执行、可观测的能力单元）。
• A2UI：让 agent “会表达界面”（把 UI 变成可控的声明式意图，让客户端拼装）。

Skill = 行为逻辑 + UI 合约（A2UI 风格）+ 事件回路

把 A2UI 当作某些 skill 的“输出/交互壳”：

• skill 负责：识别意图 → 拉数据/调用工具 → 产出“候选方案/状态”
• A2UI 负责：把候选方案变成 UI（对比卡、筛选器、Stepper、确认面板）
• 用户点选/提交 → 事件回流 → skill 继续执行下一步