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

AI Todo List Copilot Tutorial

<div> <div>**Time to complete:** 5 minutes</div> <div>**Difficulty:** Easy</div> </div> <YouTubeVideo videoId="n1lJyaLam7g" defaultPlaybackRate={1.25} />

What you'll learn

In this tutorial, you will take a simple todo list app and supercharge it with a copilot. You will learn:

• 💡 How to embed an in-app copilot with a chat UI
• 💡 How to use useCopilotReadable to allow your copilot to read the state of your app
• 💡 How to use useFrontendTool to allow your copilot to execute tools

Try it out!

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

<Link href="https://github.com/CopilotKit/CopilotKit/tree/main/examples/starters/todos-app?ref=docs-tutorial" className="no-underline" target="_blank" > <button className="bg-neutral-800 text-white px-4 py-2 rounded-lg flex items-center gap-2 mt-2 font-medium"> <FaGithub className="w-4 h-4" /> <span>View source code on GitHub</span> </button> </Link> <div className="flex flex-col shadow-lg rounded-lg my-4"> <div className="bg-neutral-800 h-11 rounded-t-lg flex items-center px-4"> <div className="flex-1 text-center text-white font-medium"> CopilotKit Todo List Copilot Demo </div> </div> <iframe className="rounded-b-lg" src="https://example-todos-app.vercel.app/" width="100%" height="700" referrerPolicy="strict-origin-when-cross-origin" title="CopilotKit Todo List Copilot Demo" frameBorder="0" allowFullScreen ></iframe> </div>

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