useMakeCopilotReadable.mdx

title	useMakeCopilotReadable
description	A hook for providing app-state & other information to the Copilot.

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.

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

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

</RequestExample>

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:

```jsx 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:

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:

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

The information to be added to the Copilot context. The ID of the parent context, if any. An array of categories to control which context are visible where. Particularly useful with CopilotTextarea (`useMakeAutosuggestionFunction`)