DEV Community

Cover image for How to build: a To-Do list app with an embedded AI copilot (Next.js, GPT4, & CopilotKit)

How to build: a To-Do list app with an embedded AI copilot (Next.js, GPT4, & CopilotKit)

Bonnie on May 29, 2024

TL;DR A to-do list is a classic project for every dev. In today's world it is great to learn how to build with AI and to have some AI pr...
Collapse
 
nevodavid profile image
Nevo David CopilotKit •

While todo list is the simplest app, I really like how you can use ai agents with it

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit •

I love how CopilotKit makes it easier to integrate the AI agents.

Collapse
 
hajusef_908 profile image
Hajeem Usef •

I remember building a to-do list as one of my first projects haha. Nice twist on it. A todo list with AI.

Collapse
 
uliyahoo profile image
uliyahoo CopilotKit •

That's the idea haha

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit •

AI makes it an even better project to build haha

Collapse
 
mathew00112 profile image
Mathew •

I love this twist on the classic to-do app.

Collapse
 
jeremiah_the_dev_man profile image
Jeremiah •

Fire 🔥

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit •

Thanks, Jeremiah.

Collapse
 
zmykedev profile image
MykeDev •

I did everything and it gives me a 200 but it says error: Connection error

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit •

Have a look at these OpenAI API code errors and see if they will be helpful.

platform.openai.com/docs/guides/er...

Collapse
 
zmykedev profile image
MykeDev •

I could see what it was, there was an error in the quotes in the api key, thanks

Thread Thread
 
the_greatbonnie profile image
Bonnie CopilotKit •

Great to hear that.

Happy coding.

Collapse
 
justinwells21 profile image
justinwells21 •

Thank you Bonnie. Without your tutorials I wouldn't have known how accessible it is to use AI in my applications.

Collapse
 
neurabot profile image
Neurabot •

Me too. Nice

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit •

Happy to hear that, Justin.

Thanks to CopilotKit for making it easier to integrate AI into apps.

Collapse
 
helyefab profile image
Helye23 •

Saying a huge thank you not just for the cool tutorial but also for the code! So clear and well structured! Great comments too!"

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit •

Happy to hear that, Helye.

Collapse
 
ferguson0121 profile image
Ferguson •

Great article Bonnie, I always like your cover photos also.

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit •

Thanks, Ferguson.

Happy to hear that.

The copilotKit team works on the cover images.

Credit to them.

Collapse
 
neurabot profile image
Neurabot •

Cool.

Collapse
 
uliyahoo profile image
uliyahoo CopilotKit •

Nice one Bonnie

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit •

Thanks.

Collapse
 
neurabot profile image
Neurabot •

Interesting.

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit •

Absolutely.

Collapse
 
desh_raj_f2836d01bb44f9f3 profile image
Desh Raj •

thank you sharing AI Tools

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit •

You are welcome, Desh.

Collapse
 
james0123 profile image
James •

Why do you always with React?

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit •

Hey James,

CopilotKit currently supports the React framework only.

Other frameworks support will be coming out soon.

Collapse
 
4sh1s profile image
Ashish Tripathy •

thanks for the tutorial , it is a fun little project

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit •

Happy to hear that, Ashish.

Collapse
 
abdullah_ali_eb8b6b0c2208 profile image
Abdullah Ali •

SO YOU can like use copilots to delete add or mark your task rights ?

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit •

Yeah.

Collapse
 
mrp profile image
Peter Ime •

Awesome article Bonnie. Thank you so much

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit •

Thanks for the feedback.

Collapse
 
mainak0907 profile image
Mainak Chattopadhyay •

Having a Problem with Open AI API. It shows that GPT-4o is not available and gives an error. Any help on how to solve it

Collapse
 
kripasindhu007 profile image
Kripa Sindhu • • Edited

Same here. At first, I thought, I might have exhausted the limit so I created a whole new account for API keys, It's still the same problem. I tried finding where we can define which model to use but couldn't

Collapse
 
kripasindhu007 profile image
Kripa Sindhu •

Update: I changed the model to 3.5-turbo which is supposed to be free but now I am getting that the API limit is reached but there are 0 requests made according to the usage dashboard of GPT.

Collapse
 
ipanda007 profile image
Aung Kyaw Khaing • • Edited

How to add open ai API key to copilotKit I only see .env.local

Collapse
 
bikrom_roy_b34e62e14a7d4c profile image
Bikrom Roy •

*it is not working *

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit •

Are you getting any errors?