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

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/PWzQGH08Step 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 Introduction0:47 What you’ll learn & demonstration4:17 Project setup10:28 Creating our collapsed chat26:51 Creating our chat input54:38 Setting up our API route1:03:47 Prompting & metadata for the chatbot1:06:40 Implementing real-time response streaming1:35:50 Creating our context & why bother1:57:00 Creating our ChatMessages component2:14:57 Properly rendering the chat responses2:30:10 Implementing graceful error handling2:33:27 Last tweaks2:36:53 API rate-limitation with Upstash2:46:15 We’re all done! Good job.