Quickstart

1. Create account

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

2. Install package

npm install @copilotjs/react

3. Use components

// Example.jsx
import { useState } from 'react'
import { CopilotProvider, CopilotChat } from '@copilotjs/react'

import '@copilotjs/styles/default.css'

export default function Example() {
  const [count, setCount] = useState(0)
  const increment = () => setCount((count) => count + 1)
  return (
    <>
      <div>Count: {count}</div>
      <CopilotProvider
        appId="paste-your-app-id-here"
        userId="u"
        companyId="c"
        context={{
          actions: { increment: increment },
          actionTypes: 'type increment = () => void',
        }}
      >
        <CopilotChat
          style={{ width: '300px', height: '500px' }}
          appearance={{ welcomePrompts: ['Increment the count by 3'] }}
        />
      </CopilotProvider>
    </>
  )
}

This code displays a counter and the Copilot chat UI. Test it by prompting:

Increment the count by 3

and verify that the Copilot adds 3 to the counter.

4. Customize components

Among the many props of the CopilotProvider component, start by setting these 3:

• userId: identify the user who's logged into your app.
• companyId: identify the organization your user belongs to.
• context: describe which actions are possible in your app. See the actions guide.