Skip to content

overview.mdx

Latest commit

 

History

History
52 lines (39 loc) · 1.93 KB

overview.mdx

File metadata and controls

52 lines (39 loc) · 1.93 KB
Raw

import { FaGithub } from "react-icons/fa"; import Link from "next/link"; import { YouTubeVideo } from "@/components";

Textarea (Autocomplete) Tutorial

**Time to complete:** 5 minutes
**Difficulty:** Easy

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:

View source code on GitHub
CopilotKit Todo List Copilot Demo
<iframe className="rounded-b-lg h-[850px]" src="https://example-textarea.vercel.app/" width="100%" referrerPolicy="strict-origin-when-cross-origin" title="CopilotKit Textarea Demo" frameBorder="0" allowFullScreen ></iframe>

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