CopilotKit：给应用加上 AI 助手的全栈工具包

CopilotKit 是一个开源的全栈开发框架，用来在应用里快速集成 AI 助手功能。目前在 GitHub 上拿到了 3.4 万多 Star。

项目介绍

CopilotKit 最早是一个 React 库，现在已经发展成了多平台的 Agent 框架。同一套 Agent 逻辑，可以同时驱动 Web 应用、移动端应用和 Slack 工作空间。

这个项目背后还推动了 AG-UI 协议（Agent-User Interaction Protocol），一个用于连接 Agent 工作流和用户界面的开放协议，已经被 Google、LangChain、AWS、Microsoft 等公司采用。

核心功能

CopilotKit 提供了几个关键能力：

聊天界面：一个可定制的聊天组件，支持消息流式输出、工具调用和 Agent 回复。

生成式 UI（Generative UI）：Agent 可以在运行时根据用户意图动态生成和更新界面组件，不限于文本对话。

共享状态：Agent 和 UI 组件可以读写同一份状态数据，实现实时同步。

人在回路（Human-in-the-Loop）：Agent 可以暂停执行，等待用户输入确认或修改后再继续。

后台工具渲染：Agent 调用后端工具后，工具返回的 UI 组件可以直接在前端渲染出来。

技术栈支持

CopilotKit 支持多种前端框架：

• React / Next.js（已正式发布）
• Angular（已支持）
• Vue（已支持）
• React Native（已支持）
• Slack / Microsoft Teams / Discord / Google Chat（Beta 阶段）

Agent 的后端逻辑只需要写一份，AG-UI 协议负责处理不同平台的通信，CopilotKit 负责各框架的 UI 层。

上手使用

最快的方式是用官方 CLI 创建项目：

npx copilotkit@latest create

只需一个 LLM 密钥（OpenAI、Anthropic、Gemini 等都行），五分钟内就能跑起来。

CopilotKit 还提供了 Agent Skills，可以安装到项目目录里，教 Claude Code、Cursor 等编码工具如何使用 CopilotKit：

npx copilotkit@latest skills install

代码层面，用 useAgent Hook 就能连接 Agent：

const { agent } = useAgent({ agentId: "my_agent" });

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

架构设计

CopilotKit 的工作方式是把 UI、Agent 和工具连成一个交互循环。Agent 可以向用户请求输入、渲染界面、维护跨步骤的工作流状态，并且同一套 Agent 部署到 Web、移动端和聊天平台。

这种设计让开发者不需要为不同平台重复编写 Agent 逻辑，前端展示层由各框架的 CopilotKit 包分别处理。

自学习能力

CopilotKit 还在开发一个叫 CLHF（Continuous Learning from Human Feedback）的功能。Agent 可以从用户交互中自动学习，不需要微调模型，通过上下文强化学习和自动提示增强来改进表现。每个用户的行为偏好也可以被单独记录和适应。

这个功能目前处于早期访问阶段，可以通过 CopilotKit Cloud 或自托管部署。

小结

CopilotKit 给前端应用提供了一套比较完整的 AI 集成方案。从聊天界面到生成式 UI，从单平台到多平台，从基本的 Agent 调用到人在回路的工作流，覆盖了构建 AI 应用的常见需求。AG-UI 协议的推进也让它在 Agent 生态里有了更广泛的合作基础。对于想在应用里加 AI 功能的团队来说，可以关注一下。

工作流，覆盖了构建 AI 应用的常见需求。AG-UI 协议的推进也让它在 Agent 生态里有了更广泛的合作基础。对于想在应用里加 AI 功能的团队来说，可以关注一下。