Textarea (Autocomplete) Tutorial

What you’ll learn

In this tutorial, you will take a simple email application and add AI-powered autocompletion to it. The app is a simple email client, with a regular textarea used to compose an email. You’re going to add CopilotKit to the app, so that the textarea provides relevant autocompletions as you type. The textarea will be aware of the full email history.

You will learn:

• 💡 How to use useCopilotReadable to allow your copilot to read the state of your app
• 💡 How to use the <CopilotTextarea /> component to get instant context-aware autocompletions in your app
• 💡 How to use the Copilot Textarea Action Popup to generate text or adjust existing text in the textarea

Try it out!

You can try out an interactive example of the end result below:

In the next step, we’ll start building our copilot.