CopilotKit：构建 Agent-Native 应用的开源 SDK

CopilotKit 是一个用于构建全栈 Agent 应用的开源 SDK，支持生成式 UI、共享状态管理和人机协作工作流。该项目在 GitHub 上已获得 28.9k stars，是 AG-UI 协议的创始团队，该协议已被 Google、LangChain、AWS、Microsoft 等科技巨头采用。

项目简介

CopilotKit 由 CopilotKit 团队开发和维护，是一个专注于构建 Agent-Native 应用 的 React/Angular SDK。它提供了一套完整的工具链，帮助开发者快速构建具有生成式 UI、智能聊天界面和复杂工作流的 AI 应用。

该项目是 AG-UI Protocol（Agent-User Interaction Protocol） 的发起者和主要维护者，这是一个连接 Agent 工作流与用户应用的开放协议，获得了包括 LangGraph、CrewAI 在内的多个主流 Agent 框架的支持。

核心特性

• Chat UI：基于 React 的聊天界面组件，支持消息流式传输、工具调用和 Agent 响应
• Backend Tool Rendering：允许 Agent 调用后端工具，并在客户端直接渲染返回的 UI 组件
• Generative UI（生成式 UI）：Agent 可根据用户意图和状态动态生成和更新 UI 组件
• Shared State（共享状态）：同步状态层，Agent 和 UI 组件可实时读写共享数据
• Human-in-the-Loop（人机协作）：Agent 可暂停执行，请求用户输入、确认或编辑后继续
• useAgent Hook：全新的 Hook API，基于 AG-UI 协议，提供更精细的 Agent 连接控制

技术栈

• TypeScript (91.8%) - 主要开发语言
• Python (4.0%) - Agent 后端支持
• CSS (2.6%) - 样式系统
• React/Next.js - 前端框架支持
• Angular - 额外的前端框架支持

安装指南

新项目创建

npx copilotkit@latest create -f <framework>

现有项目集成

npx copilotkit@latest init

执行后会自动完成：

• 安装 CopilotKit 核心包
• 配置 Provider、上下文和 Hooks
• 连接 Agent 与 UI，支持流式操作和 UI 渲染
• 部署就绪配置

快速开始

useAgent Hook 使用示例

import { useAgent } from "@copilotkit/react-core";

function MyComponent() {
  // 程序化访问和控制 Agent
  const { agent } = useAgent({ agentId: "my_agent" });

  // 渲染和更新 Agent 状态
  return (
    <div>
      <h1>{agent.state.city}</h1>
      <button onClick={() => agent.setState({ city: "NYC" })}>
        Set City
      </button>
    </div>
  );
}

生成式 UI 示例

CopilotKit 支持三种类型的生成式 UI：

AG-UI 协议

AG-UI（Agent-User Interaction Protocol）是 CopilotKit 发起的开放协议，用于连接 Agent 工作流与用户应用。该协议已获得以下支持：

• Google
• LangChain / LangGraph
• AWS
• Microsoft
• Mastra
• PydanticAI

npx create-ag-ui-app my-agent-app

使用示例

场景 1：智能客服聊天界面

import { CopilotChat } from "@copilotkit/react-ui";

function CustomerSupport() {
  return (
    <CopilotChat
      instructions="你是一个专业的客服助手"
      labels={{
        title: "客服助手",
        initial: "有什么可以帮助您的？",
      }}
    />
  );
}

场景 2：带工具调用的 Agent

const result = await agent.run({
  tools: [
    {
      name: "searchProducts",
      description: "搜索产品",
      handler: async (query) => {
        // 后端搜索逻辑
        return products;
      },
    },
  ],
});

版本信息

• 最新版本：v1.51.4（2026-02-17 发布）
• GitHub Stars：28.9k
• Forks：3.8k
• 贡献者：155 位
• 使用用户：1.5k+

项目链接

• GitHub 仓库：https://github.com/CopilotKit/CopilotKit
• 官方文档：https://docs.copilotkit.ai
• Copilot Cloud：https://cloud.copilotkit.ai
• 在线示例：https://www.copilotkit.ai/examples
• Discord 社区：https://discord.gg/6dffbvGU3D
• AG-UI 协议：https://github.com/ag-ui-protocol/ag-ui

许可证

MIT License