🎯 CopilotKit：31.4k Stars 的 Agent 前端栈，React/Angular 项目加一行代码就有 AI 对话
用过 LangChain、AutoGPT 这些后端框架之后，你会发现有个问题一直没人解决——AI Agent 和前端 UI 之间的交互。Agent 调了工具、算了结果，怎么实时显示到页面上？用户在界面上点了按钮，怎么让 Agent 感知到？
老实说，之前写 AI 应用的标配套路是：后端跑 Agent 逻辑，前端用 WebSocket 做一层透传。Agent 返回 JSON，前端再手动渲染。每改一个交互流程，前后端都要同步改，烦得要死。
CopilotKit 就是专门干这个的。它是个全栈 SDK——React 和 Angular 都支持——让你 1 分钟给现有项目加上 AI 对话界面，而且 Agent 可以直接在用户界面上渲染组件、读写状态、甚至停下来问用户意见。它背后推的 AG-UI 协议已经被 Google、LangChain、AWS、Microsoft 这些公司采用了。
🎯 CopilotKit: 31.4k Stars — The Agent Frontend Stack, Add AI Chat to Your React/Angular App in 1 Minute
After playing with LangChain, AutoGPT, and other backend agent frameworks, you'll notice a gap nobody's really solved — the interaction between AI agents and frontend UI. The agent calls a tool, computes a result — how does it render on the page in real-time? The user clicks a button on the UI — how does the agent know?
Honestly, the standard approach was: run agent logic on the backend, WebSocket proxy on the frontend. Agent returns JSON, you manually render it. Every flow change means syncing frontend and backend changes. A total pain.
CopilotKit is built exactly for this. It's a full-stack SDK — supports both React and Angular — letting you add an AI chat interface to your existing project in 1 minute. Agents can render UI components directly, read/write shared state, and even pause to ask users for input. Its AG-UI Protocol has been adopted by Google, LangChain, AWS, Microsoft, and more.
⚡ 核心功能
Chat UI — 开箱即用的 React 聊天界面组件，支持消息流式传输、工具调用、Agent 响应。不用自己写消息列表、输入框、loading 动画，直接装包就行。
Backend Tool Rendering — Agent 调后端工具，工具可以返回 UI 组件，直接渲染在客户端。比如 Agent 查了数据库，返回一个表格组件而不是 JSON，用户直接在页面上看到数据。
Generative UI — Agent 可以在运行过程中动态生成并更新 UI 组件。你要的图表、表单、状态卡片，Agent 自己画。
Shared State — 一个同步的状态层，Agent 和 UI 组件都可以实时读写。Agent 改了状态，页面自动更新；用户在页面上改了什么，Agent 也能感知到。
Human-in-the-Loop — Agent 执行到某一步时停下来，问用户"这个数据对不对？""要确认提交吗？"——做 AI 应用的都知道，生产环境里这功能是刚需。
⚡ Core Features
Chat UI — An out-of-the-box React chat component with message streaming, tool calls, and agent responses. No need to build message lists, input boxes, or loading spinners.
Backend Tool Rendering — Backend tools called by the agent can return UI components rendered directly on the client. For example, the agent queries a database and returns a table component instead of raw JSON.
Generative UI — Agents can generate and update UI components dynamically at runtime. Charts, forms, status cards — the agent draws them itself.
Shared State — A synchronized state layer that both agents and UI components can read from and write to in real time. Agent changes state → UI updates. User interacts with UI → agent knows.
Human-in-the-Loop — Agents pause execution mid-step to ask the user: "Is this data correct?" "Should I submit?" Anyone building production AI apps knows this is a must-have.
🛠 上手实操
新建项目
npx copilotkit@latest create -f nextjs
给已有项目加 CopilotKit
npx copilotkit@latest init
两条命令搞定。它会自动安装核心包、配好 Provider、打通 Agent 和 UI 的连接。
在代码里使用 useAgent
import { useAgent } from "@copilotkit/react-core";
function MyComponent() {
const { agent } = useAgent({ agentId: "my_agent" });
return (
<div>
<h1>{agent.state.city}</h1>
<button onClick={() => agent.setState({ city: "NYC" })}>
Set City
</button>
</div>
);
}
Agent 和 UI 共享同一份状态。点按钮改 city，Agent 那边也能读到。Agent 改了 city，按钮上面的 h1 自动刷新。
🛠 Quick Start
New project
npx copilotkit@latest create -f nextjs
Add to existing project
npx copilotkit@latest init
Two commands, and you're set. It auto-installs the core packages, configures the Provider, and connects Agent ↔ UI.
Using the useAgent hook
import { useAgent } from "@copilotkit/react-core";
function MyComponent() {
const { agent } = useAgent({ agentId: "my_agent" });
return (
<div>
<h1>{agent.state.city}</h1>
<button onClick={() => agent.setState({ city: "NYC" })}>
Set City
</button>
</div>
);
}
Agent and UI share the same state. Click the button to change city — the agent sees it. The agent changes city — the h1 auto-updates.
要点
- CopilotKit 解决的是 Agent ↔ UI 之间的实时交互问题，不是 Agent 后端框架，跟 LangChain/CrewAI 互补
npx copilotkit@latest init给已有项目装 AI 对话，1 分钟完成- AG-UI 协议是它推的开放标准，Google/AWS/Microsoft 都接入了
- Generative UI + Shared State + Human-in-the-Loop 三个能力是生产环境刚需
- 31.4k Stars，MIT 协议，TypeScript 写的，React 和 Angular 都支持
Key Takeaways
- CopilotKit solves the Agent ↔ UI real-time interaction problem — it's complementary to LangChain/CrewAI, not a replacement
npx copilotkit@latest initadds AI chat to existing projects in 1 minute- The AG-UI Protocol is its open standard, adopted by Google/AWS/Microsoft
- Generative UI + Shared State + Human-in-the-Loop are production necessities
- 31.4k Stars, MIT licensed, TypeScript, supports both React and Angular