如何在 React 应用中设置 CopilotKit：分步指南

# Web 开发 # 教程 # AI # React

如果您曾经构建过基于 AI 的应用程序，您可能已经注意到，为您的应用程序开发一个 AI 密集型功能，通过 API（如 OpenAI、Anthropic 等）利用 LLM 的强大功能，可能会非常耗时且令人沮丧。这不仅仅是编写 API 集成代码，编写其上的业务逻辑所花费的总时间也非常耗时。

这就是 CopilotKit 的作用所在。它允许您在极短的时间内构建可扩展的 LLM 应用程序。它还提供了无数种为您的应用构建炫酷独特功能的方法。

在本文中，我们将介绍如何使用 CopilotKit 提供的示例 repo 轻松入门，然后我们还将介绍如何从头开始将 CopilotKit 集成到新的/现有的 React 应用程序中。

什么是 CopilotKit 以及为什么要使用它？

CopilotKit 是一个框架，可帮助您轻松地将 AI 助手和代理集成到您的应用中。如果您使用 React，它尤其有助于拥有用于构建与 LLM API 交互的复杂组件的钩子和函数。

通过使用 CopilotKit，您不再需要编写 LLM API 集成逻辑，并且它可以简化在其上实现业务逻辑。

以下是您可以使用 CopilotKit 构建的一些功能：

人工智能聊天机器人

人工智能代理

人工智能助手

动态生成的组件

...还有更多！

如果您不熟悉 AI 代理，可以将其视为能够主动执行任务的自主数字工作者。它们不需要用户输入即可执行任务，因为它们会根据自己的理解独立做出决策。另一方面，AI 助手的功能相对较弱，因为它们只会在用户指示时执行特定操作，例如设置提醒、预订会议等。

从示例仓库开始

让我们继续使用 CopilotKit 设置一个简单的 React 应用程序。查看 CopilotKit 运行情况的最快方法是使用其中一个官方示例存储库。

点击此处前往他们的 GitHub 主页。您会注意到他们有多个示例存储库供您探索其强大的框架。

在撰写本文时，他们有以下示例存储库：

演示

示例文本区域

示例 todos 应用程序

演示电子表格

模拟银行

每个 repo 都展示了 CopilotKit 框架的独特能力。

让我们通过一个示例看看如何让这些存储库在本地工作。我们将克隆名为 **example-todos-app** 的存储库。

在您的 VS Code 中，打开终端并输入以下命令来克隆 **example-todos-app** 存储库：

git clone https://github.com/CopilotKit/example-todos-app.git

太好了，一旦你克隆了 repo，请通过执行以下操作转到项目目录：

cd example-todos-app

现在我们在本地有了代码库，我们需要添加一个重要的环境变量来完全设置应用程序。该环境变量要求我们创建一个新帐户，然后获取 API 密钥。

Copilotkit 提供免费试用，足够您试用。注册后，您将看到以下屏幕：

填写表格后，您将进入项目仪表板页面：

在这里，您可以找到重要信息，例如您的 Copilot Cloud API 密钥、发出的 Copilot Cloud 请求数量等。请注意，您最多可以在不提供 OpenAI API 密钥的情况下发出 50 个请求，这对于那些没有有效 OpenAI 订阅的人来说是完美的选择！

好的，继续。复制您的 Copilot Cloud API 密钥，然后返回到您的 VS Code 并在您的项目文件夹（example-todos-app 内）中创建一个新的 **.env** 文件，然后在 **.env** 文件内添加以下行：

NEXT_PUBLIC_COPILOT_CLOUD_PUBLIC_API_KEY="粘贴你的_copilot_cloud_api_key"

完美，现在让我们安装所有必需的依赖项：

npm install
or
yarn install

太棒了！依赖项安装完成后，我们继续启动服务器以运行我们的应用程序。

npm run dev
or
yarn dev

就是这样！您可以在浏览器中通过 URL **localhost:3000** 看到该应用正在运行。

它看起来类似于以下内容：

您会注意到右下角有一个聊天图标。如果您点击它，它将打开聊天界面。在这里，您可以命令 AI 根据需要修改您的待办事项列表。

尝试逐一发送以下消息：

删除所有待办事项列表项。

想出 3 个随机商业想法并将其添加到列表中。

将所有想法标记为已完成。

很酷吧？你可以在他们的 GitHub 主页上找到更多示例仓库。

将 CopilotKit 集成到你的 React 应用中

对于那些想要将 CopilotKit 集成到现有或新的 React 应用中的人，以下是从头开始设置的方法。让我们构建一个简单的聊天应用，让您可以像 Chat GPT 一样与 AI 对话。虽然不是什么大事，但足以向您展示 CopilotKit 的强大功能。

我将使用 create-react-app 来初始化一个新项目。

因此让我们继续并确保我们已经全局安装了 create-react-app：

npm install -g create-react-app

太好了，现在继续在 VS Code 中打开一个新窗口，打开一个文件夹并转到 VS Code 终端并输入以下内容：

npx create-react-app chat-app
or
yarn create react-app chat-app

这应该会自动创建一个新的反应项目以及所有启动的文件。

在我们继续之前，请确保您位于项目目录中。

cd chat-app

瞧，我们现在可以运行服务器来确保我们的项目已设置好。

npm start

请注意，在某些罕见情况下，运行 npm start 时可能会出现以下错误：

为了解决这个问题，请继续安装缺少的依赖项“ajv”，如下所示：

npm install ajv@latest

现在尝试再次运行 npm start，它应该可以正常工作。它将在默认端口 3000 启动服务器。转到它应该如下所示：

太棒了，让我们开始修改我们的 React 应用。我们将尝试实现“与 AI 对话”功能。CopilotKit 提供了一个开箱即用的组件，因此我们只需导入并使用它即可。虽然没有什么特别的，但它在很大程度上展示了 CopilotKit 的强大功能。

但首先我们需要安装并设置 CopilotKit 框架才能使用它。

将 CopilotKit 添加到你的 React 应用

第一步是在我们的应用中安装 CopilotKit 库。我们基本上需要 2 个库。第一个是 copilotkit/react-ui，它提供开箱即用的 AI 驱动组件。

第二个库是 copilotkit/react-core，它包含与 LLM API 交互的主要逻辑。

转到终端并输入：

npm install @copilotkit/react-ui @copilotkit/react-core

[要查看 CopilotKit 的官方快速入门指南，请点击此处]

设置 CopilotKit

太好了，让我们继续修改代码，以便我们可以在我们的应用程序中使用 CopilotKit 的功能。

为了使用 CopilotKit 框架的所有功能，我们需要将 **CopilotKit 提供程序** 添加到应用中。此提供程序应包含应用的所有组件，这就是我们需要将其添加到父组件或组件树顶部的原因。此父组件可能因应用结构而异。例如，如果您的应用是使用 create-react-app 初始化的（如我们的示例），则父组件是 **index.js** 组件。另一方面，如果您使用的是 _Next.js _，则需要在 **layout.tsx** 组件内添加 CopilotKit 提供程序。

由于我们在此示例中使用 create-react-app，我们将在 **src/index.js** 文件中添加 CopilotKit 提供程序。

你的 **index.js** 文件应该是这样的：

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { CopilotKit } from "@copilotkit/react-core";
import "@copilotkit/react-ui/styles.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  
    
      
    
  
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

我们已完成 Copilotkit 提供程序的设置。现在我们需要做的就是托管 CopilotKit 运行时，然后就可以开始使用 CopilotKit 了。

有两种使用 CopilotKit 的方法：通过自托管运行时或使用 CopilotKit 云。

为了使本指南简单明了，我们将使用 CopilotKit 云来构建“与 AI 对话”页面。

我们已经在上面介绍了如何注册 CopilotKit 云并获取应用的 API 密钥。这相当简单，您可以在上完成。

完成注册后，您会在仪表板上找到您的 API 密钥，它看起来应如下所示：

复制 Copilot Cloud 公共 API 密钥，因为我们需要将其添加到我们的环境变量中。在名为 **.env** 的文件夹中创建一个名为的新文件并添加以下值：

REACT_APP_COPILOTKIT_API_KEY="粘贴你的_copilot_cloud_api_key"

好了，我们已经完成了 CopilotKit 的设置！我们现在需要做的就是在任何组件中导入 CopilotKit 函数/钩子，然后我们就可以开始构建 CopilotKit 支持的 LLM 功能了。让我们开始吧。

由于我们正在构建与 AI 对话的功能，因此我们将使用名为的 React 组件。它由 CopilotKit 提供，我们只需导入它即可开始使用它。

转到 src 文件夹内的 **src/App.js** 文件并确保它看起来像这样：

import "./App.css";
import { CopilotChat } from "@copilotkit/react-ui";
function App() {
  return (
    
      
    
  );
}

export default App;

就这样，我们完成了！现在让我们运行命令来启动我们的服务器，如下所示：

npm start

您的服务器应在时自动启动。它应如下所示：

您现在可以开始与 AI 交谈，就像您通常与聊天 GPT 交谈一样！

正如您所看到的，设置一切相当简单，因为 CopilotKit 库提供了现成的 UI 组件，并且对 OpenAI 的 API 调用也由 CopilotKit 负责。

您可以快速构建基于 LLM 的应用程序，而无需重写相同的 API 调用逻辑并创建根据 LLM 响应动态更新的 UI 组件。