Quickstart

Create a copilot

You can create your first copilot in the Continual Console (opens in a new tab) by clicking Create copilot. This will take you through a copilot creation wizard.

While optional, you can connect your copilot to a knowledge base such as your product documentation by clicking Create knowledge base on the Integrations step or your API by clicking Create tool. Generally, creating a knowledge base for your product documentation is a good place to start.

After clicking Create, you'll see a success modal with an example code you can use to embed your copilot in your application. You'll want to copy-and-paste this code or note the copilotId to use in step 3.

Create an API key

If you haven't already, navigate to the sidebar and click on API Keys and create a new key. Save the secret key securely.

Install the @continual/react package

In your existing React application, install the @continual/react package.

pnpm add @continual/react

Add the <Copilot/> component to your application

In your application root, for example _app.tsx, add the Copilot component and the API secrey key created previously:

import { Copilot, CopilotProvider } from "@continual/react";
import "@continual/react/dist/styles.css";
 
const ContinualCopilotId = process.env.CONTINUAL_COPILOT_ID;
const ContinualSecret = process.env.CONTINUAL_SECRET;
 
const App = () => (
  <CopilotProvider copilotId={ContinualCopilotId} accessToken={ContinualSecret}>
    {/* Your other app components here. */}
    <Copilot />
  </CopilotProvider>
);

Now reload your application and you should see your copilot appear in the bottom right corner of your application. Congratulations!

To learn more about how to customize the appearance and location of your copilot see Customizing appearance.