import { useMakeCopilotReadable } 
  from "@copilotkit/react-core";

const myAppState = ...;
useMakeCopilotReadable(JSON.stringify(myAppState)); 

useMakeCopilotReadable 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.

In its most basic usage, useMakeCopilotReadable 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.

For example:

simple state example
import { useMakeCopilotReadable }  from "@copilotkit/react-core";

const userName = "Rust Cohle";  
useMakeCopilotReadable("The name of the user is " + userName); 

You can also pass in a stringified JSON object representing your app state, for example:

using JSON state
import { useMakeCopilotReadable }  from "@copilotkit/react-core";

const myAppState = {
  userName: "Rust Cohle",
  userAddress: {
    street: "4500 Old Spanish Trail",
    city: "New Orleans",
    state: "LA",
    zip: "70129"
  }
};  
useMakeCopilotReadable(JSON.stringify(myAppState)); 

Optionally, you can maintain the hierarchical structure of information by passing parentId:

parentId example
import { useMakeCopilotReadable } from "@copilotkit/react-core";


function Employee(props: EmployeeProps) {
  const { employeeName, workProfile, metadata } = props;

  // propagate any information copilot
  const employeeContextId = useMakeCopilotReadable(employeeName);

  // Pass a parentID to maintain a hierarchical structure.
  // Especially useful with child React components, list elements, etc.
  useMakeCopilotReadable(workProfile.description(), employeeContextId);
  useMakeCopilotReadable(metadata.description(), employeeContextId);

  return (
    // Render as usual...
  );
}

Parameters

information
string
required

The information to be added to the Copilot context.

parentId
string

The ID of the parent context, if any.

categories
string[]

An array of categories to control which context are visible where. Particularly useful with CopilotTextarea (useMakeAutosuggestionFunction)