### [【开源推荐】CopilotKit：34.8K+ Stars！面向AI Agent与生成式UI的前端技术栈](https://www.willai.cc/article/1657)

**Published:** 2026-06-12T12:46:02

**Author:** hiyoho

**Excerpt:** ⭐ GitHub 34.8K+ Stars · MIT 开源 CopilotKit The Frontend Stack for Agents & Generative UI 📌 项目简介 CopilotKit 是专为 AI Agent 和

⭐ GitHub 34.8K+ Stars · MIT 开源

# CopilotKit

The Frontend Stack for Agents & Generative UI

## 📌 项目简介

CopilotKit 是专为 **AI Agent** 和 **生成式 UI** 打造的前端技术栈，支持 React、Next.js、Angular、Vue、React Native 及 Slack 等多端场景。它不仅是 SDK，更是 **AG-UI 协议** 的发起方，已被 Google、LangChain、AWS、Microsoft 等主流厂商采用。

## 🚀 核心功能

### ① 全场景聊天 UI

完全可定制的聊天界面组件，支持消息流式传输、工具调用可视化、Agent 响应实时渲染，接入仅需几行代码。

### ② 生成式 UI（Generative UI）

Agent 可在运行时根据用户意图动态生成、更新 UI 组件，支持三种模式：静态模式（AG-UI 协议）、声明式模式（A2UI）、开放式模式（MCP Apps）。

### ③ 共享状态层

Agent 和 UI 组件可同时读写同一份状态，实现真正的双向交互——UI 可以驱动 Agent，Agent 也可以更新 UI。

### ④ 人在回路（Human-in-the-Loop）

Agent 执行过程中可暂停，等待用户确认、修改输入后再继续，确保关键操作始终在人的掌控之下。

### ⑤ 自学习 Agent（Beta）

基于人类反馈的持续学习（CLHF）能力，无需微调模型即可通过用户交互自动优化行为，支持按用户偏好个性化适配。

## ⚙️ 安装要求与步骤

### 环境要求

-   Node.js 18+（React/Next.js 项目）
-   一个 LLM API Key（OpenAI / Anthropic / Gemini 等）
-   现有前端项目或新建 Next.js 项目

### ① 快速初始化项目（5分钟内启动）

```
npx copilotkit@latest create
```

按提示输入 LLM 密钥，自动完成项目脚手架搭建。

### ② 安装 Agent 技能包（支持 Claude Code / Cursor / Codex）

```
npx copilotkit@latest skills install
```

可重复运行，随时更新到最新版技能包。

## 💡 典型使用场景

🤖

### AI 聊天助手集成

为现有 SaaS 产品嵌入智能聊天界面，支持流式输出和工具调用展示，用户体验媲美 ChatGPT。

📊

### 动态数据仪表盘

Agent 根据用户问题动态生成图表和可视化组件，用户可与生成的内容实时交互。

🔄

### 跨平台 Agent 应用

同一套 Agent 后端同时支持 Web、移动端和 Slack，无需重复开发，大幅降低维护成本。

## 🌐 AG-UI 协议：Agent 与原生 UI 的桥梁

CopilotKit 是 AG-UI 协议的发起方。该协议定义了 Agent 与工作流如何与用户端应用无缝连接，已被 Google、LangChain、AWS、Microsoft、Mastra、PydanticAI 等主流厂商采用。

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

## ✨ 推荐理由

如果你正在开发 AI Agent 产品，**CopilotKit 几乎是前端层的最佳选择**。它解决了 Agent 与 UI 之间的核心痛点——如何让 LLM 的推理过程优雅地呈现在用户界面上。

最打动我的是它的 **生成式 UI** 能力：Agent 不再只能返回文字，而是可以动态生成真正可交互的 UI 组件。结合 AG-UI 协议，你的 Agent 可以无缝对接任意前端框架。

另外，CopilotKit 对 **人在回路** 的支持也非常完善，这对于企业级应用场景至关重要——让 AI 处理繁琐操作，关键决策点由人确认，既提高效率又保障安全。

**适合人群**：AI 产品前端开发者、SaaS 创业者、企业数字化转型团队。

## 📥 下载地址

[GitHub 仓库](https://github.com/CopilotKit/CopilotKit)  
[官方文档](https://docs.copilotkit.ai)  
[NPM 包](https://www.npmjs.com/package/@copilotkit/react-core)  
[Discord 社区](https://discord.gg/6dffbvGU3D)

**Tags:** AI, AI Agent, AI开源项目, CopilotKit, GitHub, LLM, React, TypeScript, 人工智能, 前端框架

**Categories:** 开源项目

---