CopilotKit31.2k Stars AI Agent 3 React Copilot：

实话说，现在做 AI Agent 的项目一大堆，但大部分都在搞后端——什么 LangGraph、CrewAI、AutoGPT。前端呢？你想在 React 项目里加一个 AI 聊天助手，让用户可以直接跟 AI 对话、让 AI 操作界面、动态生成 UI 组件？CopilotKit 就是干这个的。

CopilotKit 是什么

CopilotKit 是一个开源的 React/Angular SDK，专门用来把 AI Agent 的能力集成到前端应用里。它不只是加个聊天框，而是让 Agent 和 UI 双向通信——Agent 可以动态渲染 UI 组件、读写前端状态、甚至停下来问用户要输入。

背后的 AG-UI Protocol 已经被 Google、LangChain、AWS、Microsoft、Mastra、PydanticAI 等大厂采用，算是一个事实标准了。

快速上手

新项目：

npx copilotkit@latest create -f <framework>

已有项目：

npx copilotkit@latest init

这两条命令搞定安装 + Provider 配置 + Agent 连接，不用手动写胶水代码。

核心概念

useAgent Hook — 在 React 组件里直接控制 Agent：

const { agent } = useAgent({ agentId: "my_agent" });

return (
  <div>
    <h1>{agent.state.city}</h1>
    <button onClick={() => agent.setState({ city: "NYC" })}>
      Set City
    </button>
  </div>
);

Generative UI — 最骚的操作。Agent 可以在运行时动态生成 UI 组件，用户看到的不是 Markdown 文本，而是真正的交互式界面。比如 Agent 可以渲染一个图表组件、一个表单、或者一个卡片列表——全凭 AI 自己决定。

Shared State — Agent 和前端组件共享同一个状态层。Agent 修改了 state，UI 实时更新。用户点了按钮修改了 state，Agent 也能感知。双向的。

Human-in-the-Loop — Agent 执行到关键步骤时可以暂停，等用户确认或补充信息再继续。不是全自动黑箱，而是人机协作。

为什么值得用

前端集成 AI Agent 最头疼的就是通信协议和数据同步。CopilotKit 把这层抽象掉了，而且 AG-UI 协议被大厂采用说明这条路是对的。如果你在 React 项目里想做 AI 功能，别再从头写 WebSocket 消息处理了——试试这玩意儿，3 行代码跑起来。

要点总结

🔥 CopilotKit: 31.2k⭐ Frontend Stack for AI Agents — Add a Copilot to Your React App in 3 Lines

Let's be real — there are tons of AI agent frameworks out there, but most focus on the backend: LangGraph, CrewAI, AutoGPT. What about the frontend? Want to add an AI chat assistant to your React app where users can talk to AI, let AI manipulate the UI, and dynamically generate components? That's exactly what CopilotKit does.

What is CopilotKit

CopilotKit is an open-source React/Angular SDK for integrating AI agent capabilities into your frontend. It's not just a chat box — it enables bidirectional communication between agents and UI. Agents can render UI components dynamically, read/write frontend state, and even pause to ask for user input.

The underlying AG-UI Protocol has been adopted by Google, LangChain, AWS, Microsoft, Mastra, PydanticAI, and more — making it a de facto standard.

Quick Start

New project:

npx copilotkit@latest create -f <framework>

Existing project:

npx copilotkit@latest init

Both commands handle installation, Provider configuration, and Agent connection — no manual glue code needed.

Core Concepts

useAgent Hook — Control agents directly from React:

const { agent } = useAgent({ agentId: "my_agent" });

return (
  <div>
    <h1>{agent.state.city}</h1>
    <button onClick={() => agent.setState({ city: "NYC" })}>
      Set City
    </button>
  </div>
);

Generative UI — The killer feature. Agents can dynamically generate UI components at runtime. Users see interactive components (charts, forms, cards) instead of plain Markdown text.

Shared State — Agents and UI components share a synchronized state layer. When the agent updates state, the UI updates in real time — and vice versa.

Human-in-the-Loop — Agents can pause mid-execution to ask for user confirmation or input before proceeding. Human-AI collaboration, not a black box.

Summary