How To Use OpenAI ChatGPT API with React JS

In this tutorial, you will learn how to integrate the OpenAI ChatGPT API with React JS to build intelligent chatbots. We will cover the steps involved in setting up the API, creating a chat interface with React JS, and sending messages to the API for processing. By the end of this video, you will have a basic understanding of how to use ChatGPT API with React JS and be able to implement it in your own projects.
My Udemy Courses:
- 30+ React Projects, Learn React JS by Building 30+ Web Apps: www.udemy.com/course/30-react...
- Advanced HTML CSS & SASS - Build and Deploy Modern Websites: www.udemy.com/course/advanced...
- Git & GitHub -Essentials for Version Control & Management Complete: www.udemy.com/course/essentia...
- Bootstrap 5 for Beginners with real world Projects: www.udemy.com/course/complete...
- 30 HTML CSS & JavaScript projects in 30 Days for Beginners: www.udemy.com/course/30-html-...
- Visual Studio Code - Master the Complete VS Code environment: www.udemy.com/course/visual-s...
- Master Responsive Web Design CSS Grid, Flexbox & Animations: www.udemy.com/course/master-r...
- Modern JavaScript from Beginner to Advanced: www.udemy.com/course/modern-j...
- Advanced CSS & SASS: Framework, Flexbox, Grid, Animations: www.udemy.com/course/advanced...
- Web Development HTML CSS & JS a Beginner to Advance guide: www.udemy.com/course/advanced...
🎱Source Code for this Video:
norbertbm.com/how-to-use-open...
-----------------------------------------------------------------------------
👇 Website & Courses: 👨‍🏫 :
norbertbm.com/web-development...
Podcast:
/ @weeklycodequickieswit...
-------------------------------------------------------------------------------------------------
Timestamps:
00:00 - Intro & Project overview
01:24 - Create a react js application using npm
03:18 - Create a Node.js server with Express
03:59 - Use NPM to Install Express openai cors body-parser and axios
06:54 - Add OpenAi API key to your Node.js App
09:19 - Create a POST request to OpenAI ChatGPT
12:48 - Create a ChatGPT Front-end Clone in React
16:20 - Connect ChatGPT front-end to the back-end using axios HTTP
-------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------
#OpenAIAPI #ChatCPTClone #norbertbmwebdevelopment

[@PostcardsFromJapan]

Fantastic tutorial, very easy to follow. Subscribed!

[@NorbertWebDev]

Thanks for the sub!

[@msh104utube]

Hey, if you overlay your head shot in the lower left corner, it covers up a lot of the inputs, so it makes the video hard to follow. Just for future reference :)

[@NorbertWebDev]

Thanks, I’m only showing my self in the intro for some time because of this issue :)

[@msh104utube]

@@NorbertWebDev Oh no problem. I know some instructors like to use it as a watermark, because some people have taken their videos and streamed it again as their own.

[@Androiski]

Hi, I tried to follow your example. I am new to Javascript. I installed the latest njs build 18.17.1 with this project.
> const { Configuration, OpenAIApi } = require("openai");
breaks the server.js file. I get an error that "Configuration" is not a constructor.
When I do not use the destructor and write
> const Configuration= require("openai");
> const OpenAIApi = require("openai");
It runs fine. Is this some minor change? I could not find any documentation about it. And I was not able to figure out which njs version you had.

[@worldoptics]

yes there were changes ,as the newer version V4 does not have configuration constructor. I also faced the same issue ,can you tell me if the rest of the code shown in this video working fine?

[@pashamayba7483]

You need to download the version of openai 3.2.1 as in the video, this is what you need to enter in the terminal npm install openai@3.2.1

[@KcClips]

please Update App.css file
(giving error)

[@NorbertWebDev]

Strange, will take a look at it

[@some_idiot83]

@@NorbertWebDev It's just missing a curly bracket after .form-group

[@Bob65001]

The error occurs here
.form-group input,
.form-group select {
border: 1px solid rgba(238, 238, 238, 0.9333333333);
border-radius: 5px;
padding: 0.5rem;
}
it is missing the curly bracket at the end