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.
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 compelte the company's name to SpaceY)"I'm glad they liked my..."
(the assistant will add context)
Your textarea is not fully aware of the email thread, and therefore it provides helpful, relevant autocompletions. 🚀