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: https://upstash.com/?utm_source=Josh2
⭐ GitHub repository (star if you’re cool): https://github.com/joschan21/bookbuddy
⭐ OpenAI: https://openai.com/
⭐ My GitHub: https://github.com/joschan21
⭐ Discord: https://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: https://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: https://www.youtube.com/watch?v=Dert_kpLWE0&ab_channel=Joshtriedcoding

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.