Next.js 14 Custom Chatbot (OpenAI ChatGPT, Vercel AI SDK, Pinecone, Shadcn UI, TypeScript, Tailwind)

[@fedrosfieros693]

For anyone trying to follow along with the full code, if you are getting an error while creating a new note, do not stress. It will get resolved when you input the Pinecone API and change the index name! Just a tip in case anyone needs it.

[@chriscardone589]

What do you mean by that? I am having a 429 openAI error saying:RateLimitError: 429 You exceeded your current quota, please check your plan and billing details. Do I have to pay even in testing mode?

[@fedrosfieros693]

@@chriscardone589 To call the openAI API there is a small charge. You probably used up your free credits so you need to add some money on your account. It is a very small charge. They also allow you to have a cap limit, to avoid any surprises on your bill.

[@AmanGupta-re7rv]

@@chriscardone589did you solve this issue i am also getting same

[@AmritSingh-yx8ew]

@@chriscardone589 you don't need to pay just create new API with deferent mail id and change your api id

[@joshbane1]

are you talking about "POST localhost:3000/api/notes 404 (Not Found)" because I've been getting that error since 1:31 and it still hasn't resolved

[@junmagic8847]

this is the single most useful full stack tutorial ive followed on building a proper AI app. thank you so much would definitely love to see more advanced tutorials on langchain and agents!

[@codinginflow]

Thank you man, I'm so happy to hear that 😊 I already have ideas for a Langchain-based tutorial.

[@junmagic8847]

@@codinginflow Can't wait! I have a question. how do you enable field level encryption with MongoDB such that only the user can see the notes but the administrator cant?

[@codinginflow]

No idea @@junmagic8847

[@justinmorin9028]

couldnt agree more, Florian, more vids like this please. LangChain integration with this stack would be amazing as well

[@GREENDAYROKS1]

Would love to see a langchain demonstration as it is quite overwhelming to understand as a beginner. Would be great to see you set up a agent with tools and chain with other agents! Thanks for this great video also, it has helped me immensely with my project!

[@onothodox]

I would like to see it as well, great video also, watched it to the end and it worked for me.

[@itsugo_]

Your tutorials never disappoint! So much value provided in an easy to follow way, and a rewarding result. Thanks.

[@codinginflow]

Thank you so much I hope you like the whole thing.

[@emilcrafter]

This was awesome! First time ever I actually got through an hours long tutorial and the payoff was huge. Thank you for creating this wonderful content. I think this video just gave me the confidence to start building my first real AI apps.

[@codinginflow]

Very happy to hear that 😊

[@Code_master14]

​@@codinginflow I'm getting an error of open ai quota . ? Do you know how to fix it

[@adnanamin3666]

I really like your approach to the creation of these wonderful lessons. It's easy to understand for beginners like me, it's well explained to the precise point, each concept is shown eloquently and elaborately (which is really important for beginners) and really well organized. Most teachers on YT put "For Beginners" in the video title/thumb but never explains most concepts while going through things which really hurt the mind and brain of students who are starting to pickup things slowly. Thank you and utmost respect for you for such hard work and monetarily free videos. 👌🤞💯🔥💚

[@codinginflow]

Thank you. I put a little of preparation and thought into all my tutorials.

[@phetoanetshepiso9983]

Thanks bro I never miss your newsletter mails, I will have to keep myself busy this coming weekend with this. I never got a chance to try nextjs 14 since it was released this will be the start of it ❤ thanks 👍🏿

[@codinginflow]

Thank you my friend. Next.js is almost identical to Next.js 13.

[@iamajellyfish]

"...but I dont want to delete my furst note because it has special emotional value to me" how did I know you were gona say that sent me straight to the like btn

[@codinginflow]

Haha I didn't even remember this 😅

[@shaheryaryousaf]

Saw your tutorial first time, and this was amazing. Clear explanation and understanding of each topics helps a lot in developing this app.

[@codinginflow]

Glad it was helpful!

[@ricardopompilio5390]

Great stuff as always! Would love to see in the future the use of clerk in a nextjs - nodejs project

[@vinoobharadwaj]

LLM integrations for all kinds of applications in the future is inevitable. This is a great foundation for any developer to build and start upskilling for the future. Thanks Florian, you da best 🙌

[@codinginflow]

Thanks brother!

[@saar2r]

Thank you so much! After days of viewing useless videos I finally got the idea of next.js and how to work with it

[@codinginflow]

Glad you liked it man 👍😊

[@saar2r]

Hi! I ran into a problem, the Chat route has to include edge runtime in order not to get timeout on vercel. Do you have any suggestion how to solve this as Prisma does not work on edge?

[@codinginflow]

@@saar2r You don't need edge to increase the timeout duration

[@Jerac07]

First time watching you tutorial. Finally something different from all other tutorials. Great work! Looking forward to your next video.

[@codinginflow]

Thanks man! What do you mean by different?

[@Jerac07]

@@codinginflow all other content creators make the same content. More or less the same code. You're the first that went deeper into setup and clarify things more

[@codinginflow]

Thank you very much! Trying my best@@Jerac07

[@vusalnovruzov9192]

Florian you can also enable format on save in your settings just to avoid using the formatting shortcut every time you save your code.

[@codinginflow]

I prefer having control over when to format

[@anishbiswas1492]

Unbelievably awesome stuff ❤️🔥

[@codinginflow]

Glad you think so!

[@ondersabahat101]

Thank you very much for explaining everything step by step Florian, you are the best

[@codinginflow]

Thanks for watching brother

[@zjskier]

Great tutorial! Easy to follow and I learned a lot.

[@codinginflow]

Glad it was helpful!

[@andreykondratyuk9940]

Almost forgot to also say thank you for this extremely helpful video!

[@codinginflow]

Glad it was helpful!

[@fedrosfieros693]

Thank you so much for this. Great introduction to react and also thorough understanding of a template which can be used to create any website

[@codinginflow]

Glad you like it!

[@VikrantSingh-z5r]

Best video really helped alot very detailed explaination. Faced some version issues but apart from that the whole video was amazing

[@howardkitto]

Such a brilliant tutorial - I learned so much. Thank you!

[@codinginflow]

You're very welcome!

[@joshuamaebanyamasege9437]

This is amazing, I followed every second of it. Thank you so much for sharing

[@codinginflow]

Thank you very much!

[@sayandutta2038]

@@codinginflow getting RateLimitError: 429 You exceeded your current quota, please check your plan and billing details. For more information on this error, read the docs. Didn't even create a single note.

[@masti3145]

It will be very helpful, if you can build a full Stack ecommerce application in next 14 and mongodb with deployment on vercel.

[@devsirat]

23:30 That created a duplicate tailwind.config. It is tailwind.config.ts. But the default suggestion is a js. You should change it to .ts. Very easy to overlook. But very good tutorial as always.

[@codinginflow]

Yea I noticed that in hindsight 😅

[@renatchenko]

Great tutorial Florian, would be awesome something implementing Langchain/LlamaIndex !

[@codinginflow]

Thank you! I'll make something on these topics if there is enough interest!

[@szabolcssz3859]

Awesome stuff, thanks! Wan't to learn more about LangChain as well.

[@codinginflow]

Langchain tutorial will be out in a few days

[@maxkln]

Thanks bro. dope content!! would be great to see langchain tutorial.

[@codinginflow]

It's already on my channel

[@automioai]

What a great set up !

[@rozaliiarusskikh9662]

Thank you so much for this very helpful tutorial!

[@codinginflow]

I made it just for you

[@thangvuduy94]

I have a question related to the lecture. How to create a a wrap a inside . As per NextJs doc, i can use inside children of layout, But in this case, it's not like that.

[@codinginflow]

UserButton is not a server component so I don't think you can wrap it in Suspense. It's should also not be necessary.

[@abhinavsinghtomar110]

Hey thanks for this wonderful video. But I have a problem. chat gpt no more gives any credit tokens can you please suggest me any alternative??

[@ElStego]

Thank you for this! I have a question about Pinecone. I'm using MongoDB (Cloud) and they have Atlas Vector Search, which also seems to be a vector type database. Is it possible to use this instead of Pinecone or is this something different?

[@codinginflow]

yes

[@ammarhaidar5995]

Wow, great as usual !! I've watched the whole tutorial, but I have a question, what if we have a relational database with primary keys and foreign keys, and different relations between different models, can we still use the same approach??

[@codinginflow]

Glad you liked it! Yes, nothing should really change if you use a relational DB.

[@ammarhaidar5995]

How to link a category model to a product model with embeddings using their id as in prisma? So that I can provide chat gpt with a category for example with all its correlated products?

[@dawiebadenhorst359]

I get the following errors in chat/route and notes/route: Property 'json' does not exist on type '{ new (body?: BodyInit | null | undefined, init?: ResponseInit | undefined): Response; prototype: Response; error(): Response; redirect(url: string | URL, status?: number | undefined): Response; }'.

[@AerialbyDRE]

I am having problem when setting the role of systemMessage into 'system' it only allows me to set it to assistant. How should I work on it?

[@savagemode8740]

Change it to "assistant" it works fine for me

[@GECBE]

I am facing error while upserting the data in Pinecone. error msg: The argument to upsert had type errors: item at index unknown of the 'unknown' array must be array. Any idea how to resolve it?

[@gaganarora4460]

Can you make a video to deploy this project on vercel?

[@codinginflow]

Check the end of my Next.js 14 beginner tutorial. The steps are the same. You basically just connect your Github account and select the project. Then add the environment variables.

[@flan_02]

BUENOS DIAS AMIGO! TE SALUDO DESDE ARGENTINA, UN ABRAZO PARA VOS... GRAN VIDEO SALUDOS !

[@ungaria446]

Greate video. I am following you step by step. btw 09:44 How did you make 'Open with Code' appear in your context popup menu?

[@codinginflow]

I have tutorial on this: kzbin.infoLDf3bCSGu0o

[@digitalsahara6670]

that you so much for this tutorial, I ran into one issue with the dialog box, when I edit a a note it doesn't allow me to close the dialog if I havent changed it , is this by default ?

[@stevebendersky2056]

Thank you. if I want to use another AI such as ClaudeAI I just replace the fetch and API_KEY right ? also, I want the chat to have alot of data about my webapp, but the data is for each user has its own let say data, the chatbot can receive changing data from mongoDB? (havent watched the video yet)

[@arpanparikh1529]

Thanks Florian for this amazing tutorial. I am facing an error at timestamp 3:22:59 where it does not accept the role:system and gives below error: Type '"system"' is not assignable to type '"assistant"'.ts(2322) completions.d.ts(335, 5): The expected type comes from property 'role' which is declared here on type 'ChatCompletionMessage' (property) ChatCompletionMessage.role: "assistant" The role of the author of this message. Upon checking the file completions.d.ts I see that the role assigned there is assistant. Can we change the completions.d.ts? If not then would the functionality change if we keep role as assistant in our code? Thanks again!

[@shgdebisbeheisbaisbssbs]

I'm getting the same error. Did they change the API?

[@arpanparikh1529]

@@shgdebisbeheisbaisbssbsI just kept it to "assistant" and it was working fine. It is still working when i tested couple of days ago.

[@savagemode8740]

Same changed to assistant and it works@@arpanparikh1529

[@BBudget]

I hosted this site on vercel but the API seems to be giving me 504 errors. Does something change when hosting that I need to update? Seems to be a problem with timing out and it times out during Prisma Mongodb query for vector embeddings. Thanks!

[@djimi9803]

Amazing content bro 💯💥🔥 keep going

[@codinginflow]

Thank you bro!

[@NovalGreat]

Can you make a video explaining how to get "CLERK Production key"? Because with development key(that we are using currently in project) we cannot deploy this project to vercel

[@codinginflow]

Have you checked the docs?

[@murathudavendigaroncu]

I'm having the same problem. I deployed the project on vercel. I tried to log in with Google. After that, every time I try to log in I get a 504 error. I checked all the docs in Clerk and googled this error but I couldn't find a solution. By the way, you are a great guy. I have turned on notification bells and I am waiting for your new videos with 4 eyes. @codinginflow

[@SamManek-ou3os]

​@@murathudavendigaroncuhave you found any solution yet?

[@damilareoladele1309]

I’m using a server less index and I keep getting pinecone configuration errors. Any help will be greatly appreciated

[@leonaleri]

You have to update pinecone to the latest version then remove the environment from the pinecone variable in the pinecone.ts file. it seems pinecone was updated and the old configurations no longer work

[@andreykondratyuk9940]

Can you create a video that updates this to use the beta Assistants API? Do you expect that Vercel will add additional support for that at some point?

[@codinginflow]

Yea I think they're adding a useAgent hook. I might make another tutorial of there is enough interest.

[@ruznyma]

Can chatGPT3.5-turbo work with vector embedding without paid plan ? I got some errors

[@Pixelaze]

I would like to see a video on LangChain. Thank you.

[@codinginflow]

I released one recently

[@starrynight72]

Big problem with clerk! You can't get the userId from auth() in the API route handler. There's an issue on it on github but it still remains unsettled.

[@codinginflow]

Then fetch the whole session/user

[@starrynight72]

@@codinginflow I found that's just because I fetch from the server side component like fetch(localhost:3000/api/notes), which will make the userId nullish value in the api route handler. I think maybe that's because fetching in the server side doesn't share the auth context.

[@karimkh9]

This is very helpful Thanks

[@knalsgtes6684]

I followed you on creating a 2D platform game using Unity,,ahahaha. This is interesting, let's do this!

[@codinginflow]

It's good to try something new!

[@user-dd2mq8nd2o]

Just finished the tutorial, amazing work like always Florian. Do you know if its possible to create the UI in your blog course with tailwind and Shadcn Ui specially the blog part (creating an article and the blog page) or is it only possible with bootstrap. Keep up the great work 👍

[@codinginflow]

Thank you very much! You can create the UI in Tailwind too. It's all just CSS in the end.

[@user-dd2mq8nd2o]

good to know. Im about to start creating my own website and I want it to have a blog section and a personal note part like you did in the video and I was wondering if I should create a backend and a frontend folder like you did in your blog course or if its possible to a blog like in your course with a file structure similar to the one in your AI not app video. Could you help me, im a little bit confuse@@codinginflow

[@codinginflow]

​@@user-dd2mq8nd2o You can do it all right inside Next.js like I did in my AI app

[@user-dd2mq8nd2o]

Just to make sure, you mean that I don't need a frontend and a backend folder?@@codinginflow

[@codinginflow]

​@@user-dd2mq8nd2o If you build your backend in Next.js, then you have an api folder inside the app folder. My course has a separate backend folder because it's a whole separate Express app.

[@ahmmadawshaf]

love it!!

[@ApurvaKashyap-kj6qz]

do i need to pay for any of the tools or API used in this project ? and can I deploy this project ?

[@roee21]

Thanks so much for this! I am getting 2 errors that I cannot resolve though... 1. route.ts - "Property 'note' does not exist on type 'Omit'." 2. pinecone.ts - "Object literal may only specify known properties, and 'environment' does not exist in type 'PineconeConfiguration'."

[@lizhung116]

did you fix the 2nd problem yet ?

[@ManasaPeram]

loved it above code, but i want gemini ai could you please tell me that scenario using geminiAI

[@arfat-xyz]

thank you sir....

[@Anjalipal-y6m]

I am not able to create notes even though I have followed the same code . If anybody faces same issue so please let me know

[@savagemode8740]

Check if your OpenAI API free trial ended, or if you have any credits in your balance. This API is only free for 3 months once you first register your email address, not when you first create the API key.

[@lyricaldemon2537]

I want to learn this thing to know it I Can Do like 3 projects using the Same Skill from this tutorial So that I can Apply for a Job at state I have this kind of Experience So plz tell me......CAN I FOLLOW ALONG IF IM A COMPLETE BEGINNER?

[@codinginflow]

You should watch my Next.js beginner tutorial first: kzbin.info/www/bejne/nKLJlqVsrbKjaKM

[@douglaskipyegon2183]

Anyone has an idea on how to persist chats such that if you refresh the page the chats don't disappear.

[@daniel-ti4no]

Hey your video is amazing. It helps me trough my project. But, I was wondering if we could create some kind of template text if the answers are not to be found. I don't know what is the official term of it. Let's say I'am asking about my name. But There is no notes about my name. I want to return a specific answer like "Sorry don't have the answers yet" Can we do that? If can, how?? what is the keyword on the google. Thank you so much btw!! Ur videos always help me a lot

[@codinginflow]

Put it in the AI prompt.

[@daniel-ti4no]

​@@codinginflow hey thanks for your answer.. But, I don't know what's going on... But sometimes my bot cannot find relevant notes even if my notes contain that information that the user ask. I just found about it today... What library might causing that to happen?? Is it the pinecone??

[@codinginflow]

​@@daniel-ti4no What's the number of your topK? Make sure it's high enough to allow fetching multiple notes.

[@daniel-ti4no]

@@codinginflow thanks mann it works!! Keep up the good work man your vids is always help me through my projects!!

[@codinginflow]

@@daniel-ti4no Happy to help 😊

[@arshah246]

Here it comes

[@codinginflow]

Hope you like it!

[@MuhammadHamid-r6o]

love this video

[@codinginflow]

Thanks a lot!

[@MuhammadHamid-r6o]

iam facing some issue can you help me?@@codinginflow

[@DipakSharma-q2h]

thank you so much

[@codinginflow]

Welcome 😊

[@ruznyma]

Is this the RAG workflow you used?

[@codinginflow]

This is using RAG, yes

[@7codo]

Thanks a lot

[@codinginflow]

No worries!

[@iamdanfleser]

fortza florin

[@shambhavshandilya8865]

Man this OpenAIStream is depricated can you tell how to stream data back to frontend in other way i am stuck here (3:26:46)

[@vaibhavsonnakul5446]

Im getting the same error did you figure this out?

[@shambhavshandilya8865]

@@vaibhavsonnakul5446 yes u have to use new streamText()

[@iamajellyfish]

@@shambhavshandilya8865 been having the same problem but just downgraded the ai package to 2.2.20 which worked, although not ideal using deprecated solution. How exactly did you use streamText() because I couldn't implement that either...

[@MightyKingKala]

thanks bro

[@codinginflow]

Thank you for watching 💚

[@tktserapio]

Please help, I’m getting this error: “PineconeAuthorizationError: The API key you provided was rejected while calling https:” What can I do to overcome this? Is it about the version of pinecone?

[@leonaleri]

You have to update pinecone to the latest version then remove the environment from the pinecone variable in the pinecone.ts file

[@iamdanfleser]

omg, please use dash-case for file namings

[@codinginflow]

Why

[@manmittiwade]

RateLimitError: 429 You exceeded your current quota, please check your plan and billing details. when i had send 1 request of creating a note then got me this error can u describe how to set api key of open ai and it is free or paid .please give me reply fast

[@codinginflow]

Check your OpenAI backend

[@manmittiwade]

@@codinginflow i treid on postman and it show similar error means that i have to pay for api

[@codinginflow]

@@manmittiwade Look in your OpenAI backend

[@manmittiwade]

@@codinginflow Hello, sir. Could you please provide me with your API key via email? Trust me, I only intend to use it for building a project, as I learned from your video. Additionally, I plan to delete it after several days. I will showcase the project on LinkedIn as I am seeking an internship in a few days. Thank you for your understanding.

[@codinginflow]

​@@manmittiwade Sorry I can't give you my API key

[@ibrochillin]

I was unable to deploy the package, anyone else?

[@codinginflow]

Deploy what package?

[@ibrochillin]

@@codinginflow I meant deploying the app to vercel, it's a nightmare. The pages file seem to conflict, and the packages needed as well. It hated the openai/resources/index.mjs as well.

[@codinginflow]

You only need to add the environment variables and you should be able to deploy it with 1 click from your GitHub repo

[@ibrochillin]

@@codinginflow yeah so i fixed it in 2 ways, vercel doesnt automatically detect NextJS at least for my proj, i had to reinstall next, remove the index.mtds for openai, and install missing packages as reported during vercel build. Spent around 3 days trying to fix the deployment

[@maxkln]

@@ibrochillin same issue here. Vercel couldn't find Prisma, Clerk, OpenAI,.... - Have you solved by install all missing packages in VC Code and then push to Github again ?

[@bushaf]

This is very awesome. Do the langchain please, let's make AI our own personal bitch. Thanks a lot

[@codinginflow]

😆 well said

[@andc6016]

2:53:31

[@flynneugene2675]

How is bro a programmer and has good physique

[@codinginflow]

Just lift weights 3 times a week 😆

[@Chernov1984]

+

[@ManishGupta-nv5by]

Ai is costly to use😅

[@codinginflow]

Yea it costs like $0.0001 per request 🤯 🤯

[@ManishGupta-nv5by]

@codinginflow I just checked openai it really cost this only. thanks bro. I just started working with ai this week and ai model providers like basic plan 20$ or something. Well its high for who started learning. I will definitely watch the video.

[@codinginflow]

@@ManishGupta-nv5by Yea these models are extremely cheap

[@ManishGupta-nv5by]

@@codinginflow well if you are here where to start to start watching your videos ?

[@vincentvytoski3380]

I'm having this error warning, "Error: Prisma schema validation - (get-config wasm) Error code: P1012 error: Error validating datasource `db`: the URL must start with the protocol `mongo`. --> schema.prisma:10 | 9 | provider = "mongodb" 10 | url = env("DATABASE_URL") | Validation Error Count: 1" please should I do???

[@vincentvytoski3380]

Unhandled Runtime Error Error: Invalid `prisma.note.findMany()` invocation: error: Error validating datasource `db`: the URL must start with the protocol `mongo`. --> schema.prisma:10 | 9 | provider = "mongodb" 10 | url = env("DATABASE_URL") | Validation Error Count: 1 please any help to fix this error???

[@neeleshmeena9570]

Hey I am getting this error : Error: Invalid `prisma.note.findMany()` invocation: at this line of code : const allNotes = await prisma.note.findMany({ where: { userId } }); Please let me know how to fix this

[@kakoozavian]

I am also getting this error as well.

[@bims3147]

I have this issue too, have you guys fixed the error?

[@GECBE]

That's probably mongodb error, Go to ur mongodb account and add current IP address.(You will see a alert bar saying this IP is not added). This will solve ur issue

[@G_O_J_O_S_A_T_O_R_U]

@1hour 31 min (1:31) i am getting an error. Error: Invalid `prisma.note.findMany()` invocation: Raw query failed. Code: `unknown`. Message: `Kind: Command failed: Error code 8000 (AtlasError): empty database name not allowed

[@codinginflow]

Google the error

[@mikekistler9417]

I had this same problem. It turned out I had a small error in the src/lib/db/prisma.ts file. I copied the correct code from Florian's "Final Project" branch on GitHub and that fixed it. I would check that.

[@soma7891]

Where did you learned web development?

[@codinginflow]

Taught myself by building stuff

[@G_O_J_O_S_A_T_O_R_U]

do we need chat gpt 4 subscription for this?

[@codinginflow]

No. You only need an OpenAI account to use the API.

[@rohitlodhi45]

Its giving, invalid prisma.note.findMany() invocation error in page.tsx at 1hour 31 min Edit : Its Working, there is some ip address issue on mongodb i just added current ip address and it got started If anyone else facing same issue can try this

[@G_O_J_O_S_A_T_O_R_U]

yes i am also facing the same issue , can you please help me??

[@G_O_J_O_S_A_T_O_R_U]

Error: Invalid `prisma.note.findMany()` invocation: Raw query failed. Code: `unknown`. Message: `Kind: Command failed: Error code 8000 (AtlasError): empty database name not allowed

[@kakoozavian]

Your advice has also worked for me. Thank you.

[@cagsen6898]

When I add database name (for me "Cluster0") to database url in the .env, it fixed. kzbin.info/www/bejne/o5ytk3iGaqyYiKM