---
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="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."
/>
