SDK CopilotKit 为React等构建智能体原生应用

“给应用加一个 AI 助手”听起来简单，真正落地却要处理状态同步、流式渲染、人在回路（human-in-the-loop）等一堆麻烦。CopilotKit 的野心是做一个横向层：让你的同一个智能体，既能驱动网页、也能驱动移动端、Slack、Teams。

CopilotKit 是构建“智能体原生（agent-native）”应用的头部 SDK，提供生成式 UI、共享状态与人在回路工作流，覆盖 React、Angular、Vue、React Native，以及 Slack 和 Microsoft Teams。

项目基本信息

一、项目介绍

CopilotKit 起家于 React 库，如今是“你的智能体与你用户之间的横向层”：它定义了 AG-UI 协议（已被 Google、LangChain、AWS 等采用），让智能体状态、生成式 UI 与人工审批能在任意前端框架上复用。

二、核心优势

• 生成式 UI：让智能体动态渲染组件，而非只吐文本。
• 共享状态：智能体与界面状态双向同步。
• 人在回路：内置审批、干预工作流。
• 多端覆盖：Web、移动、Slack、Teams 一套逻辑。

三、适用场景

• 给现有产品嵌入 AI 副驾驶（copilot）。
• 需要 AI 直接操作界面（生成式 UI）的应用。
• 跨端（Web / 移动 / IM）统一智能体体验。

四、安装教程

# 用编码助手引导接入（推荐）
npx --yes copilotkit@latest onboard start

# 或手动安装技能与脚手架
npx copilotkit@latest skills install
npx create-ag-ui-app my-agent-app

常见报错：Node 版本过低会报语法错，建议 Node 18+；onboard start 会读项目结构，若目录为空需先有基础工程。

五、使用示例

在组件里直接读取并驱动智能体状态：

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

return <div>
  <h1>{agent.state.city}</h1>
  <button onClick={() => agent.setState({ city: "NYC" })}>
    设置城市
  </button>
</div>;

六、常见问题

• Q：一定要 React 吗？ A：React 支持最完整，Angular / Vue / React Native 也支持。
• Q：AG-UI 是什么？ A：CopilotKit 主导的智能体-前端通信协议，已被多家采用。
• Q：能接自己的模型吗？ A：可以，框架与具体模型解耦。

七、总结

CopilotKit 解决的是“AI 能力怎么真正长进产品里”的最后一公里。如果你想做的是智能体原生应用，而不是又一个聊天框，它是目前最成熟的 SDK 之一。