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: / 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: 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: • 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.
Смотрите видео Learn NextJS 13 by Building a Modern Full-Stack OpenAI Chatbot онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Josh tried coding 30 Апрель 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 62,04 раз и оно понравилось 1.8 тысяч людям.