Overview

<div style={{ color: "var(--text-muted)", fontSize: "0.875rem", marginTop: "-0.5rem", marginBottom: "1.5rem" }}> ⏱ 5 minutes &nbsp;·&nbsp; Easy </div> <YouTubeVideo id="C7px2wxr0k4" title="AI-Powered Textarea Tutorial" />

What you'll learn

In this tutorial, you'll take a simple email app and add AI-powered autocompletion to it. The app is a basic email client with a plain textarea for composing messages. You'll add CopilotKit so the textarea offers relevant autocompletions as you type, aware of the full email history.

You'll learn:

• How to use useCopilotReadable to give your copilot access to your app's state
• How to use the <CopilotTextarea /> component for context-aware autocompletions
• How to use the Copilot Textarea Action Popup to generate or adjust existing text

Try it out

An interactive example of the end result:

<Card title="View source code on GitHub" href="https://github.com/CopilotKit/CopilotKit/tree/main/examples/starters/textarea?ref=docs-tutorial" description="Browse the starter and final code for this tutorial." />

<Frame> <iframe src="https://example-textarea.vercel.app/" width="100%" height="850" referrerPolicy="strict-origin-when-cross-origin" title="CopilotKit Textarea Demo" frameBorder="0" allowFullScreen /> </Frame>

<Card title="Next: Check out the repo →" href="/tutorials/ai-powered-textarea/step-1-checkout-repo" description="Clone the starter app and get it running locally." />