使用 CopilotKit 与 AI 副驾驶一起飞行 🪁

从前有个叫皮特的人。他的公司急需人工智能副驾驶系统。但定制开发一个副驾驶系统需要一个月的时间。皮特不太积极主动，甚至都没尝试寻找符合他要求的产品。可悲的是，过了一段时间，他的公司倒闭了。

寓意：别像Pete那样。去探索开源的世界吧。Copilotkit 🪁 就是这样一款操作系统产品，它能拯救你和你的产品。

在这篇博客中，我将讨论以下内容：

副驾驶套件，
如何使用 Copilotkit 构建一个简单的待办事项列表应用程序
Copilotkit 联合代理，
Quira Quest × Copilotkit 🪁 Preptember（奖金池 1350 美元，外加奖品）。

CopilotKit是什么🪁⁉️

CopilotKit 🪁 是将生产就绪的 Copilot 集成到任何产品中的最简单方法。

它是一款开源工具，可以非常轻松地将 AI 副驾驶集成到您的 React 应用程序中。

🔰 主要功能

应用内 AI 聊天机器人：即插即用的 AI 聊天机器人组件，包括对无头 UI 的支持。
副驾驶可读状态：使副驾驶能够读取和理解应用程序状态。
副驾驶操作：副驾驶可以在应用程序中执行操作。
生成式用户界面：渲染副驾驶聊天界面中的任何组件。
Copilot Textarea：强大的 AI 自动补全功能，可直接替换任何文本区域。
AI 自动建议：在您的 AI 聊天界面中使用 AI 驱动的自动建议功能。
副驾驶任务：让副驾驶根据应用程序状态主动采取行动。

还有更多精彩功能等你来体验！快来探索吧！😉

使用 Copilotkit 🪁 在 5 分钟内创建待办事项应用程序 📝 Copilot

在本简短教程中，我们将实现三件事：

如何在聊天界面中嵌入应用内副驾驶功能。
如何使用此功能useCopilotReadable允许您的副驾驶设备读取您的应用程序状态。
如何使用该功能useCopilotAction允许您的副驾驶执行操作。

在本教程结束时，我们将完成一个类似下图的项目👇

开始编程吧！🧑‍💻 3... 2... 1... 🟢

1️⃣ 在 React 应用中创建一个简单的待办事项列表

如果您不想从头开始创建，那么只需按照以下步骤操作即可：

请使用以下命令克隆此仓库：



   git clone -b base-start-here https://github.com/CopilotKit/example-todos-app.git

然后跳转到待办事项应用程序目录cd example-todos-app

安装依赖项



   npm install

2️⃣ 设置 Copilotkit 🪁

在这个例子中，我们将使用@copilotkit/react-core导入@copilotkit/react-uiCopilokit 的核心库和 UI 库的库。

我使用bun来安装这些依赖项，但你也可以使用npm、pnpm或yarn。



   bun add @copilotkit/react-core @copilotkit/react-ui

现在，我们已经下载了所需的依赖项，是时候将 Copilokit 添加到我们的待办事项应用程序中了。

3️⃣ 设置 Copilot 运行时端点

我们将使用最简单的方法来开始使用 Copilotkit，那就是使用Copilotkit Cloud，但是，是的，你也可以使用Self-Hosting！

创建一条新路由来处理该app/api/copilotkit/route.ts端点，并将以下代码粘贴到路由中：



import {
  CopilotRuntime,
  OpenAIAdapter,
  copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import OpenAI from "openai";
import { NextRequest } from "next/server";

const openai = new OpenAI();
const serviceAdapter = new OpenAIAdapter({ openai });

const runtime = new CopilotRuntime();

export const POST = async (req: NextRequest) => {
  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
    runtime,
    serviceAdapter,
    endpoint: "/api/copilotkit",
  });

  return handleRequest(req);
};

您的 Copilot Runtime 端点应该位于http://localhost:{port}/api/copilotkit。

4️⃣ 配置 CopilotKit 提供程序和 CopilotKit 聊天弹出窗口

请app/page.tsx用以下代码进行更新：



"use client";

import { TasksList } from "@/components/TasksList";
import { TasksProvider } from "@/lib/hooks/use-tasks";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotPopup } from "@copilotkit/react-ui";

export default function Home() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <TasksProvider>
        <TasksList />
      </TasksProvider>
      <CopilotPopup />
    </CopilotKit>
  );
}

您可以省略步骤 3，直接使用 Copilotkit API 密钥，只需将此行代码替换<CopilotKit runtimeUrl="/api/copilotkit">为此即可<CopilotKit publicApiKey="your-api-key">。您可以从这里获取您的 API 密钥：Copilotkit Cloud API 密钥。

5️⃣ 添加副驾驶可读状态

移动到此处libs/hooks/use-tasks.tsx并添加以下代码行：



// ... the rest of the file

import { useCopilotReadable } from "@copilotkit/react-core";

export const TasksProvider = ({ children }: { children: ReactNode }) => {
  const [tasks, setTasks] = useState<Task[]>(defaultTasks);

  useCopilotReadable({
    description: "\"The state of the todo list\","
    value: JSON.stringify(tasks)
  });
  // ... the rest of the file
}

对于该description属性，我们提供了一个简洁的描述，告诉副驾驶这条可读数据的含义。

6️⃣ 添加副驾驶操作

useCopilotAction hook 是一个强大的 hook，它允许我们向副驾驶系统注册操作。

再次，移至libs/hooks/use-tasks.tsx并添加以下代码行：



// ... the rest of the file

import { useCopilotReadable, useCopilotAction } from "@copilotkit/react-core";

export const TasksProvider = ({ children }: { children: ReactNode }) => {
  const [tasks, setTasks] = useState<Task[]>(defaultTasks);

  useCopilotAction({
    name: "addTask",
    description: "\"Adds a task to the todo list\","
    parameters: [
      {
        name: "title",
        type: "string",
        description: "\"The title of the task\","
        required: true,
      },
    ],
    handler: ({ title }) => {
      addTask(title);
    },
  });

  useCopilotAction({
    name: "deleteTask",
    description: "\"Deletes a task from the todo list\","
    parameters: [
      {
        name: "id",
        type: "number",
        description: "\"The id of the task\","
        required: true,
      },
    ],
    handler: ({ id }) => {
      deleteTask(id);
    },
  });

  useCopilotAction({
    name: "setTaskStatus",
    description: "\"Sets the status of a task\","
    parameters: [
      {
        name: "id",
        type: "number",
        description: "\"The id of the task\","
        required: true,
      },
      {
        name: "status",
        type: "string",
        description: "\"The status of the task\","
        enum: Object.values(TaskStatus),
        required: true,
      },
    ],
    handler: ({ id, status }) => {
      setTaskStatus(id, status);
    },
  });

  // ... the rest of the file
};

你的应用已经准备就绪！！！！下面是你的这款应用的快速演示。

如果你是视觉型学习者，那就观看这个教程吧。

这是Copilotkit ToDo 应用程序教程链接。

Copilotkit 联合代理（抢先体验版）🤖🙎‍♂️

人工智能代理在与人类协同工作时表现最佳。让代理擅长特定任务远比让其完全自主地完成特定任务容易得多（例如：自动驾驶汽车）。

CopilotKit 的 CoAgents 为将 LangGraph 代理与参与其中的人类连接起来提供了基础架构。

🔰 协同代理的功能

CoAgent 的 4 个核心功能如下：

💨 流式传输中间代理状态
🫱🏻‍🫲🏽 代理和应用程序之间的共享状态*
❓ 代理问答（等待回复）
🚘 代理控制

与合作代理人快速入门

1️⃣`copilotkit`使用 pip 安装 python 包：



 pip install copilotkit --extra-index-url https://copilotkit.gateway.scarf.sh/simple/

2️⃣ 基于语言图的协同代理

CopilotKit 与 LangGraph 集成，可构建功能强大的 CoAgent，这些 CoAgent 可在 CopilotKit 内部运行。您可以为其提供任何 LangGraph 代理，例如：



import uvicorn
from fastapi import FastAPI
from copilotkit.integrations.fastapi import add_fastapi_endpoint
from copilotkit import CopilotKitSDK, LangGraphAgent
from your_package import research_agent

app = FastAPI()
sdk = CopilotKitSDK(
  agents=[
    LangGraphAgent(
      name="research_agent",
      # the description helps CopilotKit to pick the agent when a certain skill is needed, i.e. researching
      description="Research the web.",
      agent=research_agent,
    )
  ]
)

add_fastapi_endpoint(app, sdk, "/copilotkit")

def main():
  """Run the uvicorn server."""
  uvicorn.run("your_package:app", host="127.0.0.1", port=8000, reload=True)