Next JS ChatGPT clone with NextJS OpenAI NextJS 13 2023

Use Next JS & OpenAI to build a ChatGPT clone, incl. mongodb, edge functions, auth0, tailwind css + more! (Next JS v13)
Next JS ChatGPT clone with NextJS OpenAI NextJS 13 2023
File Size :
2.19 GB
Total length :
4h 36m



Tom Phillips


Last update




Next JS ChatGPT clone with NextJS OpenAI NextJS 13 2023

What you’ll learn

Increase your value as a web developer by learning how to build AI powered apps
Build a ChatGPT clone with OpenAI and Next JS
Implement user accounts in your Next JS apps with Auth0
Style your Next JS apps with Tailwind CSS
Store chat history for your ChatGPT clone with MongoDB
Deploy to production using Vercel and utilise edge functions to stream data back from OpenAI, just like ChatGPT!

Next JS ChatGPT clone with NextJS OpenAI NextJS 13 2023


Basic understanding of React is required – everything else is covered!


Don’t get left behind! Increase your value as a web developer today by learning how to build AI powered web apps!THIS COURSE WILL BE GOING THROUGH A COMPLETE UPDATE TOWARDS THE END OF 2023 TO USE THE NEXT JS 13 APP DIRECTORY.Welcome to the ultimate course on how to build your very own ChatGPT clone!In this course, you’ll learn how to create “Chatty Pete”, a powerful chatbot with the same capabilities as ChatGPT, that uses Next.js v13, OpenAI’s GPT API, Next JS edge functions to stream chat responses, MongoDB for data storage, Auth0 for user authentication and user accounts, and Tailwind CSS for beautiful layouts and styling. We’ll end the course by deploying our app live to production, hosted on Vercel.You will be guided through every step of the development process, from setting up your Next JS development environment to deploying your finished ChatGPT chatbot clone to the web using Vercel. You’ll learn how to create conversational interfaces, process user input, and generate natural language responses using OpenAI’s powerful ChatGPT language models. You’ll also learn how to utilise Next JS edge functions to stream data back from the OpenAI API, exactly the same as how ChatGPT does it!With MongoDB, you’ll learn how to store and retrieve chat history, while implementing Auth0 within your Next JS app will enable you to add user accounts and secure your application with user authentication and authorization. Finally, you’ll use Tailwind CSS to create a stunning user interface within Next JS that looks great on any device.This course is perfect for developers who want to expand their skillset and learn how to build complex web applications using the latest technologies. Whether you’re a seasoned web developer or just starting out, the step-by-step approach and easy-to-follow instructions in this ChatGPT clone course with Next.js will help you master the skills you need to build your very own ChatGPT clone.So why wait? Sign up now and start building your own ChatGPT clone today!


Section 1: Introduction

Lecture 1 Important! Read this before you start the course! (Github repo etc)

Lecture 2 Introduction

Lecture 3 Project setup

Lecture 4 Udemy ratings & reviews

Lecture 5 Set up the chat route / page

Section 2: Authentication & authorization with Auth0

Lecture 6 Set up auth0 for authentication

Lecture 7 Create auth api routes

Lecture 8 Set up the login and logout state

Lecture 9 Style the homepage with tailwind css

Lecture 10 Implement signup functionality

Lecture 11 Redirect to chat page if logged in

Section 3: Build out the chat page

Lecture 12 Create the basic chat page layout

Lecture 13 Create the ChatSidebar component and add the logout link

Lecture 14 Create the footer and message form

Section 4: Build the OpenAI streaming functionality

Lecture 15 Create an OpenAI API key


Lecture 17 Create the sendMessage endpoint

Lecture 18 Set up the OpenAI API call

Lecture 19 Stream the OpenAI response on the front end

Lecture 20 Create the Message component and display new messages in chat window

Lecture 21 Finish implementing the Message component styles and logic

Lecture 22 Protect the chat routes and pages so only logged in users can access

Lecture 23 Add the loading state to the form

Lecture 24 Refine the OpenAI prompt

Lecture 25 Fix the footer form position and make chat window scrollable

Section 5: Storing chats with MongoDB

Lecture 26 Overview of edge functions

Lecture 27 Set up MongoDB Atlas account

Lecture 28 Set up the createChat endpoint

Lecture 29 Test the createChat endpoint

Lecture 30 Create the getChats endpoint

Lecture 31 Render the list of chats in the sidebar

Lecture 32 Style the chat list in the sidebar

Lecture 33 Implement creating a chat in the sendMessage endpoint

Lecture 34 Create the addMessageToChat endpoint

Lecture 35 Navigate to newly created chat page

Lecture 36 Reload chat list on route change

Lecture 37 Load chat messages for a particular chat

Lecture 38 Render chat messages for a particular chat

Lecture 39 Modify the sendMessage endpoint to cater for existing chats

Lecture 40 Implement conversation history in OpenAI

Section 6: UI Updates

Lecture 41 Fix streaming on wrong chats

Lecture 42 Auto-scroll when there’s an incoming message

Lecture 43 Add Google font for our app

Lecture 44 Add missing styles for homepage

Lecture 45 Add UI for new chat

Section 7: Validation

Lecture 46 Validate chat id for chat id page

Lecture 47 Add validation to sendMessage endpoint

Lecture 48 Add validation to createNewChat endpoint

Lecture 49 Add validation to addMessageToChat endpoint

Section 8: Deploy

Lecture 50 Deploy to vercel

Lecture 51 BONUS!

React developers who want to increase their value as a developer by learning how to create SAAS products and start leveraging the power of AI

Course Information:

Udemy | English | 4h 36m | 2.19 GB
Created by: Tom Phillips

You Can See More Courses in the Developer >> Greetings from

New Courses

Scroll to Top