State

When performing actions, the copilot can benefit from knowing your app's state. In the example of a drawing app, if the copilot knows about the current visibleArea of the canvas, it can create shapes that are immediately visible to the user.

To inform the copilot about your app's state, set the context.state property:

// App.jsx
import store from './store' // Your application's store.
import { CopilotProvider } from '@copilotjs/react'
import { Copilot } from '@/components/Copilot'

export default function App() {
  return (
    <CopilotProvider
      context={{
        // An object with a subset of your app's state.
        state: {
          visibleArea: store.visibleArea, // { x: 0, y: 0, width: 100, height: 100 }
          countShapes: store.shapes.length, // 80
          countSelectedShapes: store.selectedShapes.length, // 2
        },
        actions: {},
        actionTypes: '...',
      }}
      // ...
    >
      <Copilot className="h-[600px] w-[400px]" />
    </CopilotProvider>
  )
}

In addition passing context.state, you should also include in context.actionTypes a type definition for State, so the copilot understands the state object:

// actionTypes.ts
// ...
type State = {
  visibleArea: { x: number; y: number; width: number; height: number }
  countShapes: number
  countSelectedShapes: number
}

Because context.state is included in the full prompt sent to the external AI provider, you must ensure it contains only a state summary of limited size. For example, including countShapes is OK, but shapes is not.