为了账号安全,请及时绑定邮箱和手机立即绑定

用Pinecone、Anthropic和CopilotKit打造你自己的知识型RAG助手 😎

最重要的内容

在这个教程中,我们将一步步教你如何使用Anthropic AI API、Pinecone API和CopilotKit构建一个由AI驱动的RAG Copilot助手来增强你的产品知识库。

下面我们要讲的是:

  • 使用 Next.js 构建一个简单的產品知識庫
  • 将 CopilotKit UI 组件添加到您的应用程序客户端,并使用 CopilotKit 的 API 端点。
  • 为您的知识库文章创建可搜索索引,集成 Pinecone API。

咱们开始吧!

CopilotKit是什么

CopilotKit 是一个领先的开源框架,用于将功能丰富的 AI 助手集成到您的应用程序中。它提供了一个 功能丰富的 SDK,支持各种 AI 助手应用案例,包括 上下文感知操作,和 例如生成式 UI

Copilotkit 主页

这意味着你可以专注于定义副驾的角色,而不是陷入从零开始构建一个或处理复杂的集成问题的困境。去掉“困境”后的最终版本为:
这意味着你可以专注于定义副驾的角色,而不是从零开始构建一个或处理复杂的集成问题。

点击这里访问 CopilotKit 的 GitHub 仓库 ⭐️

先决条件

在我们开始之前,这里有一些你需要准备的:

  • 熟悉使用 React.js 构建 web 应用。有一点需要提醒,你还需要一些 TypeScript 的知识,因为我们将在这个项目中使用它。
  • 请确保你的系统上安装了 Node.js 20 或更高版本。如果没有,请访问 官方 Node.js 网站 进行下载和安装。

一旦你把这些都搞定,我们就搭建我们要用的开发环境。

下面是我们将要开发的内容的一个快速预览

应用预览图

项目设置:

首先,运行以下命令创建一个新的目录用于项目,并生成用于Next.js应用的初始文件和文件夹:

首先,创建一个名为product-knowledge-base的文件夹并进入该文件夹。然后,使用npx create-next-app product-knowledge-base创建一个名为product-knowledge-base的Next.js应用。

点击全屏模式 退出全屏模式

按照设置提示进行操作。你可以像下面这样选择(根据你的项目需求调整)。

项目搭建

创建项目之后,进入项目目录,并通过运行开发服务器来检查是否一切都运行正常。

    cd product-knowledge-base
    npm run dev

全屏 退出全屏

这时,你的应用程序可以在本地的 http://localhost:3000 这个网址运行。

首先,接下来让我们为这个项目安装所需的依赖项。这些包括:

  • Mantine UI。
  • CopilotKit。
  • Pinecone SDK。
  • Anthropic AI SDK。
  • Axios。

运行以下命令来安装它们:

    yarn add @anthropic-ai/sdk @mantine/core @mantine/hooks @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime lucide-react axios @pinecone-database/pinecone

全屏 退出全屏

现在,让我们搭建文件结构。下面是我们将要创建的主要文件和目录。

  • src/app/ui/service/index.ts: 处理对后端的 API 调用来获取虚拟帖子。
  • src/app/ui/components/KnowledgeBase.tsx: 知识库的主要 UI 部件。
  • src/app/lib/types/post.ts:
  • src/app/lib/data/data.ts: 知识库的虚拟帖子数据。
  • src/app/api/copilotkit/route.ts: CopilotKit API 接口。
  • src/app/api/posts/route.ts: 虚拟帖子的 API 接口。

你的项目结构是这样的:

    产品知识库/
    ├── src/
    │   ├── app/
    │   │   ├── ui/
    │   │   │   ├── 服务/
    │   │   │   │   └── index.ts
    │   │   │   ├── 组件/
    │   │   │   │   └── KnowledgeBase.tsx
    │   │   ├── 库/
    │   │   │   ├── 类型定义/
    │   │   │   │   └── post.ts
    │   │   │   ├── 资料/
    │   │   │   │   └── data.ts
    │   │   ├── API/
    │   │   │   ├── 协同飞行员套件/
    │   │   │   │   └── route.ts
    │   │   │   ├── posts/
    │   │   │   │   └── route.ts

进入全屏模式,切换退出全屏模式


有了这样的设置,你现在就可以为本教程使用一个开发环境了。

搭建知识库前端界面

首先,先导入 CopilotKit 和 Mantine UI,然后用它们包裹整个应用,使它们全局可用。以下是如何更新你的 layout.tsx 文件:

导入 { MantineProvider } from "@mantine/core";

import "@mantine/core/styles.css";
import "@copilotkit/react-ui/styles.css";

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

导出默认函数 RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  返回 (
    <html lang="en">
      <body>
        <CopilotKit runtimeUrl="/api/copilotkit">
          <MantineProvider>{children}</MantineProvider>
        </CopilotKit>
      </body>
    </html>
  );
}

全屏 全屏模式 退出全屏

在用这些提供器包裹这个应用时,记得将 runtimeUrl="<endpoint-url>" 属性传递给 CopilotKit 提供器。

设计知识库这一部分

在本部分,我们将介绍构建知识库组件所需的相关代码。首先,让我们定义 Post 接口。请在 src/app/lib/types/post.ts 文件中添加以下代码:

    export interface Post {
      id: number;
      title: string;
      summary: string;
      content: string;
      category: string;
      createdAt: string;
    }

点击全屏按钮进入全屏,点击退出全屏按钮退出全屏

接下来,转到 src/app/ui/service/index.ts 文件,并在其中添加以下代码以处理从应用程序后端获取帖子内容的API请求:

    import axios from 'axios';
    import { Post } from '@/app/lib/types/post';

    // 从环境变量获取API基础URL
    const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL 

    // 定义一个异步函数来获取帖子列表
    export const fetchPosts = async (): Promise<Post[]> => {
      // 使用axios从API获取帖子列表
      const response = await axios.get(`${API_BASE_URL}/api/posts`);
      // 返回获取到的帖子数据
      return response.data;
    };

全屏 退出全屏

让我们在项目根目录下创建一个 .env 文件,并添加以下基础网址。

    NEXT_PUBLIC_API_BASE_URL='http://localhost:3000'

全屏, 退出全屏

现在,让我们创建知识库UI组件。从在src/app/ui/components/KnowledgeBase.tsx内添加以下导入项开始:

    "use client"

    import { useState, useEffect } from "react";
    import {
      Container,
      Title,
      Grid,
      Card,
      Text,
      Badge,
      Group,
      Stack,
      Box,
      Modal,
      List,
    } from "@mantine/core";
    import { BookOpen } from "lucide-react";
    import { Post } from "@/app/lib/types/post";
    import { fetchPosts } from "@/app/ui/service";

切换到全屏 退出全屏

接下来,定义并初始化 KnowledgeBase 函数组件(Functional Component),并初始化如下状态:

    export function KnowledgeBase() {
      const [posts, setPosts] = useState<Post[]>([]);
      const [loading, setLoading] = useState(true);
      const [selectedPost, setSelectedPost] = useState<Post | null>(null);

      if (loading) {
        return <Text>正在加载...</Text>;
      }

      return (
        <Container size="md" py="xl" ml="xl">
          <Stack gap="xl">
            <Group justify="center" align="center">
              <BookOpen size={32} />
              <Title order={1}>CopilotKit 产品知识库</Title>
            </Group>
          </Stack>
        </Container>
      );
    }

进入全屏 退出全屏

现在,我们现在来定义一个函数来从API获取帖子内容的列表:

    useEffect(() => {
      const 加载帖子 = async () => {
        try {
          const 帖子数据 = await fetchPosts();
          setPosts(帖子数据);
        } catch (错误) {
          console.error("加载帖子时出错:", 错误);
        } finally {
          setLoading(false);
        }
      };

      加载帖子();
    }, []);

进入全屏模式,退出全屏

为了显示从应用的后端获取的文章,添加如下代码。我们将以网格形式将帖子显示为卡片。

    {/* 显示帖子 */}
    <Grid>
      {posts.map((post) => (
        // 遍历 posts 数组
        <Grid.Col key={post.id} span={{ base: 12, sm: 6, md: 4 }}>
          <Card
            shadow="sm"
            padding="lg"
            radius="md"
            withBorder
            onClick={() => setSelectedPost(post)}
            style={{ cursor: "pointer" }}
          >
            <Stack gap="md"> // 间距: md
              <Title order={3}> // 标题
                {post.title}
              </Title>
              <Badge color="blue" variant="light">
                {post.category}
              </Badge>
              <Text size="sm" c="dimmed">
                {post.summary}
              </Text>
              <Text size="xs" c="dimmed">
                发布于: {new Date(post.createdAt).toLocaleDateString()} // 发布于: 后跟日期
              </Text>
            </Stack>
          </Card>
        </Grid.Col>
      ))}
    </Grid>

进入全屏,退出全屏

为了展示单篇文章的内容,在这种情形下,我们将在点击一个文章卡片时,在模态组件中显示示例内容,以简化操作。为此,请添加以下代码段:

    {/*  embra selectedPost的模态框 */}
    {selectedPost && (
      <Modal
        opened={!!selectedPost}
        onClose={() => setSelectedPost(null)}
        标题={selectedPost.title}
        centered
        size="xl"
      >
        <Stack gap="md">
          <List>
            {selectedPost.content
              .split("")
              .filter((item) => item.trim() !== "")
              .map((item, index) => (
                <List.Item key={index}>{item}</List.Item>
              ))}
            {/* 遍历selectedPost.content中的每个字符,并将其渲染为列表项。 */}
          </List>
        </Stack>
      </Modal>
    )}

点击全屏 点击退出全屏

我们接下来定义一个函数,以便在用户点击帖子的卡片时更新被选中的帖子状态。

      const handlePostClick = (post: Post) => {
        setSelectedPost(post);
      };

全屏模式 退出全屏

最后,要在浏览器中显示此组件,请在 src/app/page.tsx 文件中导入该组件,并使用如下代码(确保删除所有相关的多余 Next.js 代码)。

    导入 KnowledgeBase 从 "@/app/ui/components/KnowledgeBase";

    export default function Home() {
      返回 (
        <div>
          <KnowledgeBase />
        </div>
      );
    }

全屏模式。切换回正常模式。

加入 CopilotKit 界面组件

接下来的步骤是将CopilotKit UI组件添加到知识库的用户界面中。CopilotKit的React SDK提供了易于自定义的设计精良的UI组件,其中包括侧边栏、弹出窗口、文本区域和隐藏式UI组件。在这个例子中,我们将用到CopilotSidebar组件来渲染一个应用程序内的聊天机器人界面。

要在你的 src/app/ui/components/KnowledgeBase.tsx 文件里添加以下导入代码:“CopilotKit”的 UI 侧边栏。

    import { CopilotSidebar } from "@copilotkit/react-ui";

切换到全屏,切换回正常模式。

把组件导入后,在 JSX 的返回语句里加上它:

    <Group justify="center" style={{ width: "100%" }}>
      <Box style={{ flex: 1, maxWidth: "350px" }}>
        <CopilotSidebar
          instructions="帮助用户找到适合他们查询的知识库文章"
          labels={{
            initial: "欢迎!请描述您需要帮助的查询内容。",
          }}
          defaultOpen={true}
          clickOutsideToClose={false}
        />
      </Box>
    </Group>

全屏查看 取消全屏

该组件可以接收多种属性,包括这些 instructionslabelsdefaultOpenclickOutsideToClose。尤为重要的是,instructions 属性允许你提供额外的上下文信息,以帮助 Copilot AI 大型语言模型更好地理解并回应用户的查询。

使用 CopilotKit 钩子来执行 AI 操作

React 的 CopilotKit SDK 还提供了一组有用的钩子,这些钩子使您可以定义自定义操作,如检索知识库文章。在接下来的示例中,我们将使用 useCopilotAction 钩子来定义操作,即根据用户查询检索知识库文章。

为了做到这一点,你首先需要在 KnowledgeBase 组件文件中导入 useCopilotAction 钩子,如下所示。

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

切换到全屏 退出全屏

导入后,你可以初始化挂钩,并指定你希望助手执行的操作。这里,我们定义一个叫“FetchKnowledgebaseArticles”的操作,以根据用户的查询获取相关文章。我们来写这个代码:

    useCopilotAction({
      name: "获取知识库文章",
      description: "基于用户查询获取相关知识库文章",
      参数: [
        {
          名称: "query",
          类型: "字符串",
          描述: "用户对知识库的查询",
          必需: true,
        },
      ],
      render: "正在为您查询相关答案...",
    });

全屏模式 退出全屏

此配置包括几个重要的元素。name属性为操作提供唯一的标识,而description解释了它的目的以及何时使用它。

此外,parameters 数组还定义了该操作所需的输入,例如用户在这次操作中的查询。另外,render 属性可以让你指定在执行操作时显示的内容。比如说,我们会显示一个简单的状态消息,让用户知道正在处理的进度。

连接应用后端

要完成整个应用的全部工作流程,让我们通过添加获取帖子的接口、集成CopilotKit的相关功能以及使用Pinecone API创建知识库文章的可搜索索引来构建后端。

要这么做的话,请访问此GitHub仓库中的虚拟帖子数据文件,复制并粘贴到您本地的 src/app/lib/data/data.ts 文件里。

接着,在 src/app/api/posts/route.ts 文件中,定义模拟帖子 API 端点如下所示:

import { NextResponse } from 'next/server';
import { posts } from '@/app/lib/data/data';

// 获取帖子数据并返回 JSON
export async function GET() {
  return NextResponse.json(posts);
}

点全屏;再按一下退出全屏

这时,启动你的本地开发服务器,并访问你应用的本地 URL。你应该能看到帖子列表,还有 CopilotKit 的侧边栏组件。

应用截图

回到指南的主要意图,即将AI副驾集成到产品知识库中。通常,大多数产品知识库都包含各种内容——博客文章、FAQ、内部操作规程、API文档等。这比我们在这个例子中使用的三个示例帖子要丰富得多。

通常,这些知识库已经集成了Algolia Search API,让用户可以快速搜索资源。对于AI副驾来说,我们不再满足于简单的“搜索展示”。本质上,我们希望利用大语言模型理解自然语言的能力来实现更像对话的搜索体验,以便更好地利用知识库中的资源。

不再是简单地返回静态搜索结果,副驾助手将允许用户与资源相关的话题进行“聊天”,进一步提问,并且是以更加用户友好的方式获得答案。这种方式可以说更加直观。

为了做到这一点,我们需要创建可供大型语言模型搜索的索引——本质上是AI可以查询的数据源,从中获取正确的信息。为此,我们将使用Pinecone的向量数据库API创建一个可供搜索的索引,用于示例数据。

使用Pinecone API SDK创建搜索索引

Pinecone 是一种向量数据库,旨在为应用程序提供快速、可扩展且精确的智能搜索功能。它允许你高效地存储和检索数据的向量,非常适合执行语义搜索和推荐系统等任务。

这意味着你可以不用完全依赖Anthropic AI LLM来生成回复,而是可以根据已有的训练知识。你可以定制化LLM,使你的Copilot可以根据你的应用数据来回答用户的问题和生成回复。理想情况下,这就是为什么Pinecone变得有用——它允许你为你的数据创建向量数据库,这些数据库可以轻松地用大型语言模型搜索。

本质上,在这个例子中,我们只是将 Pinecone 集成到系统中,为我们的知识库数据创建索引。这样一来,助手可以首先搜索数据并生成更相关且更具上下文的响应,并能准确回答基于同一知识库的后续问题。

下面是一个快速概览,我们要做什么。

步骤1:设置 Pinecone 环境。
步骤2:为示例文章生成知识库内容的嵌入。
步骤3:对知识库数据进行索引和查询。

src/app/api/copilotkit/route.ts 文件中,让我们开始吧,首先导入以下内容。

导入 { Pinecone } 从 '@pinecone-database/pinecone';
从 "@/app/lib/data/data" 导入 { posts };

点击进入全屏模式。点击退出全屏模式。

接下来,设置 Pinecone 和 Anthropic 的 API 密钥对应的环境变量,例如:

const ANTHROPIC_API_KEY = process.env.NEXT_PUBLIC_ANTHROPIC_API_KEY; // ANTHROPIC_API_KEY 环境变量
const PINECONE_API_KEY = process.env.NEXT_PUBLIC_PINECONE_API_KEY; // PINECONE_API_KEY 环境变量

全屏模式 退出全屏

这是一个好习惯,添加一个检查来确保提供了这些键。别担心,我们稍后会告诉你如何获取Anthropic的API密钥。

    if (!ANTHROPIC_API_KEY || !PINECONE_API_KEY) {
      console.error('缺少必要的API密钥。');
      process.exit(1);
    }

进入全屏,退出全屏

现在,让我们初始化 Pinecone SDK 并设置必要的配置。

    const pinecone = new Pinecone({ apiKey: PINECONE_API_KEY });
    const model = 'multilingual-e5-large';
    const indexName = '知识库索引';

全屏 全屏退出

我们现在可以开始创建Pinecone的索引了。索引本质上是一种结构化的数据存储(数据被转换为数值),它允许你根据向量相似性搜索和获取数据。

理想情况下,对于一个生产环境中的应用,你通常会通过API调用来获取帖子的动态数据。然而,在这里,我们将使用测试数据来模拟这个流程。

为了创建我们知识库数据的向量数据库,我们需要初始化 Pinecone 索引。

有一个实现此功能的函数。

    // 初始化Pinecone索引的函数
    const initializePinecone = async () => {
      const maxRetries = 3;
      const retryDelay = 2000;

      for (let i = 0; i < maxRetries; i++) {
        try {
          const indexList = await pinecone.listIndexes();
          if (!indexList.indexes?.some(index => index.name === indexName)) {
            await pinecone.createIndex({
              name: indexName,
              dimension: 1024,
              metric: 'cosine',
              spec: {
                serverless: {
                  cloud: 'aws',
                  region: 'us-east-1',
                },
              },
            });
            await new Promise(resolve => setTimeout(resolve, 5000)); // 等待5秒
          }
          return pinecone.index(indexName);
        } catch (error) {
          if (i === maxRetries - 1) throw error;
          console.warn(`正在重试初始化... (${i + 1}/${maxRetries})`);
          await new Promise(resolve => setTimeout(resolve, retryDelay));
        }
      }
      return null; 
    };

全屏显示,退出全屏

设置完成后,你可以用它来存取你的知识库数据。

接下来,我们将为知识库数据生成嵌入表示。这一步对于使应用程序能够高效地存储和通过向量嵌入搜索大量数据至关重要。

将知识库的内容嵌入化,就是将原始数据,通常是文本,转换成代表其意义的向量。Pinecone 然后把这些向量存储到索引中。

一旦建立了索引,您的应用程序可以执行相似性搜索这样的操作,使其能快速找到最相关的数据,基于查询和存储内容之间的向量相似度。

要做到这一点,你可以试试添加下面的函数:

    // 初始化 Pinecone 并准备索引的过程
    (async () => {
        try {
          const index = await initializePinecone();
          如果存在索引 {
            const embeddings = await pinecone.inference.embed(
              model,
              posts.map(d => d.content),
              { inputType: 'passage', truncate: 'END' }
            );

            const records = posts.map((d, i) => ({
              id: d.id.toString(),
              values: embeddings[i]?.values ?? [],
              metadata: { text: d.content },
            }));  
            await index.namespace('knowledge-base-data-namespace').upsert(
              records.map(record => ({
                ...record,
                values: record.values || [],
              }))
            );
          }
        } catch (error) {
          console.error('错误: 初始化 Pinecone 失败', error);
          process.exit(1);
        }
      })();

全屏 退出全屏

有几个注意点我们得注意:

  • 嵌入向量:这些是内容的向量表示,例如文本或文章,它们捕捉了数据的语义含义。在这种情况下,嵌入向量是使用 Pinecone 的模型 multilingual-e5-large 生成的,该模型处理内容并将其转换为向量。请注意,您也可以使用其他模型,例如 OpenAI,它为该任务提供了嵌入 API。
  • 命名空间:在 Pinecone 中,命名空间是对索引的逻辑分区。它允许您在索引中组织数据并在数据的特定部分执行操作。在这种情况下,命名空间设置为“knowledge-base-data-namespace”,用于将知识库的内容组织在一起。
  • 记录:这些代表插入 Pinecone 中的数据。每个记录包括一个 id、值(嵌入向量)和元数据(比如文章的内容)。值是 Pinecone 用来进行相似度搜索的数据,而元数据则为每个记录提供了额外的上下文。

要让这个设置起作用,你需要获取Pinecone的API密钥。

如何获取您的 Pinecone API 密钥:

要获取 Pinecone AI 的 API 秘钥,请按以下步骤做:

点击Pinecone 开发者界面

Pinecone 控制面板

  1. 先点击 API密钥 选项卡,然后点击 创建API密钥。你可以选择使用默认密钥,或者创建一个新的。

松果钥匙标签

  1. 指定密钥名称并点击 创建密钥 按钮。

点击此处创建API密钥:

完成这些步骤,然后回到你的.env文件中,并粘贴密钥:

NEXT_PUBLIC_PINECONE_API_KEY=your-api-key # 这里填写你的API密钥

全屏模式,退出全屏

整合Node.js端点到CopiloKit

最后一步是添加用于处理前端请求的 CopilotKit Node.js 端点。

在接下来之前,您需要配置Anthropic API以便向其服务发出请求。为此,

  1. 按照访问Anthropic AI 文档来创建一个Anthropic账户并设置账单。

anthropic 如图所示,这是一张来自Anthropic的图片。

  1. 登录到Anthropic API控制台,然后生成API密钥。

anthropic2 点击这里查看图片

一旦你获得了 API 密钥,便在项目根目录的 .env 文件中添加它(.env 文件是环境变量配置文件)。

确保已经设置好计费和配额,让您的应用能够发起 API 请求。

记得,我们在应用里加入了 CopilotKit API 的 URL 地址,以便它能将请求转发到 CopilotKit 后端处理。为了做到这一点,我们需要定义 CopilotKit API 的端点位置来管理和处理这些请求内容。我们先从在 src/app/api/copilotkit/route.ts 文件中导入以下内容开始:

    import { CopilotRuntime, AnthropicAdapter, copilotRuntimeNextJSAppRouterEndpoint } from "@copilotkit/runtime"; // 从"@copilotkit/runtime"导入CopilotRuntime, AnthropicAdapter 和 copilotRuntimeNextJSAppRouterEndpoint

    import Anthropic from "@anthropic-ai/sdk"; // 从"@anthropic-ai/sdk"导入Anthropic

    import { NextRequest } from 'next/server' // 从'next/server'导入NextRequest

开启全屏 关闭全屏

Copilot Runtime 是 CopilotKit 的后端引擎,允许应用与大型语言模型交互。借助它,你可以为你的副驾助手定义后端动作。你可以指定大量任务,包括调用内部数据库和管理不同的流程和工作流程。然而,在这个特定的例子中,我们将定义一个操作来查询 Pinecone 索引来获取与用户查询相关联的文章。

请添加以下代码:

const runtime = new CopilotRuntime({
  actions: () => [
    {
      name: 'FetchKnowledgebaseArticles',
      description: '基于用户查询获取相关知识库文章',
      parameters: [
        {
          name: 'query',
          type: 'string',
          description: '用于知识库索引搜索的用户查询',
          required: true,
        },
      ],
      handler: async ({ query }: { query: string }) => {
        try {
          const queryEmbedding = await pinecone.inference.embed(
            model,
            [query],
            { inputType: '查询' }
          );
          const queryResponse = await pinecone
            .index(indexName)
            .namespace('知识库数据命名空间')
            .query({
              topK: 3,
              vector: queryEmbedding[0]?.values || [],
              includeValues: false,
              includeMetadata: true,
            });
          return { articles: queryResponse?.matches || [] };
        } catch (error) {
          console.error('获取知识库文章出错:', error);
          throw new Error('获取知识库文章失败');
        }
      },
    },
  ],
});

切换到全屏: 退出全屏

让我们来看看这个动作处理程序的运作。理想情况下,它是整个集成的核心引擎。这个处理程序接收来自 Copilot 客户端的查询参数。

使用Pinecone的查询操作后,它会将查询转换成向量形式,然后与存储在Pinecone中的索引向量进行对比,找到索引中与查询最相关的前三篇文章。结果包含了向量值和元数据,这些元数据中包含了与查询相关的实际匹配信息。

由于大多数产品知识库包含大量的文章帖子,有些甚至涵盖了相似的想法,而其他则完全不同。因此,返回与查询相关的多个数据条目更加实际。(您可以根据实际需要调整 topK 值,以返回相应数量的匹配数据)。

最后,接着添加以下代码来定义 CopilotKit 接口。

    const anthropic = new Anthropic({ apiKey: ANTHROPIC_API_KEY });
    const serviceAdapter = new AnthropicAdapter({ anthropic: anthropic as any });

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

      return handleRequest(req);
    };

切换到全屏模式。退出全屏。

请确保你在前端中使用的URL与你在CopilotKit的API端点(/api/copilotkit)中使用的URL相同。

要测试整个应用程序,请在终端中切换到您的主项目文件夹,并运行以下命令:

npm run dev(启动开发模式)

接着,在您的浏览器中访问 localhost:3000,并在侧边栏中的输入框中输入一个问题,比如“比如说,你可以问‘CopilotKit 有哪些功能?’”

用户可以继续提问;如果你有很多篇文章,与其在不同的页面中筛选,让智能助手帮你获取所需信息会简单得多。

作为参考,或者,如果你想基于我们在本文中介绍的内容,你可以从GitHub上的仓库克隆该项目源代码。

简单来说

主要内容

在本指南中,我们详细介绍了如何一步步通过使用CopilotKit、Anthropic 的 AI 接口和 Pinecone 的知识库 API 构建由 Anthropic 提供支持的 Copilot。

虽然我们已经探索了几项功能,但仅仅是冰山一角,我们只是触及了CopilotKit的无数用例,这些用例涵盖了从构建交互式AI聊天机器人到代理型解决方案的各种场景。说白了,CopilotKit能让您在短短几分钟内为产品添加大量的实用AI功能。

如果你想要将AI副驾集成到你的现有应用中,可以考虑预约演示会,加入开发者社群,并先看文档尝试一下!

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消