Let’s Build ChatGPT 2.0 with React JS and OpenAI on your PC!

ChatGPT clone using the latest React JS and simple HTML and CSS. Built on top of Node JavaScript and Express, this will let you run your own instance of ChatGPT on your own PC! Chat GPT Starter Kit: OpenAI Template: This video will cover how to code from scratch a Chat GPT interface for the frontend and a backend using Open AI latest package! It is a beginner-friendly tutorial for using the OpenAI API and working with models that are provided like DaVinci, ada, etc. You can build your own chatbot interface and this guide is also intended to help build the foundations to work with prompts and outputs from the chatgpt models. 00:00 - Introduction 00:12 - Coding ChatGPT preview 00:34 - OpenAI Template Starter Kit 00:57 - ChatGPT Starter Kit 01:22 - Initialising Project 02:47 - Starting Frontend with Create React App 03:03 - Designing ChatGPT Side menu 05:51 - Styling ChatGPT Side menu 12:34 - Designing Prompt Input 13:42 - Styling Chat GPT Input 18:52 - Coding Chatbot Interface 20:31 - Styling the Chat message interface 28:15 - Adding OpenAI SVG Logo 28:53 - Starting Backend with Express 29:54 - Preparing OpenAI Configuration and API Key 32:48 - Creating Express API Routes 34:03 - React Frontend handle Submit function 37:11 - Cleaning up the React Components 41:54 - Creating Frontend API Request using Fetch 47:17 - Frontend Backend integration 53:02 - Adding Features to Select OpenAI Models 01:02:02 - Conclusion #chatgpt #ai #openai