CopilotKit 是用于应用内 AI 副驾驶和生成 UI 的Open Source前端堆栈。 使用预构建组件、useCopilotAction 挂钩和生产就绪部署构建 React Angular AI 助手。 涵盖安装、LangChain 集成、自托管以及与 Vercel AI SDK 的基准测试。
- MIT
- 更新于 2026-05-19
CopilotKit is the open-source frontend stack that turns any React or Angular application into an AI-native product. With 31,536 GitHub stars, 3,300+ forks, and a fresh $27M Series A (May 2026), it has become the default choice for teams shipping in-app AI assistants that read application state, trigger frontend actions, and render generative UI components inside chat interfaces.
This CopilotKit tutorial walks through a production-grade setup: installing packages, wiring the runtime, exposing React state to the LLM, defining frontend actions, deploying to a VPS, and hardening for production traffic. Whether you are building a CopilotKit React integration or adding a React AI assistant to an existing codebase, every command and config is copy-paste ready.
什么是 CopilotKit？CopilotKit 是一个用于构建应用内 AI 副驾驶和生成式 UI 体验的前端框架。 它为 React 提供预构建的 AI copilot 组件（CopilotSidebar、CopilotChat、CopilotPopup）、类型化挂钩（useCopilotReadable、useCopilotAction）以及连接到 OpenAI、LangChain、LangGraph、Groq 或任何自定义代理后端的可插入运行时。该项目由 CopilotKit Inc. 维护，并获得 MIT 许可，迄今为止已筹集 2700 万美元资金。 该团队由约 25 名工程师组成，每周发布版本并维护 AG-UI 开放协议，这是一种代理到前端通信的有线标准，现已得到 Google、微软、亚马逊、LangChain 和 Mastra 的支持。— #
CopilotKit 的工作原理CopilotKit 位于前端应用程序和 LLM 或代理后端之间。 它通过干净的三层架构处理流式聊天、工具调用、状态同步和生成式 UI 渲染：| Layer | Responsibility | Key Files | #
|—
|—
|—
|
| UI Components | Render chat sidebar, popup, or inline chat | CopilotSidebar, CopilotChat, CopilotPopup |
| React Hooks | Expose state + actions to the LLM | useCopilotReadable, useCopilotAction |
| Copilot Runtime | Route requests to LLM/agent backends | app/api/copilotkit/route.ts |
- useCopilotAction — 注册 LLM 可以调用的类型函数来改变前端状态（添加待办事项、导航页面、提交表单）。
- Copilot Runtime — 一个 API 端点，用于将前端请求代理到 LLM、处理身份验证并管理线程状态。
- 生成式 UI — 在聊天中呈现的 React 组件作为对工具调用（天气卡、任务项、数据表）的响应。
- AG-UI 协议 — 用于代理到前端通信的开放线路格式。 CopilotKit 是参考实现。—
安装和设置### 先决条件- Node.js 20+（Node 18 将失败 - CopilotKit 使用本机获取功能） #
- Next.js 15 与 App Router（推荐）或 React 18+
- OpenAI、Anthropic 或 Groq API 密钥### 第 1 步：安装软件包```` bas h
npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime
用于LangChain集成（可选） #
npm install @copilotkit/runtime-langchain
对于 Groq 适配器（可选） #
npm install @copilotkit/运行时 groq-sdk
### 步骤2：添加环境变量
bas
h
.env.local #
OPENAI_API_KEY=sk-your-openai-key
GROQ_API_KEY=gsk-your-groq-key
COPILOTKIT_API_KEY=ck-your-copilot-cloud-key # 可选，用于云功能
### 步骤 3：创建运行时端点在 Next.js 项目中创建 `app/api/copilotkit/route.ts`：重击
.env.local #
OPENAI_API_KEY=sk-your-openai-key GROQ_API_KEY=gsk-your-groq-key COPILOTKIT_API_KEY=ck-your-copilot-cloud-key # 可选，用于云功能 ``呃”； 从"openai"导入OpenAI；const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });const 运行时 = new CopilotRuntime({ act:[]， });const serviceAdapter = new OpenAIAdapter({ openai, 型号: “gpt-4o” });导出 const POST = 异步（要求：N```打字稿 导入{ 副驾驶运行时， OpenAI适配器， copilotRuntimeNextJSAppRouterEndpoint， 来自"@copilotkit/runtime"； 从"next/server"导入{NextRequest}； 从"openai"导入OpenAI；
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
const 运行时 = new CopilotRuntime({ act:[]， });
const serviceAdapter = new OpenAIAdapter({ openai, 型号: “gpt-4o” });
导出 const POST = async (req: NextRequest) => { const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({ 运行时， 服务适配器， 端点："/api/copilotkit"， });
返回handleRequest(req); }; ``它"> <副驾驶侧边栏 默认打开={false} 标签={{ title: “"人工智能助手"，” 初始：“嗨！今天有什么可以帮您的吗？”, 占位符：“输入消息…"， }}
{孩子}
</副驾驶侧边栏>
</副驾驶套件>
）；
}
### 步骤 5：运行开发服务器
bas
h
npm 运行开发
打开http://localhost: 3000 #
单击副驾驶按钮 — 您的 AI 助手已上线 #
## 与 LangChain、LangGraph 和 OpenAI 集成### OpenAI 适配器（最简单）OpenAI 适配器是最快的生产路径。 它直接连接到 GPT-4o，无需额外的后端基础设施：``打字稿
// app/api/copilotkit/route.ts — OpenAI v```
ts
x
// app/layout.tsx 或 app/page.tsx
"使用客户端"；
从"@copilotkit/react-core"导入 { CopilotKit } ；
从"@copilotkit/react-ui"导入{CopilotSidebar}；
导入"@copilotkit/react-ui/styles.css"；
导出默认函数 RootLayout({ Children }: { Children: React.ReactNode }) {
返回（
<CopilotKit runtimeUrl="/api/copilotkit">
<副驾驶侧边栏
默认打开={false}
标签={{
title: "\"人工智能助手\"，"
初始："嗨！今天有什么可以帮您的吗？",
占位符："输入消息..."，
}}
>
{孩子}
</副驾驶侧边栏>
</副驾驶套件>
）；
}
用于插入自定义链、检索器和代理的适配器：``打字稿
// app/api/copilotkit/route.ts — LangChain 变体
从"@copilotkit/runtime"导入 { CopilotRuntime, LangChainAdapter }；
从"@langchain/openai"导入 { ChatOpenAI }；
从"next/server"导入{NextRequest}；const 运行时 = new CopilotRuntime({ actions: [] });导出 const POST = async (req: NextRequest) => {
const 模型 = new ChatOpenAI({
型号名称："gpt-4o"，
openAIApiKey：process.env.OPENAI_API_KEY，
});
const serviceAdapter = new LangChainAdapter({ 模型 });const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
运行时，
serviceAda```
bas
h
npm 运行开发
# 打开http://localhost: 3000
# 单击副驾驶按钮 — 您的 AI 助手已上线
````）对于有状态多步代理，请连接到 LangGraph 后端：``打字稿
// app/api/copilotkit/route.ts — LangGraph 变体
导入{
副驾驶运行时，
LangGraphHttpAgent，
来自"@copilotkit/runtime"；
从"next/server"导入{NextRequest}；const 运行时 = new CopilotRuntime({
代理商：{
myAgent```打字稿
// app/api/copilotkit/route.ts — OpenAI 变体
从"@copilotkit/runtime"导入 { CopilotRuntime, OpenAIAdapter }；
从"@copilotkit/runtime"导入{copilotRuntimeNextJSAppRouterEndpoint}；
从"openai"导入OpenAI；
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
const 运行时 = new CopilotRuntime({ actions: [] });
const serviceAdapter = new OpenAIAdapter({ openai, 型号: "gpt-4o" });
导出 const POST = (req: NextRequest) =>
copilotRuntimeNextJSAppRouterEndpoint({
运行时，
服务适配器，
端点："/api/copilotkit"，
}).handleRequest(req);
```
om
"groq-sdk"；
从"next/server"导入{NextRequest}；const groq = new Groq({ apiKey: process.env.GROQ_API_KEY });
const copilotKit = new CopilotRuntime();
const serviceAdapter = new GroqAdapter({
格罗克，
型号："llama3-groq-8b-8192-工具使用预览"，
});导出 const POST = async (req: NextRequest) => {
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
运行时：copilotKit，
服务适配器，
端点："/api/copilotkit"，
});
返回handleRequest(req);
};
````---
## true实 TSX 示例：Task Manager Copilot这是一个完整的、可用于生产的任务管理器，具有 CopilotKit 集成。 人工智能可以读取任务、添加新任务、将其标记为完成以及在聊天中呈现任务卡。````
ts
x
// 一个```打字稿
// app/api/copilotkit/route.ts — LangChain 变体
从"@copilotkit/runtime"导入 { CopilotRuntime, LangChainAdapter }；
从"@langchain/openai"导入 { ChatOpenAI }；
从"next/server"导入{NextRequest}；
const 运行时 = new CopilotRuntime({ actions: [] });
导出 const POST = async (req: NextRequest) => {
const 模型 = new ChatOpenAI({
型号名称："gpt-4o"，
openAIApiKey：process.env.OPENAI_API_KEY，
});
const serviceAdapter = new LangChainAdapter({ 模型 });
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
运行时，
服务适配器，
端点："/api/copilotkit"，
});
返回handleRequest(req);
};
``` 值：任务，
});// 操作：添加新任务
useCopilotAction({
description: "在任务列表中添加一个新任务", { 名称："标题"， 类型："字符串"， description: "要添加的任务的标题"， 要求：true实， }, { 名称："优先级"， 类型："字符串"， description: "优先级：低、中或高"， 必需：false， }, ], 处理程序: ({ 标题, 优先级 = "中" }) => { 常量 newTask: 任务 = { id: Date.now().toString(), 标题， 已完成：false， 优先级：优先级为任务["优先级"]， }; setTasks((上一个) => [...上一个, newTask]); 返回`已添加任务："${title}"和 ${p``` typescrip t // app/api/copilotkit/route.ts — LangGraph 变体 导入{ 副驾驶运行时， LangGraphHttpAgent， 来自"@copilotkit/runtime"； 从"next/server"导入{NextRequest}；'
const 运行时 = new CopilotRuntime({
代理商：{
myAgent: 新 LangGraphHttpAgent({
url: "http://localhost: 8000/agent",
}),
},
});
const serviceAdapter = new OpenAIAdapter({
openai: 新的 OpenAI({ apiKey: process.env.OPENAI_API_KEY }),
});
导出 const POST = (req: NextRequest) =>
copilotRuntimeNextJSAppRouterEndpoint({
运行时，
服务适配器，
端点："/api/copilotkit"，
}).handleRequest(req);
``电子任务',
description: "从列表中删除任务"，
参数：[
{
名称："任务ID"，
类型："字符串"，
description: "要删除的任务的ID"，
要求：true实，
},
],
处理程序：({taskId})=>{
setTasks((prev) => prev.filter((t) => t.id !== taskId));
return `已删除的任务 ${taskId}`;
},
});返回（
<div className="任务管理器">
<h2>我的任务（{tasks.filter((t) => !t.completed).length} 待处理）</h2>
<ul>
{tasks.map((任务) => (
<li key={task.id} className={task.completed ? "完成"：“”}>
<span>[{task.priority}] {task.title}</span>
{task.completed && <span className=```打字稿
导入{
副驾驶运行时，
格罗克适配器，
copilotRuntimeNextJSAppRouterEndpoint，
来自"@copilotkit/runtime"；
从"groq-sdk"导入 Groq；
从"next/server"导入{NextRequest}；
const groq = new Groq({ apiKey: process.env.GROQ_API_KEY });
const copilotKit = new CopilotRuntime();
const serviceAdapter = new GroqAdapter({
格罗克，
型号："llama3-groq-8b-8192-工具使用预览"，
});
导出 const POST = async (req: NextRequest) => {
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
运行时：copilotKit，
服务适配器，
端点："/api/copilotkit"，
});
返回handleRequest(req);
};
```
ority
-${task.priority}`}>{task.priority}</span>
<p>状态：{任务.完成？ "已完成"："正在进行"}</p>
</div>
）；
},
handler: ({ taskId }) => `显示任务 ${taskId} 的详细信息`,
});
````---
## 基准/实际用例CopilotKit 部署在一系列生产应用程序中。 以下是经过验证的部署指标和用例：| Use Case | Company / Type | Scale | Integration |
|---
|---
|---
|---
|
| Task management copilot | SaaS startups | 5K-50K MAU | React + OpenAI |
| CRM data assistant | Sales platforms | 10K+ users | Angular + LangChain |
| Code review automation | Dev tools | 1K+ teams | Next.js + LangGraph |
| E-commerce product advisor | Shopify apps | 100K+ requests/day | React + Groq |
| Documentation Q&A | Enterprise internal | 500+ employees | Next.js + RAG |**性能基准（测量```
ts
x
// 应用程序/组件/TaskManager.tsx
"使用客户端"；
从"反应"导入{useState}；
从"@copilotkit/react-core"导入{useCopilotReadable，useCopilotAction}；
接口任务{
id：字符串；
title: "字符串；"
完成：布尔值；
优先级："低"| "中"| "高"；
}
导出函数TaskManager() {
const [任务，setTasks] = useState<任务[]>([
{ id: "1", title: "审查拉取请求 #42", 已完成: false, 优先级: "高" },
{ id: "2", title: "更新 API 文档",completed: true,priority: "medium" },
]);
// 向 LLM 公开任务状态
useCopilotReadable({
description: "用户当前的任务列表，包含完成状态和优先级"，
值：任务，
});
// 操作：添加新任务
useCopilotAction({
description: "在任务列表中添加一个新任务", { 名称："标题"， 类型："字符串"， description: "要添加的任务的标题"， 要求：true实， }, { 名称："优先级"， 类型："字符串"， description: "优先级：低、中或高"， 必需：false， }, ], 处理程序: ({ 标题, 优先级 = "中" }) => { 常量 newTask: 任务 = { id: Date.now().toString(), 标题， 已完成：false， 优先级：优先级为任务["优先级"]， }; setTasks((上一个) => [...上一个, newTask]); return `已添加任务："${title}"，优先级为 ${priority}`； }, });'
// 操作：将任务标记为完成
useCopilotAction({
名称："完成任务"，
description: "通过标题或 ID 将任务标记为已完成"，
参数：[
{
名称："任务ID"，
类型："字符串"，
description: "要标记完成的任务的 ID"，
要求：true实，
},
],
处理程序：({taskId})=>{
设置任务（（上一个）=>
prev.map((t) => (t.id === taskId ? { ...t, 已完成: true } : t))
）；
返回"将任务 ${taskId} 标记为已完成"；
},
});
// 操作：删除任务
useCopilotAction({
name: "删除任务",
description: "从列表中删除任务"，
参数：[
{
名称："任务ID"，
类型："字符串"，
description: "要删除的任务的ID"，
要求：true实，
},
],
处理程序：({taskId})=>{
setTasks((prev) => prev.filter((t) => t.id !== taskId));
return `已删除的任务 ${taskId}`;
},
});
返回（
<div className="任务管理器">
<h2>我的任务（{tasks.filter((t) => !t.completed).length} 待处理）</h2>
<ul>
{tasks.map((任务) => (
<li key={task.id} className={task.completed ? "完成"：“”}>
<span>[{task.priority}] {task.title}</span>
{task.completed && <span className="badge">完成</span>}
</li>
))}
</ul>
</div>
）；
}
```});
尝试{
常量结果=等待下一个（）；
等待 langsmith.updateRun(trace.id, { 错误: null });
返回结果；
} 捕获（错误）{
等待 langsmith.updateRun(trace.id, { 错误: String(err) });
抛出错误；
}
},
],
});
````---
## 与替代方案的比较| Feature | CopilotKit | Vercel AI SDK | LangChain | Dify |
|---
|---
|---
|---
|---
|
| **Prebuilt React Components** | CopilotSidebar, CopilotChat, CopilotPopup | AI Elements (shadcn-style) | None — build your own | None — API only |
| **Frontend State Sharing** | useCopilotReadable hook | Manual via useChat | N/A | N/A |
| **Frontend Actions (LLM → UI)** | useCopilotAction hook | Custom tool rendering | N/A | N/A |
| **Generative UI Rendering** | Native render prop in actions | React Server Components | Not supported | Not supported |
| **Agent Framework Support** | LangGraph, LangChain, Built-in, Groq | Any (via adapters) | LangChain native | Built-in workflow engine |
| **Angular Support** | Native | No | No | No |
| **Self-Hosted / On-Prem** | Yes (Docker, VPC) | No (Vercel-only backend) | Yes | Yes (Enterprise) |
| **Open Protocol** | AG-UI (supported by Google, MSFT) | None | None | None |
| **Setup Time (basic chat)** | 10 minutes | 15 minutes | 2+ hours | 30 minutes |
| **GitHub Stars** | 31,536 | 12,800 | 98,000 | 86,000 |
| **License** | MIT | Apache-2.0 | MIT | Apache-2.0 |
| **Enterprise Pricing** | From $500/mo | Vercel Enterprise | N/A | From $1,500/mo |**何时选择每个：**- **CopilotKit** — 您需要一个应用内副驾驶员来读取您的 React 状态并触发前端操作。 最适合构建 AI 原生 SaaS 的产品团队。
- **Vercel AI SDK** — 您希望使用 shadcn 风格的组件进行与提供商无关的流式聊天。 最适合内容/聊天优先的应用程序。
- **LangChain** — 您需要具有复杂链和检索器的 Python 优先代理编排。 最适合后端密集型 AI 管道。
- **Dify** — 您需要一个用于具有 API 端点的 AI 代理的可视化工作流程构建器。 最适合低代码自动化团队。---
## 局限性/诚实评估CopilotKit 并不是适合每个项目的工具。 以下是true正的权衡：1. **以 React 为中心的生态系统。** 虽然支持 Angular，但 React 集成明显更加成熟。 Vue 和 Svelte 开发人员需要包装 CopilotKit 或寻找其他地方。2. **付费专区背后的高级功能。** 无头 UI 模式、分析驾驶舱、自学代理和扩展线程保留需要付费计划（专业版从 39 美元/开发者/月起，团队从 500 美元/月起）。3. **V2 API 迁移。** CopilotKit 在 2026 年初发布了一个突破性的 v2 API。v1 团队需要迁移挂钩和组件。 v2 API 更干净，但需要前期工作。4. **需要 Node.js 20+。** CopilotKit 使用现代 fetch 和 WebSocket ```
ts
x
// 在副驾驶聊天中渲染任务卡
useCopilotAction({
description: "在聊天中显示详细的任务卡", { name: "taskId", type: "string", description: "要显示的任务 ID", required: true }, ], 渲染：({taskId})=>{ const task =tasks.find((t) => t.id === taskId); if (!task) return <div>未找到任务</div>; 返回（ <div className="任务卡"> <h4>{任务.标题}</h4> <span className={`priority-${task.priority}`}>{task.priority}</span> <p>状态：{任务.完成？ "已完成"："正在进行"}</p> </div> ）； }, handler: ({ taskId }) => `显示任务 ${taskId} 的详细信息`, }); ``我们的。### CopilotKit 可以在没有 Next.js 的情况下工作吗？是的。 CopilotKit 可与任何 React 18+ 应用程序配合使用。 运行时端点可以单独托管（Express、Fastify 或任何 Node 服务器）。 `@copilotkit/react-core` 包没有 Next.js 依赖项。### CopilotKit 支持哪些 LLM 提供商？CopilotKit 正式支持 OpenAI（GPT-4o、GPT-4o-mini）、Anthropic（Claude 3.5）、Groq（Llama 3、Mixtral）、Google Gemini 和 Azure OpenAI。 Cohere、Mistral 和通过 Ollama 的本地模型都有社区适配器。### CopilotKit 可以免费用于生产吗？核心框架获得MIT许可并永久免费。 免费的开发人员层包括 200 个线程、1GB 多模式存储和 3 天的线程保留。 付费计划增加了无头 UI、分析、安全功能和更高的限制。### CopilotKit 与 Vercel AI SDK 有何不同？Vercel AI SDK 是一个流媒体和聊天 UI 工具包。 CopilotKit 是一个副驾驶嵌入框架，具有类型化状态共享和前端操作。 区别：Vercel AI SDK 制作聊天 UI； CopilotKit 让 AI 队友来操作您的应用程序。### CopilotKit 支持多代理系统吗？是的。 Copilot 运行时可以将请求路由到多个代理。 使用"CopilotRuntime"中的"agents"配置来注册 LangGraph 代理，并在运行时使用"agentId"属性在它们之间切换。### AG-UI 协议是什么？AG-UI 是一种用于代理到前端通信的开放线协议，由 CopilotKit 创建。 它标准化了流聊天、工具调用和状态共享。 自 2026 年起，Google、Microsoft、Amazon、LangChain 和 Mastra 均支持 AG-UI。---＃＃ 结论CopilotKit 填补了一个特定的空白：将 AI 副驾驶嵌入到现有的 React 应用程序中，并具有对前端状态的完全读/写访问权限。 凭借 31,536 名 GitHub 明星、2700 万美元的 A 轮融资以及 AG-UI 协议获得行业关注，它已成为交付 AI 原生界面的产品团队的首选。**行动项目：**1. 克隆 [CopilotKit 入门模板](https://github.com/CopilotKit/Co``` dockerfil e # Dockerfile FROM节点：20-alpine 工作目录/应用程序 复制包*.json ./ 运行 npm ci --only=生产 复制。 。 RUN npm 运行构建 曝光 3000 ENV NODE_ENV=生产 环境端口=3000 CMD ["npm"，"开始"] ``` g /6dffbvGU3D) 用于社区支持 4. 在 [X/Twitter](https://x.com/CopilotKit) 上关注团队以获取每周更新**讨论本文并在我们的 Telegram 群组中获取帮助：** [t.me/dibi8opensource](https: ``` yam l # docker-compose.yml 版本："3.8" 服务： 应用程序： 构建： . 端口： - "3000: 3000" 环境： - OPENAI_API_KEY=${OPENAI_API_KEY} - COPILOTKIT_API_KEY=${COPILOTKIT_API_KEY} 重新启动：除非停止 健康检查： 测试：["CMD"，"curl"，"-f"，"http://localhost: 3000/api/health"] 间隔：30秒 超时时间：10秒 重试次数：3 `` 跨越 14 个以上全球区域的 60 天 200 美元免费积分。 运行Open SourceAI Tools的独立开发者的默认选项。 - **{< aff "htstack" "footer-cta-legacy" "HTStack" >}}** — 从中国大陆低延迟访问的香港 VPS。 这与托管 dibi8.com 的 IDC 是同一个 IDC——在生产中经过了实际考验。*附属链接 - 它们不会花费您额外的费用，并且有助于保持 dibi8.com 的运行。*## 来源和进一步```打字稿 // lib/copilot-config.ts 导出常量 copilotConfig = { 运行时Url：process.env.NEXT_PUBLIC_COPILOT_RUNTIME_URL || "/api/copilotkit"， 模型：process.env.COPILOT_MODEL || "gpt-4o"， maxTokens：parseInt（process.env.COPILOT_MAX_TOKENS ||"4096"）， 温度：parseFloat(process.env.COPILOT_TEMPERATURE || "0.7"), threadRetention: parseInt(process.env.COPILOT_THREAD_RETENTION || "3"), // 天 }; ``` egratio n 文档](https://docs.copilotkit.ai/langgraph) - [Next.js 15 + CopilotKit 教程 (Noqta)](https://noqta.tn/en/tutorials/copilotkit-nextjs-15-in-app-ai-copilots-2026) - [LogRocket：构建 Agentic 前端应用程序](https://blog.logrocket.com/build-agentic-frontend-applications-copilotkit/) - [开发：LangGraph + CopilotKit 代理系统](https://dev.to/ayushgupta/building-a-product-ready-composable-ai-agent-system-with-copilotkit-and-la``` typescrip t // 中间件.ts 从"next/server"导入{NextResponse}； 从"next/server"导入类型{NextRequest}； 从"@upstash/ratelimit"导入{Ratelimit}； 从"@upstash/redis"导入{Redis}；'
常量速率限制 = 新速率限制({
redis: Redis.fromEnv(),
limiter: Ratelimit.slidingWindow(20, "1 m"), // 每分钟 20 个请求
});
导出异步函数中间件（req：NextRequest）{
if (req.nextUrl.pathname === "/api/copilotkit") {
const ip = 请求.ip ?? "127.0.0.1"；
const { success } =等待ratelimit.limit(ip);
如果（！成功）{
return NextResponse.json({ error: "速率受限" }, { status: 429 });
}
}
返回 NextResponse.next();
}
``````打字稿
// 将 LangSmith 跟踪添加到运行时
从"langsmith"导入{客户端}；
const langsmith = 新客户端({
apiKey: process.env.LANGSMITH_API_KEY,
项目名称："副驾驶套件生产"，
});
const 运行时 = new CopilotRuntime({
act:[]，
中间件：[
异步（ctx，下一个）=> {
const trace = wait langsmith.createRun({ name: "copilot-request" });
尝试{
常量结果=等待下一个（）；
等待 langsmith.updateRun(trace.id, { 错误: null });
返回结果；
} 捕获（错误）{
等待 langsmith.updateRun(trace.id, { 错误: String(err) });
抛出错误；
}
},
],
});
💬 留言讨论