copilotkit--copilotkit/examples/showcases/todo

This is a demo that showcases using CopilotKit to build a simple Todo app.

Run the live demo

Want to see CopilotKit in action? Click the button below to try the live demo.

Deploy with Vercel

To deploy with Vercel, click the button below:

How to Build: a To-Do list app with an embedded AI copilot

Learn how to create a To-Do list app with an embedded AI copilot. This tutorial will guide you through the process step-by-step.

Tutorial: How to Build: a To-Do list app with an embedded AI copilot

Add your OpenAI API key

Add your environment variables to .env.local in the root of the project.

OPENAI_API_KEY=your-api-key

Install dependencies

npm install

Run the development server

npm run dev

Open the demo

Open http://localhost:3000 with your browser to see the result.

The Copilot-Specific parts of the code:

1. Notice <CopilotKit /> and <CopilotPopup /> in page.tsx

2. Notice useCopilotReadable in page.tsx

3. Notice the 2 useCopilotAction in page.tsx