Headless

If you don't need a UI (or want to build yours from scratch), skip <Copilot> and use <CopilotProvider> alone. The provider acts as a headless frontend service that:

• manages communication with the backend, including reconnects.
• handles the state machine and message queues.
• handles code execution in a sandbox.

For headless operation, simply pair <CopilotProvider> with useCopilot() to access the copilot's internal state and methods:

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

export default function Example() {
  return (
    <CopilotProvider copilotId="..." userId="..." companyId="...">
      <UI />
    </CopilotProvider>
  )
}

function UI() {
  const copilot = useCopilot() // Access copilot's internal state.
  return (
    <>
      <div>Threads: {JSON.stringify(copilot.threads)}</div>
      <div>Selected thread: {copilot.selectedThreadId}</div>
      <div>Status: {copilot.status}</div>
      <div>Messages: {JSON.stringify(copilot.messages)}</div>
      <button onClick={async () => await copilot.createAndSelectThread()}>New thread</button>
      <button onClick={() => copilot.prompt('Add 2 circles.')}>Prompt</button>
      <button onClick={() => copilot.cancel()}>Cancel</button>
    </>
  )
}