Let's Build ChatGPT 2.0 with React JS and OpenAI on your PC!
Dec 26, 2022•Channel
AI Analysis
Data from YouTube Data API v3•Updated Just now
Video Overview
Video Details
PublishedDec 26, 2022
Duration1:02:23
Video IDqwM23_kF4v4
Languageen
CategoryScience & Technology
PrivacyNot specified
Made for KidsNo
Video TypeRegular Video
Performance Metrics
Views489.3K
Likes9.1K
Comments472
Engagement Rate1.95%
Likes per 100 views1.86
Comments per 1K views0.96
Video Tags
Description
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!
⭐ New - Teach Me OpenAI Digital Book ⭐
https://enhanceui.gumroad.com/l/teach-me-openai
I've put together a easy to understand book with ~60 pages about OpenAI and GPT with how to get started to integrate it into projects, code examples, and much more!
Chat GPT Starter Kit:
https://enhanceui.gumroad.com/l/chatgpt-template-starter-kit
OpenAI Template:
https://enhanceui.gumroad.com/l/chatgpt-starter-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