Step 4: Copilot Textarea
Currently, our app has a simple textarea for replying to emails. Let's replace this with an AI-powered textarea so that we can benefit from our helpful AI assistant.
The <Reply />
Component
Head over to the /components/Reply.tsx
file.
At a glance, you can see that this component uses useState
to hold the current input value and provide it to the textarea. We also use the onChange
prop of the textarea to update the state.
Implementing <CopilotTextarea />
The <CopilotTextarea />
component was designed to be a drop-in replacement for the <textarea />
component. Let's implement it!
We import the <CopilotTextarea />
component and use it in place of the <textarea />
component. There are also some optional style changes made here.
We can provide more specific instructions for this particular textarea via the autoSuggestionsConfig.textareaPurpose
property.
Try it out!
Now, go back to the app and type anything in the textarea. You will see that the AI assistant provides suggestions as you type. How cool is that?
The CMD + K
/CTRL + K
Shortcut
While focused on the texarea, you can use the CMD + K
(macOS) or CTRL + K
(Windows) shortcut to open the action popup. Here, you can give the copilot specific instructions, such as:
Rephrase the text to be more formal
Make the reply shorter
Tell John that I'm happy to help
We have implemented the <CopilotTextarea />
component, but there an issue - the copilot assistant is not aware of the email thread. In the next step, we'll make CopilotKit aware of our email history.