Quickstart

1. Install package

npm install @copilotjs/react

2. Expose actions

We must tell Copilot what actions are available to invoke, in your particular app. For example, assume we have a simple drawing app with 2 actions, createShape and deleteAllShapes:

// actions.js

// The functions that Copilot can invoke, in this particular app.
export const actions = {
  createShape: function (shape) {
    // Existing implementation
  },
  deleteAllShapes: function () {
    // Existing implementation
  },
}

// The type definitions for all actions, in Typescript.
export const actionTypes = `
type createShape = (shape: Shape) => void
type deleteAllShapes = () => void
type Shape = Square | Circle
type Circle = { type: 'circle'; x: number; y: number; radius: number }
type Square = { type: 'square'; x: number; y: number; length: number }
`

3. Use Copilot component

// App.jsx
import Copilot from '@copilotjs/react'
import { actions, actionTypes } from './actions'

export default function App() {
  return (
    <Copilot
      appId="aaa1f9b9-56c2-45de-a466-64fadc8120d0", // Get your app ID by creating a Copilot account.
      userId="abc", // Identify the user of your app.
      companyId="xyz", // Identify the organization your user belongs to.
      context={{
        actions: actions, // Supply a map of available actions.
        actionTypes: actionTypes, // Supply a string with Typescript definitions.
      }}
    />
  )
}

The Copilot component renders a chat UI where the user can type commands, for example, "Add 2 concentric circles".

End-to-end example

1. The user types

   Add 2 concentric circles.

   in the Copilot chat UI.

2. The Copilot generates a JavaScript program that accomplishes the prompt:

   // Generated program
   createShape({ type: 'circle', x: 0, y: 0, radius: 5 })
   createShape({ type: 'circle', x: 0, y: 0, radius: 10 })
   

3. The Copilot invokes the appropriate actions, and 2 circles are drawn on the canvas.