CopilotKit 是 agent 应用的前端层。多数 agent 框架活在后端,而 CopilotKit 回答它们留下的问题:用户到底怎么看到并操纵这个 agent?它提供 React、Angular、React Native 组件(聊天、侧边栏、生成式 UI),加一个把它们连到你 agent 后端的 runtime,而且它是把 agent 到 UI 通讯标准化的 AG-UI 协议的发起方。值得越过 README 去看的,是理解它做什么、相对你的 agent 框架已经做了什么,以及底下那个开放内核的现实。

它到底给你什么

各部件拼成一个栈:

  • UI 组件(CopilotChat、CopilotSidebar),流式呈现消息、工具调用和 agent 响应,完全可定制。
  • 生成式 UI:agent 能在运行时根据状态和意图渲染并更新 UI 组件。
  • 共享状态:一个 agent 和 UI 都能读写、保持同步的双向层。
  • 人在环:agent 能暂停等用户输入、确认或编辑,再继续。
  • AG-UI 协议:被 LangGraph、CrewAI、Mastra、PydanticAI 采纳的标准,使一个 agent 后端能驱动 React、Angular、Slack 或 Teams。

心智模型是:你的 agent 逻辑留在 LangGraph 或 CrewAI;CopilotKit 是把它变成用户能触达的界面的那部分。

安装

npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";

export default function App() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <CopilotSidebar defaultOpen />
      {/* 你的应用 */}
    </CopilotKit>
  );
}

runtime 在 Node 上经 Express 或 Hono 运行,包装多个模型 provider,并有 LangGraph 中间件。截至 2026-06,它每一两天发一个 patch(v1.59.x 线)。

适合与不适合

适合:用 React 或 Angular 构建面向用户的 agent 产品、想要聊天 UI、生成式 UI 和人在环而不想自己造这层的团队,尤其后端是 LangGraph 或 CrewAI 时。不太适合:纯后端或 CLI 的 agent(你不需要前端栈),或只要一个极简聊天框、轻量库就够。而且它的 bundle 很重,对体积敏感的应用要在意(见下面的坑)。

横向对比

项目层次Stars(2026-06)
CopilotKit/CopilotKit前端栈 + runtime,agent UI~35k
vercel/ai模型 SDK 抽象~25k
assistant-ui/assistant-uiReact 聊天 UI 库~11k
langchain-ai/langchain后端 agent 框架~139k

vercel/ai 是更轻、没有 UI 组件栈的 SDK;assistant-ui 是 UI 优先、没有 agent runtime 或共享状态;LangChain 是后端,CopilotKit 与之互补而非竞争。CopilotKit 的独特押注是做完整前端栈加 AG-UI 标准。

issue 里的坑

快速发版节奏在开放 issue 里表现为集成上的锋利边角:

  • 发布的包带了 workspace:* 协议引用,破坏 pnpm 安装(#4919、#4911),是个值得锁版本规避的打包回归。
  • A2UI 生成式 UI 上下文可能不论是否使用都向每次 agent 运行注入约 30KB 元数据(#5369),@copilotkit/react-core 被报告给生产 bundle 加约 15MB(#4893)。
  • 边界情况:启用生成式 UI 时 useFrontendTool 的工具被静默丢弃(#4952),默认多路由传输下人在环可能静默失败(#4953)。

主线是:能力很广,代价是 bundle 体积和一个快速移动的 API：升级偶尔破坏安装或悄悄丢功能。锁版本,升级后测试 HITL 和生成式 UI 路径。

开放内核的现实

直说为好:MIT 许可的仓库给你 runtime 和 React/Angular/Vue 组件,而 CopilotKit Inc. 另卖一个云和企业版(持久化、按用户适配、分析、从反馈学习)。这是个正常的开放内核模式,但在你把生产假设建立在它上面之前,先弄清你采用的是哪一半。

FAQ

CopilotKit 免费吗? 核心免费:MIT 许可的仓库给你 runtime 和 React、Angular、Vue 组件。CopilotKit Cloud 和企业版是另外的付费档。

CopilotKit 用来做什么? 构建 agent 应用的前端:聊天和侧边栏 UI、生成式 UI、agent 与界面间的共享状态、人在环,覆盖 React、Angular、React Native,同一个 agent 后端还能出现在 Slack 和 Microsoft Teams 里。

CopilotKit 支持 LangGraph 和 CrewAI 吗? 支持。CopilotKit 是 AG-UI 协议的发起方,LangGraph、CrewAI、Mastra、PydanticAI 都已采纳,使一个 agent 后端能驱动它的 UI。

怎么安装 CopilotKit? 跑 npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime,然后把应用包进指向你 runtime URL 的 CopilotKit provider。

相关阅读

这些 UI 所坐落的后端编排,可看 TauricResearch/TradingAgents 里的多 agent 模式,它展示了 CopilotKit 所集成的那种 LangGraph 风格。