Quickstart

Add Copilot to your project

1. Download the <Copilot> component.
2. Unzip and copy the folder ui-components/Copilot into your project (eg, to src/components).
3. Install the dependencies:

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

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

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

5. 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="your-copilot-id"
         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 knowledgeto the copilot.
• Add actionsto the copilot.