在本文中，您將了解如何在開源連結管理系統 Dub.co 上新增 AI 副駕駛。使用 CopilotKit，您還將學習如何輕鬆建立和刪除短連結，從而改善應用程式的整體用戶體驗。

您可以將此作為案例研究，了解如何輕鬆地將 AI 副駕駛加入到任何開源應用程式中，而不僅僅是 Dub.co。這很容易讓你看起來像一個人工智慧編碼忍者。

什麼是人工智慧副駕駛？

AI copilot 是一種應用程式內人工智慧助手，可協助用戶在應用程式內回答問題並採取行動。它將LLMs知識帶入您的申請中。

一些常見的外形尺寸：

• ChatBot：上下文感知的應用內聊天機器人，可以在應用程式內執行操作 💬

• AI 自動完成：AI 支援的文字字段，具有上下文感知自動完成和插入功能 📝

• 聯合代理：應用程式內人工智慧代理，可以與您的應用程式和使用者動態互動🤖

CopilotKit 是領先、最強大且最易於使用的開源框架，用於建立應用內 AI 副駕駛。您可以在幾分鐘內讓完全自訂的 AI 副駕駛在您的應用程式中執行。

{% cta https://git.new/devtoarticle1 %} 查看 CopilotKit ⭐️ {% endcta %}

先決條件

要完全理解本教程，您需要對 React 或 Next.js 有基本的了解。

我們還將利用以下內容：

• CopilotKit - 一個開源副駕駛框架，用於建立自訂 AI 聊天機器人、應用程式內 AI 代理程式和文字區域。

• Docker - 一個開源平台，使用容器化技術使建立、部署和執行應用程式變得更加容易

• Docker Compose - 用於定義和執行多容器 Docker 應用程式的軟體應用程式。

• Python >= 3.8 - 用於配置 Dub.co。

• OpenAI API 金鑰- 使我們能夠使用 GPT 模型執行各種任務。

如何在本地電腦上設定 Dub.co

Dub.co是一個開源連結管理平台，允許使用者使用自己的自訂網域建立、分享和追蹤短連結。它是由 Steven Tey（前 Vercel 公司）建立的。

若要開始在本機上設定 Dub.co，請依照下列步驟操作：

透過執行下面的程式碼片段來克隆Dub.co GitHub 儲存庫。

git clone https://github.com/dubinc/dub.git

導航至dub資料夾並安裝專案依賴項：

pnpm install

在apps/web資料夾中，將.env.example檔案重新命名為.env 。

建立一個新的Tinybird 帳戶，並將您的Admin Auth Token複製到.env檔案中。

TINYBIRD_API_KEY=<your_admin_auth_token>

導覽至packages/tinybird目錄並使用以下指令安裝 Tinybird CLI：

pip3 install tinybird-cli

在終端機中執行以下命令，並在提示使用 Tinybird CLI 進行身份驗證時輸入您的Admin Auth Token ：

tb auth

透過執行以下程式碼片段來發布 Tinybird 資料來源和端點：

tb push

建立Upstash 資料庫並將下列憑證從 REST API 部分複製到.env檔：

UPSTASH_REDIS_REST_URL=<your_rest_url>
UPSTASH_REDIS_REST_TOKEN=<your_rest_token>

導覽至QStash 標籤並將下列憑證複製到.env檔案中。

QSTASH_TOKEN=
QSTASH_CURRENT_SIGNING_KEY=
QSTASH_NEXT_SIGNING_KEY=

接下來，在apps/web目錄中，執行以下命令來啟動 Docker Compose 堆疊：

docker-compose up

使用以下命令產生 Prisma 用戶端並建立其資料庫表：

npx prisma generate
npx prisma db push

Dub.co 支援多種身份驗證方法。建立一個 GitHub 應用程式並複製下面的 URL 作為其回調 URL。

http://localhost:8888/api/auth/callback/github

最後，啟動開發伺服器：

pnpm dev

透過在瀏覽器中導航到http://localhost:8888來存取 Web 應用程式，建立工作區並開始。如果您遇到任何問題，請參閱完整的安裝指南以獲得詳細協助。

如何將 CopilotKit 整合到 Dub.co

在本部分中，您將了解如何使用 CopilotKit 將 AI 副駕駛加入到 Dub.co。

造訪OpenAI 開發者平台並建立新的金鑰。

新增產生的金鑰並在.env檔中指定 OpenAI 模型，如下所示：

OPENAI_API_KEY=<YOUR_OPENAI_SECRET_KEY>
OPENAI_MODEL=gpt-4-1106-preview

導航到app/api資料夾並建立一個包含route.ts檔案的copilotkit目錄。

cd app/api
mkdir copilotkit && cd copilotkit
touch route.ts

將以下程式碼片段複製到api/copilotkit/route.ts檔案中：

import { CopilotRuntime, OpenAIAdapter } from "@copilotkit/backend";

export const runtime = "edge";

export async function POST(req: Request): Promise<Response> {
  const copilotKit = new CopilotRuntime({});
  const openaiModel = process.env["OPENAI_MODEL"];
  return copilotKit.response(req, new OpenAIAdapter({ model: openaiModel }));
}

CopilotKitRuntime 實例接受使用者的請求並使用 OpenAI 模型做出決策。

若要將 Dub.co 連接到後端 API 路由，請更新app.dub.co/(dashboard)/[slug]中的page.tsx ，如下所示：

"use client";
import WorkspaceLinksClient from "./page-client";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotPopup } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";

export default function WorkspaceLinks() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit/">
      <WorkspaceLinksClient />;
      <CopilotPopup
        instructions="Help the user create and delete links from the workspace"
        defaultOpen={true}
        labels={{
          title: "Dub.co Copilot",
          initial:
            "Hello there! I can help you create, edit, and delete short links in your workspace.",
        }}
        clickOutsideToClose={false}
      ></CopilotPopup>
    </CopilotKit>
  );
}

CopilotKit 元件包裝整個應用程式並接受包含 API 端點連結的runtimeUrl屬性。 CopilotKitPopup元件為應用程式加入了一個聊天機器人側邊欄面板，使我們能夠向 CopilotKit 提供各種指令。

如何使用 CopilotKit 執行各種操作

CopilotKit 提供了兩個鉤子，使我們能夠處理使用者的請求並插入應用程式狀態： useCopilotAction和useCopilotReadable 。

useCopilotAction掛鉤可讓您定義 CopilotKit 執行的動作。它接受包含以下參數的物件：

• name - 操作的名稱。

• 描述 - 操作的描述。

• 參數 - 包含所需參數清單的陣列。

• render - 預設的自訂函數或字串。

• handler - 由操作觸發的可執行函數。

useCopilotAction({
  name: "sayHello",
  description: "Say hello to someone.",
  parameters: [
    {
      name: "name",
      type: "string",
      description: "name of the person to say greet",
    },
  ],
  render: "Process greeting message...",
  handler: async ({ name }) => {
    alert(`Hello, ${name}!`);
  },
});

useCopilotReadable掛鉤將應用程式狀態傳遞到 CopilotKit。

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

const myAppState = "...";
useCopilotReadable({
  description: "The current state of the app",
  value: myAppState,
});

現在，讓我們將應用程式狀態插入 CopilotKit 中以執行各種操作，例如建立和刪除短連結。

導覽至ui/links/links-container.tsx資料夾並更新LinksContainer函數，如下所示：

export default function LinksContainer({
  AddEditLinkButton,
}: {
  AddEditLinkButton: () => JSX.Element;
}) {
  const { viewMode, sort, showArchived } = useContext(LinksDisplayContext);
  const { links, isValidating } = useLinks({ sort, showArchived });
  const { data: count } = useLinksCount({ showArchived });
  //👇🏻 React state for all links
  const [updatedLinks, setUpdatedLinks] = useState<ResponseLink[]>(links || []);

  //👇🏻 update the state with all the links
  useEffect(() => {
    setUpdatedLinks(links || []);
  }, [links]);

  useCopilotReadable({
    description:
      "This is the list of links you have saved. You can click on a link to view it, or use the search bar to find a specific link.",
    value: updatedLinks,
  });

  return (
    <MaxWidthWrapper className="grid gap-y-2">
      <LinksList
        AddEditLinkButton={AddEditLinkButton}
        links={links}
        count={count}
        loading={isValidating}
        compact={viewMode === "rows"}
      />
      <DeleteLinkModal />
    </MaxWidthWrapper>
  );
}

updatedLinks React 狀態儲存在應用程式中建立的連結，並且useCopilotReadable將連結傳遞到 CopilotKit 中。

在useCopilotReadable掛鉤下方，新增以下程式碼片段以允許使用者從應用程式中刪除連結：

useCopilotAction({
  name: "deleteShortLink",
  description: "delete a link from the database via its ID",
  parameters: [
    {
      name: "id",
      type: "string",
      description: "The ID of a short link",
      required: true,
    },
  ],
  render: "Deleting link...",
  handler: async ({ id }) => {
    if (!id) return;
    const link = updatedLinks?.find((link) => link.id === id);
    if (!link) return;
    setSelectedLink(link);
    setShowDeleteLinkModal(true);
  },
});

若要允許使用者使用 AI copilot 建立連結，請導航至modals/add-edit-link-modal目錄中的index.tsx檔案並更新useAddEditLinkModal函數，如下所示：

export function useAddEditLinkModal({
  props,
  duplicateProps,
  homepageDemo,
}: {
  props?: LinkWithTagsProps;
  duplicateProps?: LinkWithTagsProps;
  homepageDemo?: boolean;
} = {}) {
  const [updatedProps, setUpdatedProps] = useState(props || DEFAULT_LINK_PROPS);
  const [showAddEditLinkModal, setShowAddEditLinkModal] = useState(false);
  const [generatingRandomKey, setGeneratingRandomKey] = useState(false);
  const [keyError, setKeyError] = useState<string | null>(null);
  const { id: workspaceId } = useWorkspace();
  const { primaryDomain } = useDomains();

  const getKey = async (domain: string) => {
    setKeyError(null);
    setGeneratingRandomKey(true);
    const res = await fetch(
      `/api/links/random?domain=${domain}&workspaceId=${workspaceId}`,
    );
    const key = await res.json();
    return key;
  };

  useCopilotAction({
    name: "createNewLink",
    description: "Create a new link",
    parameters: [
      {
        name: "url",
        type: "string",
        description: "The destination URL for the short link",
        required: true,
      },
    ],
    render: "Loading...",
    handler: async ({ url }) => {
      const key = await getKey(primaryDomain);
      setUpdatedProps((prev) => ({
        ...prev,
        url,
        domain: primaryDomain,
        key,
        id: "",
      }));
      setGeneratingRandomKey(false);
      setShowAddEditLinkModal(true);
    },
  });

  const AddEditLinkModalCallback = useCallback(() => {
    return (
      <AddEditLinkModal
        showAddEditLinkModal={showAddEditLinkModal}
        setShowAddEditLinkModal={setShowAddEditLinkModal}
        props={updatedProps}
        keyError={keyError}
        setKeyError={setKeyError}
        generatingRandomKey={generatingRandomKey}
        setGeneratingRandomKey={setGeneratingRandomKey}
        duplicateProps={duplicateProps}
        homepageDemo={homepageDemo}
      />
    );
  }, [showAddEditLinkModal, setShowAddEditLinkModal]);

  //👉🏻 other functions
}

• 從提供的程式碼片段來看：

• updatedProps狀態包含每個連結的資料結構。

• getKey()函數產生一個唯一的金鑰，該金鑰也包含在已建立的短連結中。

• useCopilotAction函數接受要縮短的 URL 並顯示一個允許使用者確認並保存連結的模式。

恭喜！您已成功將 CopilotKit 整合到 Dub.co 中。您可以存取此 GitHub 儲存庫中的原始程式碼。

這是一個簡短的影片，展示了 CopilotKit 如何與 Dub.co 配合使用：

{% 嵌入 https://youtu.be/5mPYWJKPtiE %}

結論

CopilotKit是一款令人難以置信的工具，可讓您在幾分鐘內將 AI Copilot 加入到您的產品中。無論您是對人工智慧聊天機器人和助理感興趣，還是對複雜任務的自動化感興趣，CopilotKit 都能讓您輕鬆實現。

如果您需要建立 AI 產品或將 AI 工具整合到您的軟體應用程式中，您應該考慮 CopilotKit。

您可以在 GitHub 上找到本教學的源程式碼：

https://github.com/dha-stix/dub-with-copilotkit

感謝您的閱讀！

👀@steventey

原文出處：https://dev.to/copilotkit/how-i-integrated-an-ai-copilot-into-dubco-3lkj