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

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

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

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

## 生成式 UI 如何工作

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

用户输入或上下文触发：可以是文本指令、语音命令，或诸如用户行为、应用状态等上下文数据。- AI 推理：模型解析输入，以理解用户的意图。- 界面生成：系统根据意图编排或直接生成定制的 UI 元素。- 渲染与执行：使用前端框架（如 React）渲染 UI，并动态连接到业务逻辑或 API。其中也包括自适应的界面更新 adaptive UI，根据不断变化的用户需求来调整界面。

关键要素

## Agent 协议和框架

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

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

目前主流的协议包括：

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

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

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

用来“写/跑 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 解决 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 继续执行下一步