ChatGPT API in JavaScript for Beginners - AI Chatbot Tutorial
In this tutorial, you will learn how to create your very own chatbot from scratch using the new ChatGPT API and the GPT-3.5-TURBO model.
For the tech stack, we'll use Next 13 and Tailwind to build the frontend and backend logic.
This tutorial is BEGINNER friendly and ideal for coding along.
☕ Buy me a coffee:
https://www.buymeacoffee.com/leonvanzyl
#chatgpt #chatgptapi #gpt3 #openai #gpt35turbo #midjourney
PREREQUISITES:
Create an account on Github: https://github.com
Install Git: https://git-scm.com/downloads
VS Code: https://code.visualstudio.com
USEFUL LINKS:
Midjourney: https://www.midjourney.com
OpenAI: https://openai.com
Source Code & Avatar Image: https://github.com/leonvanzyl/chatbot
Vercel: https://vercel.com
CHAPTERS:
00:00 - Introduction
00:40 - Project Demo
02:07 - What you'll learn
02:29 - Introducing Next.js 13 Route Handlers
02:39 - Introduction to tailwindcss
02:44 - Setting up a nextjs project
03:37 - Settings up Tailwindcss
05:44 - Nextjs API Route
08:37 - Creating an OpenAI account
08:55 - Generating the API Key
10:24 - Adding OpenAI createChatCompletion function
14:29 - User Interface
14:43 - Create an avatar using Midjourney
15:20 - Building the layout
30:40 - Completing the API Route
40:02 - Production Deployment
40:06 - Push the code to Github
40:50 - Vercel
43:21 - Outro