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

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

Collapse
 
the_greatbonnie profile image
Bonnie

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

Collapse
 
time121212 profile image
tim brandom

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

That's the idea haha

Collapse
 
mathew00112 profile image
Mathew

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

Collapse
 
the_greatbonnie profile image
Bonnie

AI makes it an even better project to build haha

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

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

Great to hear that.

Happy coding.

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

Happy to hear that, Helye.

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

Happy to hear that, Justin.

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

Collapse
 
jeremiah_the_dev_man profile image
Jeremiah

Fire 🔥

Collapse
 
the_greatbonnie profile image
Bonnie

Thanks, Jeremiah.

Collapse
 
uliyahoo profile image
uliyahoo

Nice one Bonnie

Collapse
 
the_greatbonnie profile image
Bonnie

Thanks.

Collapse
 
ferguson0121 profile image
Ferguson

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

Collapse
 
the_greatbonnie profile image
Bonnie

Thanks, Ferguson.

Happy to hear that.

The copilotKit team works on the cover images.

Credit to them.

Collapse
 
neurabot profile image
Neurabot

Cool.

Collapse
 
neurabot profile image
Neurabot

Interesting.

Collapse
 
the_greatbonnie profile image
Bonnie

Absolutely.

Collapse
 
4sh1s profile image
Ashish Tripathy

thanks for the tutorial , it is a fun little project

Collapse
 
the_greatbonnie profile image
Bonnie

Happy to hear that, Ashish.

Collapse
 
desh_raj_f2836d01bb44f9f3 profile image
Desh Raj

thank you sharing AI Tools

Collapse
 
the_greatbonnie profile image
Bonnie

You are welcome, Desh.

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

Yeah.

Collapse
 
james0123 profile image
James

Why do you always with React?

Collapse
 
the_greatbonnie profile image
Bonnie

Hey James,

CopilotKit currently supports the React framework only.

Other frameworks support will be coming out soon.

Collapse
 
perohub profile image
PeroHub

Awesome article Bonnie. Thank you so much

Collapse
 
the_greatbonnie profile image
Bonnie

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
 
kripa_sindhu007 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
 
kripa_sindhu007 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
 
bikrom_roy_b34e62e14a7d4c profile image
Bikrom Roy

*it is not working *

Collapse
 
the_greatbonnie profile image
Bonnie

Are you getting any errors?

Collapse
 
ipanda007 profile image
Aung Kyaw Khaing • Edited

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