useCopilotReadable

useCopilotReadable is a React hook that provides app-state and other information to the Copilot.

Usage

Simple Usage

In its most basic usage, useCopilotReadable accepts a single string argument representing any piece of app state, making it available for the Copilot to use as context when responding to user input.

import { useCopilotReadable } from "@copilotkit/react-core";
 
export function MyComponent() {
  const [employees, setEmployees] = useState([]);
 
  useCopilotReadable({
    description: "The list of employees",
    value: employees,
  });
}

Custom Serialization

By default the value is serialized with JSON.stringify. Pass convert to control the string the Copilot sees. It is called with the description and the value, in that order:

useCopilotReadable({
  description: "The current user",
  value: user,
  convert: (description, value) => `${description}: ${value.firstName} ${value.lastName}`,
});

Conditional Usage

Toggle available to add or remove the context as your app state changes. Switching to "disabled" removes the entry from the Copilot context; switching back to "enabled" re-adds it.

useCopilotReadable({
  description: "The list of employees",
  value: employees,
  available: showEmployees ? "enabled" : "disabled",
});

Re-running on Custom Dependencies

The context is refreshed whenever description, value, convert or available change. Pass a second argument to add your own dependencies:

useCopilotReadable(
  {
    description: "The selected employee",
    value: employee,
  },
  [departmentId],
);

Parameters