🚀How I integrated an AI copilot into Dub.co (in a few minutes)🤖✨

In this article, you'll learn how to add an AI copilot to Dub.co, an open-source link management system. Using CopilotKit, you'll also learn how to easily create and delete short links, improving the overall user experience of the application.

You can use this as a case-study for how to easily add an AI copilot into any open-source application, not just Dub.co. This will easily make you seem like an AI coding master.

- an open-source copilot framework for building custom AI chatbots, in-app AI agents, and text areas.

How to set up Dub.co on your local computer

by running the code snippet below.

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

Navigate into the dub folder and install the project dependencies:

pnpm install

Within the apps/web folder, rename the .env.example file to .env.

Create a new and copy the following credentials from the REST API section to the .env file:

UPSTASH_REDIS_REST_URL=<your_rest_url>

UPSTASH_REDIS_REST_TOKEN=<your_rest_token>

Navigate to the and copy the URL below as its callback URL.

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

Finally, start the development server:

pnpm dev

Access the web application by navigating to http://localhost:8888 in your browser, create a workspace, and get started. If you encounter any issues, refer to the

How to integrate CopilotKit to Dub.co

In this section, you'll learn how to add an AI copilot to Dub.co using CopilotKit.

Visit the

Add your newly generated secret key and specify the OpenAI model in your .env file as follows:

OPENAI_API_KEY=<YOUR_OPENAI_SECRET_KEY>

OPENAI_MODEL=gpt-4-1106-preview

Navigate into the app/api folder and create a copilotkit directory containing a route.ts file.

cd app/api

mkdir copilotkit && cd copilotkit

touch route.ts

Copy the following the following code snippet into the api/copilotkit/route.ts file:

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 }));

}

The

How to perform various actions using CopilotKit

CopilotKit provides two hooks that enable us to handle user's request and plug into the application state: .

The useCopilotAction hook allows you to define actions to be carried out by CopilotKit. It accepts an object containing the following parameters:

• name - the action's name.


• description - the action's description.


• parameters - an array containing the list of the required parameters.


• render - the default custom function or string.


• handler - the executable function that is triggered by the action.
  

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}!`);

  },

});

The useCopilotReadable hook passes the application state into CopilotKit.

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



const myAppState = "...";

useCopilotReadable({

  description: "The current state of the app",

  value: myAppState,

});

Now, let's plug the application states into CopilotKit to perform various actions, such as creating and deleting the short links.

Navigate into the ui/links/links-container.tsx folder and update the LinksContainer function as shown below:

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>

  );

}

The updatedLinks React state stores the links created within the application and the useCopilotReadable passes the links into CopilotKit.

Below the useCopilotReadable hook, add the following code snippet to allow users to delete links from the application:

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);

  },

});

Congratulations! You have successfully integrated CopilotKit into Dub.co. You can access  is an incredible tool that allows you to add AI Copilots to your products within minutes. Whether you're interested in AI chatbots and assistants or automating complex tasks, CopilotKit makes it easy.

If you need to build an AI product or integrate an AI tool into your software applications, you should consider CopilotKit.

You can find the source code for this tutorial on GitHub: