---
title: 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."
/>
