主题
生成式 UI
将你的 CrewAI 智能体的工作渲染为实时 React 组件，覆盖从作者控制到智能体自主生成的完整谱系。
超越聊天气泡
生成式 UI 意味着智能体的工作以真实界面呈现，而不仅仅是文本。当你的 Crew 或 Flow 调用工具、更新其状态或对问题推理时，由你决定用户看到什么：进度清单、食谱卡片、图表、完整组装的面板。
CopilotKit 沿一条谱系渲染生成式 UI，从完全由作者控制（你决定每个像素）到智能体自主生成（智能体组装界面）：
| 层级 | 谁决定 UI | CrewAI 机制 |
|---|---|---|
| 受控 | 你 —— 智能体从中挑选的一组固定组件 | useRenderTool、useAgent、推理 |
| 声明式 | 智能体 —— 从你的组件目录组装界面 | A2UI |
| 开放式 | 外部工具/服务器生成界面 | MCP 工具 |
各层级可自由组合；单个应用通常会混合使用它们。
受控
组件归你所有。智能体选择展示哪些组件以及使用什么数据。这是最可预测的层级，也是大多数应用的起点。
工具渲染
智能体在后端调用工具。你在前端用 useRenderTool 注册一个匹配的组件，CopilotKit 便会渲染它，并在参数到达时流式传入。
tsx
"use client";
import { useRenderTool } from "@copilotkit/react-core/v2";
import { z } from "zod";
useRenderTool({
name: "generate_recipe",
parameters: z.object({
title: z.string(),
ingredients: z.array(z.string()),
}),
render: ({ args }) => <RecipeCard title={args.title} ingredients={args.ingredients} />,
});NOTE
useRenderTool 渲染工具调用。当工具还需要在浏览器中运行代码时，请使用 useFrontendTool（一个 handler，可选带 render）。
完整演练请参见 基于工具的生成式 UI，包括参数流式传入时的渐进式渲染；对于由你的 Crew 或 Flow 在服务器端执行的工具，请参见 后端工具渲染。
状态渲染
与其对单个工具调用作出反应，不如在智能体的状态变化时渲染它。这是多步骤工作的正确模式：用 useAgent 读取智能体的工作状态，然后按你的喜好绘制它。
tsx
"use client";
import { useAgent } from "@copilotkit/react-core/v2";
function TaskProgress() {
const { agent } = useAgent({ agentId: "task_runner" });
const steps = agent?.state?.steps ?? [];
return <StepList steps={steps} />;
}从 Flow 流式输出状态请参见 智能体化生成式 UI；从 UI 编辑该状态请参见 共享状态。
推理
当模型在回答前进行推理时，这些思考会自动渲染在聊天中。无需编写组件。请参见 推理。
声明式
智能体不只是挑选组件：它通过组合你定义的目录中的构建块来组装界面。组件仍归你所有（智能体只能使用你目录中的内容），但布局归智能体所有。
这是 A2UI。你在服务商一侧注册一个目录：
tsx
<CopilotKit runtimeUrl="/api/copilotkit" agent="assistant" a2ui={{ catalog }}>
{/* ... */}
</CopilotKit>随后智能体基于该目录构建 surface —— 既可以动态构建（由它根据对话设计布局），也可以基于固定 schema 构建、由你的后端填充数据。关于这两种模式以及错误恢复，参见 A2UI。
开放式
在最远端，surface 完全在你的应用之外产生。对 CrewAI 而言，这通过 MCP 实现：智能体所连接的 MCP 服务器提供的工具，会像后端工具一样在聊天中渲染为工具调用。这是约束最少、也最难以预测的一层。
MCP 工具调用会以标准的工具调用 UI 呈现 —— 用 useRenderTool 像渲染其他任何工具一样渲染它们。完全由智能体自创的“MCP App” surface 还是一项新兴能力；当前状态参见 CopilotKit 文档。