Step 3: Copilot Readable State

At this point, we have set up our CopilotKit provider and <CopilotTextarea />, and we already benefit from a great AI assistant. However, there is one last problem - the copilot assistant is not aware of the email thread. Let's fix that.

Our App's State

Let's quickly review how our app's state works. Open up the lib/hooks/use-emails.tsx file.

At a glance, we can see that the file exposes a provider (EmailsProvider) which holds our emails. This is the context we need to provide to our copilot to get AI autocompletions.

The useCopilotReadable hook

Our goal is to make our copilot aware of this state, so that it can provide more accurate and helpful responses. We can easily achieve this by using the useCopilotReadable hook.

// ... the rest of the file

export const EmailsProvider = ({ children }: { children: ReactNode }) => {
  const [emails, setEmails] = useState<Email[]>(emailHistory);

  // [!code highlight:4]
  useCopilotReadable({
    description: "The history of this email thread",
    value: emails,
  });

  // ... the rest of the file
};

In this example, we use the useCopilotReadable hook to provide the copilot with the state of our email thread.

• For the description property, we provide a concise description that tells the copilot what this piece of readable data means.
• For the value property, we pass the entire state as a JSON string.

In the next step, we'll set up our AI-powered textarea, which will use this readable state to provide accurate and helpful responses.

Try it out!

Now, go back to the app and start typing things related to the email thread. Some ideas:

• "Thanks Jo..." (the assistant will complete John's name)
• "I'm glad Spac..." (the assistant will complete the company's name to SpaceY)
• "I'm glad they liked my..." (the assistant will add context)

Your textarea is now fully aware of the email thread, and therefore it provides helpful, relevant autocompletions. 🚀