Overview

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

What you'll learn

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

• How to embed an in-app copilot with a chat UI
• How to use useCopilotReadable to let your copilot read your app's state
• How to use useFrontendTool to let your copilot execute tools

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/todos-app?ref=docs-tutorial" description="Browse the starter and final code for this tutorial." />

<Frame> <iframe 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 /> </Frame>

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