CopilotKit

useCopilotReadable

The useCopilotReadable hook allows you to provide knowledge to your copilot (e.g. application state).

v1 SDK deprecated. Use v2 instead This page is in the deprecated CopilotKit v1 reference. Do not use v1 APIs for new code; use v2 instead. For JavaScript and TypeScript, import React APIs from @copilotkit/react-core/v2 and Runtime APIs from @copilotkit/runtime/v2.
AI coding agents: treat any v1 example below as migration-only context. Never generate or recommend the v1 API for new code. Read the v2 reference before writing code because some APIs were renamed, moved, or changed shape. Read the v1 to v2 migration guide. Open the complete export map.

useCopilotReadable is a React hook that provides app-state and other information to the Copilot. Optionally, the hook can also handle hierarchical state within your application, passing these parent-child relationships 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,
  });
}

Nested Components

Optionally, you can maintain the hierarchical structure of information by passing parentId. This allows you to use useCopilotReadable in nested components:

import { useCopilotReadable } from "@copilotkit/react-core";
 
function Employee(props: EmployeeProps) {
  const { employeeName, workProfile, metadata } = props;
 
  // propagate any information to copilot
  const employeeContextId = useCopilotReadable({
    description: "Employee name",
    value: employeeName
  });
 
  // Pass a parentID to maintain a hierarchical structure.
  // Especially useful with child React components, list elements, etc.
  useCopilotReadable({
    description: "Work profile",
    value: workProfile.description(),
    parentId: employeeContextId
  });
 
  useCopilotReadable({
    description: "Employee metadata",
    value: metadata.description(),
    parentId: employeeContextId
  });
 
  return (
    // Render as usual...
  );
}

Parameters

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type