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
