CopilotKit 是构建Agent 原生应用的前端与全栈 SDK，专注于 Generative UI（生成式 UI）、共享状态、人机协作（Human-in-the-Loop）等工作流。它最初是 React 库，现已扩展为连接 Agent 与用户的水平层：同一套 Agent 逻辑可驱动 Web 应用、移动端、Slack、Microsoft Teams 等。

官方是 AG-UI Protocol 的制定者，该协议已被 Google、LangChain、AWS、Microsoft、Mastra、PydanticAI 等广泛采用。

1. 核心能力

功能 说明
Chat UI 可定制聊天界面，支持流式消息、工具调用、Agent 响应
Backend Tool Rendering Agent 调用后端工具后，直接在客户端渲染对应 UI 组件
Generative UI Agent 根据意图与状态动态生成/更新 UI 组件
Shared State Agent 与前端 UI 实时共享、同步状态
Human-in-the-Loop Agent 可暂停执行，请求用户输入、确认或编辑后再继续
Self-Learning (早期访问) 基于用户反馈的持续学习（CLHF），无需微调模型

支持的前端与渠道：

  • React / Next.js（GA）
  • Angular、Vue、React Native
  • Slack、Microsoft Teams
  • Discord / WhatsApp / Telegram 等即将支持

2. 快速开始（5 分钟内跑通）

只需一个 LLM Key（OpenAI、Anthropic、Gemini 等）：

1
npx copilotkit@latest create

或在已有项目中初始化：

1
npx copilotkit@latest init

安装完成后会自动配置核心包、Provider、状态与 Hooks，Agent 与 UI 即可连通。

为编程 Agent 安装 Skills（让 Claude Code、Codex、Cursor 等更懂 CopilotKit）：

1
npx copilotkit@latest skills install

3. 核心概念与架构

CopilotKit 把 UI、Agent、工具 连接成统一交互循环：

  • Agent 可主动向用户索取输入
  • 工具调用可直接渲染 UI
  • 支持跨步骤、跨会话的状态工作流
  • 同一 Agent 可部署到 Web、移动端与聊天平台

AG-UI Protocol 负责 Agent 与用户界面之间的通信协议，CopilotKit 负责各框架的 UI 层实现。

useAgent Hook 示例（直接基于 AG-UI）：

1
2
3
4
5
6
7
8
9
10
const { agent } = useAgent({ agentId: "my_agent" });

return (
  <div>
    <h1>{agent.state.city}</h1>
    <button onClick={() => agent.setState({ city: "NYC" })}>
      Set City
    </button>
  </div>
);

4. Generative UI 三种模式

类型 说明 典型场景
Static GenUI 前端预定义 React 组件，通过 hooks 渲染 天气卡片、股票卡片、任务审批
A2UI（声明式） Agent 输出声明式 JSON，动态渲染 餐厅查找、表单、复杂流程
MCP Apps / Open JSON 开放式 HTML/JS 应用或 JSON，沙箱运行 航班预订、交易模拟器等

官方提供完整 Playground 与示例： https://github.com/CopilotKit/CopilotKit/tree/main/examples/showcases/generative-ui

5. 与主流 Agent 框架集成

仓库 examples/integrations 提供大量开箱即用模板：

  • LangGraph（Python / JS / FastAPI）
  • Mastra
  • CrewAI Flows / Crews
  • LlamaIndex
  • PydanticAI
  • Agno
  • Claude SDK（Python / TypeScript）
  • Microsoft Agent Framework
  • MCP Apps
  • 等等

Canvas 类示例（可视化卡片 + 实时同步 + HITL）也覆盖 LangGraph、LlamaIndex、Mastra、PydanticAI 等。

6. Channels：一套 Agent，多聊天平台

Channels SDK 让已构建的 Agent 直接进入用户日常使用的聊天工具：

  • Slack：线程、工具调用、人机确认直接在频道完成
  • Microsoft Teams：企业场景原生支持

无需重写逻辑，工具、共享状态、HITL 全部复用。

7. 典型示例与 Showcase

仓库 examples 目录包含 50+ 独立 Demo，分类清晰：

Integrations（框架集成模板） Canvas（可视化研究/规划画布） Showcases（完整应用）：

  • Banking（银行业务 + 授权 + Generative UI）
  • Presentation（类 PowerPoint Web 应用）
  • Deep Agents（深度研究助手，规划 + 记忆/文件 + Tavily 搜索）
  • Generative UI Playground
  • 更多真实业务场景

运行某个示例时，进入对应目录按 README 操作即可。

8. 开发与调试

  • Inspector（v1.69+ 重新设计）：本地 Agent 开发可视化，包含 Home、Workbench、Inspect、Playground
  • 支持运行回放、反馈数据、Runtime 传输选择等
  • 官方文档覆盖从入门到高级模式：https://docs.copilotkit.ai

主要包（安装示例）：

1
npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime

还有 @copilotkit/react-native、@copilotkit/vue、@copilotkit/web-inspector 等。

9. Self-Learning 与 Intelligence Platform

通过 Continuous Learning from Human Feedback (CLHF)：

  • 上下文强化学习，无需模型微调
  • 自动提示增强
  • 按用户个性化适应
  • 完整交互历史持久化（含 Generative UI、HITL、共享状态）

目前为早期访问，支持 Cloud 与自托管。

10. 总结与推荐上手路径

CopilotKit 解决的是「Agent 写好了，如何优雅、可靠地交付给用户」这一最后一公里问题，尤其擅长：

  • 带 Generative UI 的对话式应用
  • 需要人机协作的复杂工作流
  • 一套 Agent 多端复用（Web + 移动 + Slack/Teams）

推荐上手步骤：

  1. npx copilotkit@latest create 创建新项目
  2. 阅读官方 Quickstart（React/Next.js）
  3. 尝试一个 Showcase（如 generative-ui 或 deep-agents）
  4. 按需集成 LangGraph / Mastra / CrewAI 等后端
  5. 需要时接入 Channels 或开启 Self-Learning

相关链接：