Quickstart

Add Copilot to your project

1. Sign up for a Copilot.js account, and copy your Copilot ID from the dashboard.

2. Download the <Copilot> component.

3. Unzip and copy the folder ui-components/Copilot into your project (eg, to src/components).

4. Install the dependencies:

   npm i @copilotjs/react @heroicons/react clsx react-markdown react-textarea-autosize remark-gfm
   npm i -D @tailwindcss/typography @tailwindcss/forms
   

5. Edit your CSS file to use the typography and forms plugins:

   /* CSS */
   @import 'tailwindcss';
   @plugin "@tailwindcss/typography";
   @plugin "@tailwindcss/forms";
   /* ... */
   

6. Use <CopilotProvider> and <Copilot> in your project:

   // Example.jsx
   import { CopilotProvider } from '@copilotjs/react'
   import { Copilot } from '@/components/Copilot' // The folder where you placed Copilot.
   
   export default function Example() {
     return (
       <CopilotProvider copilotId="paste-your-copilot-id-here" userId="u" companyId="c">
         <Copilot className="h-[600px] w-[400px]" />
       </CopilotProvider>
     )
   }
   

The result is:

Next steps

• Customize the <Copilot> component. Since it was copied into your project, you fully control its appearance.
• Add knowledge to the Copilot.
• Add actions to the Copilot.