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

Dec 26, 2022Channel
AI Analysis
Data from YouTube Data API v3Updated 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

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

Related Videos

More videos from Adrian Twarog