263 lines
12 KiB
Markdown
263 lines
12 KiB
Markdown
<!-- WEHUB_ZH_README -->
|
||
> [!NOTE]
|
||
> 本文档由 WeHub 基于上游 README 翻译整理,属于社区翻译,非官方中文文档。
|
||
> [English](./README.en.md) · [原始项目](https://github.com/CopilotKit/CopilotKit) · [上游 README](https://github.com/CopilotKit/CopilotKit/blob/HEAD/README.md)
|
||
> 原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。
|
||
|
||
<div align=center>
|
||
|
||
<img width="120" height="120" alt="FavIcon" src="https://github.com/user-attachments/assets/779de607-2b8d-4751-872b-1243e97c7d18" />
|
||
|
||
# CopilotKit
|
||
|
||
<div align=center>
|
||
|
||
[文档](https://docs.copilotkit.ai/?ref=github_readme) ·
|
||
[示例](https://www.copilotkit.ai/examples) ·
|
||
[企业智能平台(Enterprise Intelligence Platform)](https://go.copilotkit.ai/enterprise-intelligence-platform) ·
|
||
[Discord](https://discord.gg/6dffbvGU3D?ref=github_readme)
|
||
|
||
</div>
|
||
|
||
构建 **面向智能体(agent-native)的应用** —— 适用于任意框架、任意界面。
|
||
|
||
为 React、Angular、Vue、React Native 提供生成式 UI(Generative UI)、共享状态(shared state)和人机协同(human-in-the-loop)工作流 —— 并延伸至浏览器之外。
|
||
|
||
</div>
|
||
|
||
[](https://go.copilotkit.ai/copilotkit-docs)
|
||
|
||
<div align="center" style="display:flex;justify-content:start;gap:16px;height:20px;margin: 0;">
|
||
<a href="https://www.npmjs.com/package/@copilotkit/react-core" target="_blank">
|
||
<img src="https://img.shields.io/npm/v/%40copilotkit%2Freact-core?logo=npm&logoColor=%23FFFFFF&label=Version&color=%236963ff" alt="NPM">
|
||
</a>
|
||
|
||
<a href="https://github.com/copilotkit/copilotkit/blob/main/LICENSE" target="_blank">
|
||
<img src="assets/license-badge.svg" alt="License: MIT" height="20">
|
||
</a>
|
||
|
||
<a href="https://discord.gg/6dffbvGU3D" target="_blank">
|
||
<img src="https://img.shields.io/discord/1122926057641742418?logo=discord&logoColor=%23FFFFFF&label=Discord&color=%236963ff" alt="Discord">
|
||
</a>
|
||
</div>
|
||
<br/>
|
||
<div>
|
||
<a href="https://www.producthunt.com/posts/copilotkit" target="_blank">
|
||
</a>
|
||
|
||
<div />
|
||
<div align="center">
|
||
<a href="https://trendshift.io/repositories/5730" target="_blank"><img src="https://trendshift.io/api/badge/repositories/5730" alt="CopilotKit%2FCopilotKit | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/>
|
||
</a>
|
||
<a href="https://www.producthunt.com/posts/copilotkit" target="_blank">
|
||
<img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=428778&theme=light&period=daily">
|
||
</a>
|
||
|
||
</div>
|
||
|
||
---
|
||
|
||
## 什么是 CopilotKit
|
||
|
||
CopilotKit 是业界一流的 SDK,用于构建全栈智能体(agentic)应用、生成式 UI 和聊天应用。
|
||
|
||
最初只是一个 React 库,现已发展为 **多平台智能体框架**:同一个智能体可同时驱动你的 Web 应用、移动应用和团队的 Slack 工作区。
|
||
|
||
我们正是 **[AG-UI Protocol](https://github.com/ag-ui-protocol/ag-ui)** 背后的公司 —— 已被 Google、LangChain、AWS、Microsoft、Mastra、PydanticAI 等采纳!
|
||
|
||
## 快速开始
|
||
|
||
五分钟内即可启动运行。你只需一个 LLM API 密钥(OpenAI、Anthropic、Gemini 等)。
|
||
|
||
```bash
|
||
npx copilotkit@latest create
|
||
```
|
||
|
||
## 智能体技能(Agent Skills)
|
||
|
||
CopilotKit 提供 [agent skills](https://docs.copilotkit.ai),用于教导你的编程智能体(Claude Code、Codex、Cursor、Gemini 等)如何安装、构建、集成、调试和升级 CopilotKit。
|
||
|
||
安装到任意项目目录:
|
||
|
||
```bash
|
||
npx copilotkit@latest skills install
|
||
```
|
||
|
||
随时再次运行即可更新到最新技能。
|
||
|
||
## 让你的应用焕发生机
|
||
|
||
https://github.com/user-attachments/assets/72b7b4f3-b6e7-460c-a932-5746fe3c8db3
|
||
|
||
<div align="center"> 1 分钟为你的应用接入 AI</div>
|
||
|
||
**功能特性:**
|
||
|
||
- **Chat UI** – 完全可定制的聊天界面,支持消息流式传输、工具调用和智能体响应。
|
||
- **Backend Tool Rendering** – 让智能体可调用后端工具,返回的 UI 组件直接在客户端渲染。
|
||
- **Generative UI** – 智能体可根据用户意图和智能体状态,在运行时动态生成并更新 UI 组件。
|
||
- **Shared State** – 同步状态层,智能体和 UI 组件均可实时读写。
|
||
- **Human-in-the-Loop** – 智能体可暂停执行,在继续之前请求用户输入、确认或编辑。
|
||
- **Self-Learning** _(抢先体验)_ – 通过上下文强化学习(CLHF,Continuous Learning from Human Feedback)根据用户反馈持续改进的智能体。
|
||
|
||
## 🧩 适配你的技术栈
|
||
|
||
一套智能体后端。适配所有前端。
|
||
|
||
| 平台 | 状态 | 快速开始 |
|
||
| ------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------- |
|
||
| ⚛️ React / Next.js | ✅ GA | [快速开始](https://docs.copilotkit.ai/built-in-agent/quickstart) |
|
||
| 🅰️ Angular | ✅ 已支持 | [源代码 - 快速入门即将推出](https://github.com/CopilotKit/CopilotKit/tree/main/packages/angular) |
|
||
| 💚 Vue | ✅ 已支持 | [源代码 - 快速入门即将推出](https://github.com/CopilotKit/CopilotKit/tree/main/packages/vue) |
|
||
| 📱 React Native | ✅ 已支持 | [快速开始](https://docs.copilotkit.ai/react-native) |
|
||
| 💬 Slack / MS Teams / Discord / Google Chat | 🟡 Beta | [申请抢先体验](https://go.copilotkit.ai/beyond-the-web-form) |
|
||
|
||
智能体逻辑保持不变 —— AG-UI 负责线协议,CopilotKit 负责各框架的 UI 层。
|
||
|
||
## 💬 超越浏览器:Slack 与 Microsoft Teams(Discord、Google Chat 即将推出……)
|
||
|
||
你的智能体可在 Web 应用之外运行并生成生成式 UI(**[了解更多](https://www.copilotkit.ai/integrations)**).
|
||
|
||
CopilotKit 现可让你将 **同一个智能体** 部署到用户日常工作的平台:
|
||
|
||
- **Slack** – 智能体作为一等 Slack 应用:频道内即可使用线程、工具调用和人机协同审批。
|
||
- **Microsoft Teams** – 将智能体工作流带入企业,接入组织已有的协作平台。
|
||
|
||
🔒 **抢先体验:** 我们正在为团队开通接入。
|
||
|
||
👉 **[申请抢先体验 →](https://go.copilotkit.ai/beyond-the-web-form)**
|
||
|
||
## 🧠 自学习智能体
|
||
|
||
通过持续学习不断改进你的产品。
|
||
|
||
借助 **Continuous Learning from Human Feedback (CLHF)** —— [CopilotKit Intelligence Platform](https://www.copilotkit.ai/copilotkit-intelligence), 的一部分 —— 智能体在每次交互中不断进步:
|
||
|
||
- **In-context reinforcement learning** – 智能体根据用户交互自动改进,无需微调模型。
|
||
- **Automatic prompt augmentation** – 智能体行为根据近期交互与结果自适应调整。
|
||
- **Per-user adaptation** – 智能体学习个人偏好,随时间推移为每位用户提供更好的体验。
|
||
- **Threads & persistence** – 完整交互历史 —— 生成式 UI、人机协同、共享状态 —— 跨会话持久保存。
|
||
|
||
可通过 CopilotKit Cloud 或自托管方式使用。
|
||
|
||
🔒 **抢先体验:** 我们正在为团队开通接入。
|
||
|
||
👉 **[申请抢先体验 →](https://go.copilotkit.ai/beyond-the-web-form)**
|
||
|
||
https://github.com/user-attachments/assets/7372b27b-8def-40fb-a11d-1f6585f556ad
|
||
|
||
你将获得:
|
||
|
||
- **CopilotKit installed** – 核心包已在你的应用中完整配置
|
||
- **Provider configured** – 上下文、状态和 hooks 已就绪可用
|
||
- **Agent <> UI connected** – 智能体可流式传输操作并即时渲染 UI
|
||
- **Deployment-ready** – 你的应用已可部署
|
||
|
||
[完整入门指南 →](https://docs.copilotkit.ai/langgraph/quickstart)
|
||
|
||
## 工作原理:
|
||
|
||
CopilotKit 将你的 UI、智能体和工具连接为单一交互循环。
|
||
|
||

|
||
|
||
由此可实现:
|
||
|
||
- 向用户请求输入的智能体
|
||
- 可渲染 UI 的工具
|
||
- 跨步骤与会话的有状态工作流
|
||
- 同一智能体,部署于 Web、移动和聊天平台
|
||
|
||
## ⭐️ useAgent Hook
|
||
|
||
`useAgent` hook 直接构建于 AG-UI 之上,让你对智能体连接拥有完整的编程控制。
|
||
|
||
```ts
|
||
// Programmatically access and control your agents
|
||
const { agent } = useAgent({ agentId: "my_agent" });
|
||
|
||
// Render and update your agent's state
|
||
return <div>
|
||
<h1>{agent.state.city}</h1>
|
||
<button onClick={() => agent.setState({ city: "NYC" })}>
|
||
Set City
|
||
</button>
|
||
</div>
|
||
```
|
||
|
||
查看 [useAgent 文档](https://go.copilotkit.ai/useagent-docs) 了解更多。
|
||
|
||
https://github.com/user-attachments/assets/67928406-8abc-49a1-a851-98018b52174f
|
||
|
||
## 生成式 UI(Generative UI)
|
||
|
||
生成式 UI(Generative UI)是 CopilotKit 的核心模式,允许智能体(agent)在工作流中动态渲染 UI。
|
||
|
||
https://github.com/user-attachments/assets/3cfacac0-4ffd-457a-96f9-d7951e4ab7b6
|
||
|
||
### 对比三种类型
|
||
|
||
<img width="708" height="311" alt="image" src="https://github.com/user-attachments/assets/962f49c2-31ea-43c5-b2a3-7cdde114705a" />
|
||
|
||
#### 探索:
|
||
|
||
- [静态(AG-UI Protocol)](https://docs.copilotkit.ai/ag-ui-protocol)
|
||
- [声明式(A2UI)](https://docs.copilotkit.ai/generative-ui/specs/a2ui#using-a2ui-with-copilotkit)
|
||
- [开放式(MCP Apps & Open JSON)](https://docs.copilotkit.ai/generative-ui/specs/mcp-apps)
|
||
|
||
[生成式 UI 教学仓库 →](https://github.com/CopilotKit/CopilotKit/tree/main/examples/showcases/generative-ui)
|
||
|
||
## 🖥️ AG-UI:智能体–用户交互协议(The Agent–User Interaction Protocol)
|
||
|
||
将智能体工作流连接到面向用户的应用,在智能体技术栈中拥有深度合作与第一方集成——涵盖 LangChain、CrewAI、Mastra、PydanticAI 等。
|
||
|
||
[](https://go.copilotkit.ai/ag-ui)
|
||
|
||
---
|
||
|
||
```
|
||
npx create-ag-ui-app my-agent-app
|
||
```
|
||
|
||
<a href="https://github.com/ag-ui-protocol/ag-ui" target="_blank">
|
||
在 AG-UI README 中了解更多 →
|
||
</a>
|
||
|
||
## 🤝 社区
|
||
|
||
- [最新动态](https://docs.copilotkit.ai/whats-new)
|
||
<h3>有问题或需要帮助?</h3>
|
||
<a href="https://discord.gg/6dffbvGU3D?ref=github_readme" target="_blank">
|
||
加入我们的 Discord →
|
||
</a> </br>
|
||
<a href="https://docs.copilotkit.ai/?ref=github_readme" target="_blank">
|
||
阅读文档 →
|
||
</a> </br>
|
||
<a href="https://dashboard.operations.copilotkit.ai?ref=github_readme" target="_blank">
|
||
试用企业智能平台(Enterprise Intelligence Platform)→
|
||
</a>
|
||
<h3>及时了解我们的最新发布!</h3>
|
||
<a href="https://www.linkedin.com/company/copilotkit/" target="_blank">
|
||
在 LinkedIn 上关注我们 →
|
||
</a> </br>
|
||
<a href="https://x.com/copilotkit" target="_blank">
|
||
在 X 上关注我们 →
|
||
</a>
|
||
|
||
## 🙋🏽♂️ 贡献
|
||
|
||
感谢你有兴趣为 CopilotKit 做出贡献!💜
|
||
|
||
我们重视所有贡献,无论是通过代码、文档、创建演示应用,还是仅仅传播项目理念。
|
||
|
||
以下是一些实用资源,可帮助你入门:
|
||
|
||
- 如需贡献代码,请参阅 [CONTRIBUTING.md](./CONTRIBUTING.md)。
|
||
- 如需贡献文档,[查看文档贡献指南](https://docs.copilotkit.ai/contributing/docs-contributions?ref=github_readme).
|
||
|
||
- 想贡献但不确定从何入手?[加入我们的 Discord](https://discord.gg/6dffbvGU3D),我们会协助你!
|
||
|
||
## 📄 许可证
|
||
|
||
本仓库的源代码依据 [MIT License](https://github.com/CopilotKit/CopilotKit/blob/main/LICENSE).
|