CopilotKit：给应用加上 AI 助手的全栈工具包-优快云博客

文章目录

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

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 等公司采用。

README区域截图

核心功能

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 功能的团队来说，可以关注一下。