State

Telling Copilot about your app's state is optional, but can often improve AI performance. 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 Copilot about your app's state, set the context.state property:

// App.jsx
import store from './store' // Your application's store.
import { CopilotProvider, CopilotChat } from '@copilotjs/react'
import '@copilotjs/styles/default.css'

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: '...',
      }}
      // ...
    >
      <CopilotChat />
    </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.