📌 项目地址：CopilotKit/CopilotKit
| ⭐ 32,361 颗星 | 🔧 TypeScript | 📜 未标注
项目是什么
CopilotKit 是一个 TypeScript 写的全栈 SDK，star 数 32361。它做的是让
AI 代理（agent）能和前端 UI 组件实时交互。
它的核心是 AG-UI 协议，这个协议已经被
Google、LangChain、AWS、Microsoft
等公司采用。这意味着它的抽象层不绑定某个特定的 agent 框架——你可以搭
LangChain 用，搭 Mastra 用，搭 PydanticAI 用。
它包含五个具体能力： – Chat UI：一个 React
聊天界面，处理消息流式、工具调用显示、agent 回复 – Backend Tool
Rendering：agent 调用后端工具时，可以返回 UI
组件，这些组件会直接渲染到前端页面 – Generative
UI：agent 在运行时动态创建和更新 React 组件，根据用户意图和
agent 内部状态实时调整 – Shared
State：一个同步状态层，agent 和前端 UI
组件都能同时读写，数据是双向的 –
Human-in-the-Loop：agent
可以暂停执行，等用户输入、确认或编辑后再继续
我以前做 AI 聊天应用时，最麻烦的就是让 AI
输出能控制界面。通常你得写一堆 callback 去解析 AI
的输出文本，然后手动更新组件。CopilotKit 把这个过程变成了双向绑定——agent
直接操作 React 组件，用户操作组件也能影响 agent 状态。
快速开始：两条命令
新项目：
npx copilotkit@latest create -f现有 React 项目：
npx copilotkit@latest init执行后你得到四样东西： 1. CopilotKit 核心包安装好 2. Provider
配置好（context、state、hooks 都可用） 3. Agent ↔︎ UI 连接好（agent
可以流式输出动作，UI 即时渲染） 4. 项目可以直接部署
我觉得最省心的就是第二条命令。我之前试过其他 AI
SDK，集成步骤通常要手动装包、写 Provider 配置、建连接代码。CopilotKit 的
init 命令把这些活全干了。
如果你想要完整的入门指导，官方文档有详细教程：Complete getting
started guide
核心 API：useAgent Hook
这是 CopilotKit 的关键 API。它直接基于 AG-UI 协议，让你用编程方式控制
agent。
const { agent } = useAgent({ agentId: "my_agent" });
return (
<div>{agent.state.city}</div>
<button onClick={() => agent.setState({ city: "NYC" })}>
Set City
</button>
);这段代码做了两件事： – 读取 agent 状态中的 city 字段并渲染 –
用户点击按钮后，直接修改 agent 状态为 “NYC”
agent
会感知到状态变化并做出响应。你可以用这个机制让用户通过表单、滑块、下拉菜单等方式去影响
agent 的行为。
AG-UI 协议的意义
CopilotKit 不是孤立的工具，它的底层协议 AG-UI
已被多家公司采用。这意味着： – 你的 agent 逻辑不锁定在 CopilotKit 生态里
– 可以用 LangChain 做后端编排，用 CopilotKit 做前端渲染 –
协议本身是开放的，Google、Microsoft 等公司都在用
我觉得这个设计比较聪明。很多 AI 前端 SDK
的问题是只适配自己的后端，换框架就得重新学。CopilotKit
把协议标准化了，你不需要担心以后想换 agent 框架要重建整个前端。
和市面上其他工具的区别
我对比过 Vercel AI SDK 和 LangChain 的 Chat UI： – Vercel AI
SDK 主要提供流式聊天，agent 控制 UI 的能力有限 –
LangChain 前端工具
更偏后端编排，没有专门的前端渲染机制
CopilotKit 做了两件事是别人没做的： 1. agent 能动态生成 React
组件，不只是显示文字 2. 状态是双向同步的，agent 改 UI，用户改 agent
注意事项
- 官方文档没有标注许可证，需要去 GitHub 仓库确认
- agent 能直接操作前端状态，如果你不做权限控制，用户可能通过 UI
修改敏感数据。官方文档有相关指导 - 目前文档和示例主要面向 React。Angular 支持情况需要自己验证
- 生成式 UI 要求你提前定义好 agent
能生成哪些组件。对于纯聊天场景，这个方案可能偏重
如果你只是要一个聊天框，用 Vercel AI SDK 就好。如果你需要 agent
直接操控界面元素（填表单、拖拽、实时更新仪表盘），CopilotKit
是目前最完整的方案。