Learn NextJS 13 by Building a Modern Full-Stack OpenAI Chatbot

Let's become amazing web devs together! In this single video, we'll build a super useful customer support chatbot using OpenAI's ChatGPT. It's an awesome portfolio piece to have because it shows your ability to create interactive web apps that solve real-world problems.
The best features:
- Real-time streamed chatbot responses
- Optimistic updates for the best UX
- Secured, rate-limited API routes to prevent abuse
- Graceful error handling
.. and many more!
--- Project links
⭐ Upstash for API route security: upstash.com/?Josh2
⭐ GitHub repository (star if you're cool): github.com/joschan21/bookbuddy
⭐ OpenAI: openai.com/
⭐ My GitHub: github.com/joschan21
⭐ Discord: / discord
Thank you to Upstash for sponsoring this video. I've used their rate-limiting service before they reached out and it fits super well into this build to secure our OpenAI API route.
How to use the "FC" snippet I keep using in the video:
Step 1: Paste the following into your Settings; User Snippets; typescriptreact.json: pastebin.com/PWzQGH08
Step 2: Type "fc" and hit TAB.
Step 3: If you still can't figure it out, here's me explaining it in detail: • How to create Custom S...
Timestamps:
0:00 Introduction
0:47 What you'll learn & demonstration
4:17 Project setup
10:28 Creating our collapsed chat
26:51 Creating our chat input
54:38 Setting up our API route
1:03:47 Prompting & metadata for the chatbot
1:06:40 Implementing real-time response streaming
1:35:50 Creating our context & why bother
1:57:00 Creating our ChatMessages component
2:14:57 Properly rendering the chat responses
2:30:10 Implementing graceful error handling
2:33:27 Last tweaks
2:36:53 API rate-limitation with Upstash
2:46:15 We're all done! Good job.

[@joshtriedcoding]

I know y'all enjoy the long-form videos a lot. Let's become amazing web devs together and build an awesome app! ⭐ GitHub repository (star if you're cool): github.com/joschan21/bookbuddy ⭐ Upstash for API security: upstash.com/?Josh2

[@b3rking]

Im following the lead.

[@burakcanozturk8053]

Hello! It keeps me waiting when I send the message. What could be the problem?

[@DooMLau]

@@burakcanozturk8053 I have this problem to, and for some reason if I move the res function in a try/catch block, the req is sent to the GPT Api but no response :(

[@Renzo-of3yn]

Thank you so much Josh! I've already finish the chatbot by following your steps. Many things to learn with this video 😀

[@BransTiong]

Was half way through when you said nobody writes code like this. Made me feel better that im still in the learning process and trying to understand why each line mattered.

[@ujjwal-agarwal]

Will do this once I finish the chat app project. That one is legitimately one of the best build-together projects I have ever seen. Gained so much insight into TS and Next.

[@joshtriedcoding]

Thank you for the high praise. Means a lot.

[@nunopereira1772]

Great video, just amazing content one after the other. Thanks for all the effort you put into this big one 🙏

[@kavindesivalli]

Damn this is so good! Can't imagine how much time and effort you put into this. Loving the videos Josh!!

[@joshtriedcoding]

Lots, thank you man

[@AlexOchs]

That source code is getting passed around like a joint 😂

[@s0ulweaver]

Originally Josh's joint but every person is going to say "it's mine but you can have it" 😂

[@subhamshaw1726]

Thank you very much for making this video. it really saved me literally from a lot of problems. paricularly, i was strugling with writing custom streaming logic for encode and decode the openai response and send it in chunks to the client. Great video man.

[@lev1ato]

Bro I am so glad I found this channel, you cover everything I am interested in and use the new app directory, please keep it up!

[@joshtriedcoding]

Happy to hear that. Cheers

[@iAmTheWagon]

Bloody incredible. Thank you for this!

[@joshtriedcoding]

Cheers man

[@saidurrahmansiam]

I'm a mobile app developer and recently I started exploring web development and came across NextJS for its fascinating rendering methods. explored a lot of resources lately but yours helped me a lot to understand the recent updates in NextJS. keep making great content. wish you best of luck.

[@joshtriedcoding]

Yeah, the granular control over rendering is by far one of the most powerful features of next. Cheers dude

[@petrpospisil4484]

Josh u are an absolute legend for making these videos! Everything well explain and understandable! Great effort my man!

[@joshtriedcoding]

I really appreciate your kind words. All the best man

[@j2devstudio]

Thank you for the fantastic content ! This was fascinating :)

[@computer693]

Awesome, looking forward to more t3 stack content!!

[@joshtriedcoding]

Got a love-hate relationship with t3, let's see what the future holds :D

[@peter042]

​@@joshtriedcodingwhy the hate part tho? I'm not sure if I want to use it

[@contigen]

Man, you deserve freaking lots followers.

[@nubian_goat]

Finally something to code with tonight! 🎉🎉

[@mikeatilano4954]

Hi Josh! Awesome work. I just wanted to ask how do I keep the line breaks of the responses from OpenAI? Similar how responses are returned by the chatgpt site.

[@xav_624]

Awesome. I'm gonna try reimplement this gpt-chatbot idea with Nuxt3

[@buddy.abc123]

Awesome! I was worried that I'm wasting my long weekend until now

[@joshtriedcoding]

Cheers dude

[@TheIpriest-fp2mk]

i did not want to comment before because this project was last year well i was just following the project up and i really appreciate your honesty and simplicity you make me feel relatable i hope you see this comment though

[@maha33612]

did you complete it?

[@Luxcium]

I feel so stupid for my comment on your 8 hour video but it is also funny how stupid it was so I was unable to delete the comment… I just feel addicted to your style of video and I am genuinely in love with your channel ❤❤❤

[@user-oe5df4wm4u]

Awesome video. Thank you!

[@michaelkudrik4922]

Good vid. Id love too see an in depth tutorial on how to make a basic blog using NextJS. Most of the videos I've seen so far are either confusing or not up to date.

[@joshtriedcoding]

Good idea for another long-form video

[@asianck]

Something with pagination would also be awesome!

[@mso1830]

I implemented the chatbot and it is working great. however, The amount of text to feed the prompt is limited. Can you do the extra mile and implement the LangChain with any open indexer to answer questions on huge content such as all your books inventory and more details on them.

[@davidallred991]

Thanks, great tutorial. I have been trying to get ChatGPT streaming to work for a while properly and this is the first tutorial I have found that actually got it working properly. If you're looking for tutorial ideas it would be great to see one that is a ChatGPT clone that incorporates the streaming along with a database (maybe supabase) hookup to have persistent data and be able to continue conversations. All the tutorials I have found on ChapGPT API have not been that great and don't persist conversations or stream the answers. They are basically a one off question query to the API and then get a block response which isn't really all that helpful.

[@eternaleffect2499]

So does this project saves conversations ?

[@akifahmed9610]

This tutorial is great for a person having knowledge about streams but for a beginner it is pretty much difficult to understand the streaming part. If you could make a video on streaming alone it would really help.

[@ahmadkhairiabidmohdkhairiz8778]

For those who stuck at 1:30:00 make sure the: Authorization: `Bearer ${process.env.OPENAI_AI_KEY}`, OPENAI_AI_KEY = in openai-stream.ts is same as the .env can use option 1: 1. npm install dotenv --save 2. on top of file openai-stream.ts add: require("dotenv").config(); 3. change the file of .env.local to .env option 2: 1. put your secret key directly at: Authorization: `Bearer ${process.env.OPENAI_AI_KEY}`, as Authorization: `Bearer ${process.env. YOUR_SECRET_KEY }`, etc Authorization: `Bearer ${process.env.sk-000000000000000000000000}`,

[@nandantyagi]

U da man Josh! Thanks a lot!!! Greate vid!!

[@lucasfranzolin]

it would be awesome to connect the chat with a pg database, personal assistants in any business area is gonna be hot!!

[@prashlovessamosa]

Thanks fan your Next JS video help me alot now this video thank you for all the knowledge that you providing us for free. Thank you 🙏

[@k.vabhavmishra]

Bro from where You learnt MERN ? More precisely React?

[@prashlovessamosa]

@@k.vabhavmishra Bahi search Coding with Dawid Pedrotech These two resources I used man

[@AndrewLiu1]

great video. will you be able to go over on chat history? seems like they don't keep a conversation going. also, what would be best practice so history wouldn't take up more tokens

[@adenkesuma]

i'll always support u josh,

[@user-df5xe2fo4p]

thank you sir from India

[@davidsosa5940]

Sorry Josh but im having an issue trying to install the shadcdn accordion, it gives me this message Configuration is missing. Please run init to create a components.json file. I run init to create the json file but still i cant install the accordion.

[@kc-bytes743]

Are you new on KZbin or you have old KZbin channel your are growing very fast and your content is awesome and gift

[@souviksaha5416]

8:45 how did you select the whole main block like that any vs code shortcuts?

[@maverick456-33]

Great NextJS13 Video with cool ui

[@joshtriedcoding]

Cheers

[@igmeMarcial]

This information is worth millions

[@joshtriedcoding]

Cheers man

[@creative0x]

on my end, its asking if I want to use App Router. Should I say yes for this tutorial?

[@arjundabir9066]

Any update to fix the streaming error @ 1:30:00 ? I get all the data from OpenAI but the onSuccess function doesn't work since the call returns an error.

[@flomoharris9513]

Hi Josh, can you recommend me a very comprehensive JavaScript tutorial cuz I'm finding it difficult to figure out React quickly..

[@waliahmed3035]

Hey Josh, is there any way in server components Next js 13 to get the current route? I want to use the current route name and set my navbar button to active. For example if am on my home page, i want it to be active

[@joshtriedcoding]

Pretty sure you can get the url via the params that are passed to each page automatically

[@ragnarlothbrok3228]

Awesome video , I hope you do t3 stack 👍🏻

[@joshtriedcoding]

Not into it at the moment but who knows

[@b3rking]

Another master class from josh¡

[@joshtriedcoding]

Cheers dude

[@eternaleffect2499]

Can someone with no prior experience on Typescript follow along?

[@Michael-Martell]

@1:06:00 where can we learn to generate a site map like what was shown. I have no experience web scraping.

[@abdellah.coding]

cmon man you got this 🥇

[@dummymail2495]

I created .env.local file in the root level of the project. Inside the file I have environment variables like HELLOKEY=ASDFG then when i write as console.log(process.env.HELLOKEY) it gives undefined. But instead of writing process.env.HELLOKEY, if I write the direct value, I mean ASDFG, it logs the value. Why so bro?

[@joshtriedcoding]

Make sure you call these env variables serve-side only, they'll be locked for client-side access to make sure you don't leak sensitive information on accident

[@Chris...S]

Hey Josh, Do you prefer React-query over trcp? Noticed your not using trcp lately in your build videos even though your always using typescript.

[@Luka_brx]

trpc use react-query under the hood and trpc aint best option with app dir, react query helps u with the fetching and states, trpc is here to act as a glue between backend and frontend so u have typesafe app

[@joshtriedcoding]

Good catch, yeah my experience with tRPC and Next 13 was pretty bad. Just react query works perfectly fine and achieving full-stack typesafety is very possible without tRPC as well

[@Chris...S]

@Josh tried coding It would be great for you to do a video regarding how to achieve fullstack typesaftey with using react-query without trcp on Next 13

[@joshtriedcoding]

@@Chris...S That's a video idea I had too! Thanks for the suggestion

[@BobMonizLQD3Designs]

getting this error: error - Cannot read properties of undefined (reading 'startsWith') null

[@bbanaei]

any idea how to fix this?

[@vintagewally9824]

I still can't get how to change the favicon with a custom in the new app/

[@murtadanazar]

amazing ❤

[@user-cf4wz4xf3b]

Hi Josh. I went straight to your github repo and cloned it. Wanted to see it in action. Setup environment variables in a .env file and the database on upstash., but when I send a message in the chatbot, it seems to send commands to upstash, but my openai api is getting nothing. What could be the problem here?

[@DooMLau]

I had the same problem

[@GiggleGurusDz]

I believe that the problem is related to the OpenAI 3-months free trial is up!

[@burakcanozturk8053]

Hello! It keeps me waiting when I send the message. What could be the problem?

[@tommytanti1776]

Bro, I need something similar with live chat function. Can you add that if possible PLEASE

[@szymon7932]

41:19 actually this is very bad, you will create new instance of QueryClient on every potential rerender. Instead it should be moved outside component on into some stable reference eg. const [queryClient] = useState(() => new QueryClient() )

[@smitty7326]

Does this still work or have OpenAI updates made parts obsolete? I'm trying to go through it, but I'm hitting errors around 1:30:00

[@Michael-Martell]

Me too. I’m at 1:35, and been trying to get it to return data. The API call is sending the payload with all it’s info fine, But I’m not getting a status or response back…. :/

[@wisco3003]

How can I start the server with npm at 8:10? I tried Yarn Dev but it gives me error. Any suggestions?

[@youthfactfactory7877]

Run: npm run dev

[@wisco3003]

Thank you so much!@@youthfactfactory7877

[@valentinoforever]

this is easy because your db data is of 2 books. What if you have 100k books in bookData?

[@08XI]

After 20:00 (accordion part) i'm getting error with hydration Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching in . Can someone help me where can be problem ? It looks like some Radix-ui problem

[@aginlo]

same here

[@zackh]

You need to put your Chat element inside the body tag of layout.tsx. I'm guessing right now you have it inside the html tag, but not inside the body tag.

[@sofiuzzaman-sofi]

you should zoom your screen, cause your screen is big, but mostly we saw this video on laptop which is only 13inch screen or mobile, so pls keep it mind❤

[@vincent3542]

Hi Josh, can i also put my personal information in this chatbot, so any recruiter can interact with me "directly" with this bot ?

[@joshtriedcoding]

As long as you tell the chatbot exactly what it should do, there are almost no limits except for context length

[@thequang9234]

holy smoke this is good.

[@joshtriedcoding]

Happy to hear you like it

[@AlexOchs]

Hey guys, my ReadableStream does not stream data / returns empty when returned to the client, any guesses? I'm using the traditional page router for client + API. Cheers mates. EDIT: You need to enable Edge API runtime for Next.js...

[@Dysfunctional704]

Encountered the same issue, could you elaborate on enabling Edge API runtime in Next?

[@Rmanneh1997]

@@Dysfunctional704 I had this error. Forgot to add return Stream; before closing the async function OpenAIStream

[@gildemarbarros9134]

I had this error and the problem was that my openai account was old enough to have finished my free trial

[@Dysfunctional704]

Just got around the problem. Turned out I forgot this line in my API route `export const runtime = "edge"; // 'nodejs' (default) | 'edge'`

[@perrythepalteypus2185]

👏🏻👏🏻👏🏻

[@justinM3610]

If isLoading isn't working for you, replace it with isPending

[@radixp0int]

Thanks! Noticed with v5 of react-query, they are using these `isIdle`, `isPending`, `isSuccess`, `isError`: boolean variables derived for status.

[@yeasinshakil3576]

hey josh I'm getting fetch error 500. I also tried to clone your project and added my openAi API key to the project and still getting the same 500 error. is there any solution?

[@ahmadkhairiabidmohdkhairiz8778]

got the same error

[@Triple._.A]

Any solution for why I keep getting "pending" in the network tab after sending a message? I've checked my API key multiple times, nothing wrong with that I believe. I also tried copy-pasting so many sections of the code from the completed repo on GitHub, I haven't been able to find a single mismatch so far that could result in an error. Been debugging for 2 hours and have made no progress whatsoever. Just stuck on pending every time I send a message.

[@petrpospisil4484]

because you cannot use the API for free anymore. I had the same problem, I found out it doesnt take my API key and the error I was getting was 429 - too many requests. If you go on their website it tells you, you have to pay to use the API. So I just set up my card, generated new API key and it works fine.

[@Triple._.A]

@@petrpospisil4484 Thanks a lot omg! I spent 3 days debugging for hours on end and thought that expiry date was weird too. I just made a new account and went on the usage page, and now it's telling me that I have to pay. They should make it more clear for the users who have already had an openAI account for a while. I thought the expiry date was a mistake because it still showed that I used $0.00 out of $18.00.

[@gildemarbarros9134]

@@Triple._.A I had the same error, a lot of wasted time... I came back here to warn the next ones. XD

[@SomeGuy-mg4fh]

@@Triple._.A Hey i have a new account and it shows i have some credits left.... i set up an test api from the documentation which works just fine but here i am getting status as pending. Do you have a fix by any chance??

[@Triple._.A]

@@SomeGuy-mg4fh they don't have a free tier anymore I believe. I also created another account when I ran into this problem, it was the same issue. So I just paid for it and then it finally worked. But it's superrrr cheap so I'd recommend it! You pay per usage so it will be veryyy cheap, like a few cents if you only use it for this video.

[@anuragdas1217]

Awesome! Can you share the landing page styles?

[@joshtriedcoding]

They're just a TailwindUI template for making the page look less empty, I think sharing those wouldn't be very cool with TailwindUI

[@anuragdas1217]

@@joshtriedcoding oh i understand 😂

[@jxsh9]

@@joshtriedcoding First of all, great video! What template did you use? I liked it.

[@amandaheater3517]

I have finished the project but my messages are just pending, is anyone experienced that and how did you solve it please. Your help will be appreciated

[@gildemarbarros9134]

Me too

[@petrpospisil4484]

because you cannot use the API for free anymore. I had the same problem, I found out it doesnt take my API key and the error I was getting was 429 - too many requests. If you go on their website it tells you, you have to pay to use the API. So I just set up my card, generated new API key and it works fine.

[@AlexSmith-ms9xb]

Later edit: it seems that I misspelled the name of the OPENAI_API_KEY variable in the .env file. Anyone experiencing the problem I described below, make sure you spelled the OPENAI_API_KEY environment variable name correctly and didn't put the generated key in quotes. Hope it helps! Looks like I'm not getting the response when I am trying to fetch from my api. It shows pending and doesn't return data. Can someone please help?!

[@dublulink1651]

did you fix it?

[@AlexSmith-ms9xb]

@@dublulink1651 yes, I did. As I said, my problem was that I misspelled OPENAI_API_KEY. I wrote OPEN_AI_KEY instead of OPENAI_API_KEY.

[@dublulink1651]

@@AlexSmith-ms9xb mine's still not working

[@TheRealDxsire]

@@dublulink1651 same problem... any update?

[@eternaleffect2499]

Whenever i try to send a message it only shows message status pending in network tab can anyone help me figure it out why is it so i checked the .env file api key is correct.

[@sandrogtz]

got the same problem did u figgured it out ?

[@silentbang7193]

same problem , any fixes guys?

[@sandrogtz]

@@silentbang7193 Yes u have to add your credit card in your OpenAi acc for it to work !

[@user-db4rl3md8r]

@@silentbang7193 It's because your API key has expired. If you pay, the data will come through

[@Aman-tr4bb]

Why my api not getting the response when I am trying to fetch it shows pending and doesn't return data

[@thequang9234]

same here

[@souviksaha5416]

did you find a solution bro?

[@Aman-tr4bb]

Still not 😢

[@renefue02]

I have the same error, if someone solves it, could you please share it?

[@gildemarbarros9134]

Me too

[@adenkesuma]

Please create a playlist learning t3 stack

[@joshtriedcoding]

Haven't done t3 stack in quite a while

[@adenkesuma]

@@joshtriedcoding alright, but I'll always waiting for that

[@_boris]

Hi Josh, thanks for sharing your knowledge, learning a lot from your content However, if I may provide some feedback, I believe it would benefit us if you turned on word wrapping in VSC. Helps with the long tailwind classnames (for instance @29:30 we can't see the full classname for accordion item 1) Once again, thanks for sharing 🫶

[@joshtriedcoding]

Didn’t even know that was a thing, thanks for the suggestion

[@sallehshah]

i would appreciate if you create a design system creation project from scratch , that includes: 1.typescript, 2.stotybook, 3.es-lint, 4.prettier, 5.jest 6.React Testing Library (RTL), 😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍

[@joshtriedcoding]

Very specific, appreciate your suggestion

[@brayancuenca6925]

Awesome content, Josh! I'd recommend you reminding us to subscribe and like because I often forget 😅 and because you deserve it!

[@joshtriedcoding]

Cheers dude

[@cmdaltctr]

I thought you are leaving Next JS?

[@Dev-Siri]

he left nextjs for his side projects. His channel is still mainly based on Next

[@usmanmarkaz]

sir plz make One fully functional Ecommerce project in Next js (in JavaScript) with redux toolkit and use any strapi or sanity for backend

[@deiminator2]

Why do you want him to do it for you?

[@usmanmarkaz]

@@deiminator2 fool this is not for me its everyone who's are beginner

[@deiminator2]

@@usmanmarkaz sure thing Mr. Professional

[@Dev-Siri]

you could try to build one on your own too.

[@tajmirul]

Too many details sometimes it's boring. I am here to learn how to use GPT-3/4. This means I know what a "cd" command does or how "app router" works. Please don't have to be so detailed.

[@denburg]

if u had a problem with an edge function while deploying to vercel with error 500 on the console for /api/message, u can try changing the code on route.ts file on the outbound messages to this const outboundMessages: ChatGPTMessage[] = parsedMessages.map((message) => { return { role: message.isUserMessage ? "user" : "system", content: message.text, }; });

[@amandaheater3517]

Finished the project but getting OpenAIStream is not defined. The whole error ReferenceError: OpenAIStream is not defined at POST (webpack-internal:///(sc_server)/./src/app/api/message/route.ts:31:20) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:240:37) Any ideas to help please? And thank you for the free content

[@BobMonizLQD3Designs]

I am also getting this

[@amandaheater3517]

@@BobMonizLQD3Designs In my case I forgot to import it. Try to check if you have imported it

[@BobMonizLQD3Designs]

thanks, getting this error now: error - Cannot read properties of undefined (reading 'startsWith') null

[@kc-bytes743]

Like here if You complete this Project