Learn NextJS 13 by Building a Modern Full-Stack OpenAI Chatbot
58,696
Published 2023-04-30
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/?utm_source=Josh2
⭐ GitHub repository (star if you're cool): github.com/joschan21/bookbuddy
⭐ OpenAI: openai.com/
⭐ My GitHub: github.com/joschan21
⭐ Discord: discord.gg/4vCRMyzgA5
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 Snippets in VSCo...
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.
All Comments (21)
-
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/?utm_source=Josh2
-
Thank you so much Josh! I've already finish the chatbot by following your steps. Many things to learn with this video 😀
-
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.
-
Damn this is so good! Can't imagine how much time and effort you put into this. Loving the videos Josh!!
-
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.
-
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.
-
Great video, just amazing content one after the other. Thanks for all the effort you put into this big one 🙏
-
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.
-
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!
-
Josh u are an absolute legend for making these videos! Everything well explain and understandable! Great effort my man!
-
That source code is getting passed around like a joint 😂
-
Bloody incredible. Thank you for this!
-
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
-
Man, you deserve freaking lots followers.
-
Thank you for the fantastic content ! This was fascinating :)
-
Finally something to code with tonight! 🎉🎉
-
Awesome, looking forward to more t3 stack content!!
-
Awesome video. Thank you!
-
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.
-
U da man Josh! Thanks a lot!!! Greate vid!!
