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

<img referrerpolicy="no-referrer-when-downgrade" src="https://static.scarf.sh/a.png?x-pxid=a9b290bb-38f9-4518-ac3b-8f54fdbf43be" />

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

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

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

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

<ResponseField name="information" type="string" required>
  The information to be added to the Copilot context.
</ResponseField>

<ResponseField name="parentId" type="string">
  The ID of the parent context, if any.
</ResponseField>

<ResponseField name="categories" type="string[]">
  An array of categories to control which context are visible where. 
  Particularly useful with CopilotTextarea (`useMakeAutosuggestionFunction`)
</ResponseField>