How To Use openAI API (ChatGPT) in React JS

foreign so in this video today we are talking about that how to integrate the open AI API in react.js we need to set up the backend of environment so that backend we will be communicate with the chat GPT API right so here it is we will create a simple server that server will handle the request from the applications and forward to them to the open AI API and get response from the chat GPT for that we also need to install the library from open AI so let me start so I just created the folder called JS play so inside that I can just initialize the node environment package name JS Play version 1 description none entry point index.js just command empty empty empty so yes suffocated that there is a package.json will be create so here it is inside that I can just create the index.js so after that uh so this is the package.json so the next step I can install the npm install open AI now open AI also installed so the next part I can install the three dependencies one is Express and body parser and cars so three things I can install that CPM installed cars three things I can install that here it is I can install the four application necessary dependencies and let's start the code part and coming to index.js so the first step I can install the necessary libraries so these are the necessary libraries Cars Express and the body parser these are things and the main thing I can install the open AI import the open a library so in that there is two things one is for configuration the configuration will get the API key from our site and open a API will communicate that charge GPT model obviously type apkey dot so for this API key we need to get the API key from the chat GPT we need the tap key right so I can open the beta.openai.com so like for now they are they had to change that platform Dot openai.com so in that part there is a view API key is there so I'm already created a couple of keys so I can again create the new key so I can just copy it and I click OK that after that I can just been circuit so that's all in that side so I can just put comma over there so after that we need to initialize the open AI app so by this open a class like class method and after that we need to set up the server so yeah here it is so const app Express I can initialize that and use the body pursue that Json and the cars and I need to create a endpoint for that actually so for the front end we'll communicate with that backend right so in that so it's a API so this is the endpoint for the chat GPT inside that I can put that so what are the requesters we will get so that I can get and after that uh so I can use the Target and avoid a sync mother obviously so create completion so it says that the model is Tab and see text DaVinci zero zero three max tokens remainder buffer size 512 and a temperature that means the threshold value should be a zero and a prompt so so that should be a what we ask the questions right so that question is a prompt so once I initialize that method so I can send the data to the competition so after that it will return the one value so the next part I need to initialize the port and to set up the server configuration so here it is so now we can able to get the data so if I type that it will be asking hello access yeah now server is working so the next part we need to create a react for that let me open another terminal next we can create a react application by typing this command in PX create react app space and react.js chat GPT so I can just type it so after that the command will create a project with the name react.js hyphen GPT so The react.js Hyphen GPD folder is created and now app is creating now so it will take some couple of minutes so you need to wait further react.js charge if it is package is created that mean the react.js application is created so next open the app.js file so in the under the SRC so there is a app.js will be there so in that part uh so I can remove the existing things so let me uh import that necessary import libraries actually so import app.css and axios and use state so after that I can create a function called app so inside that function I can just uh initializing the states and we need to handle I can just create a one text box along with one submit button right so in that submit button I need to handle the that submit button function right that called a handle submit function so this is a handy submit function and inside that I can call that that node.js that means that node server backend of API and we will send the response to the TPI after that we will get the response and placed over there actually so inside the page so after that let me created the written statements actually so now it's completed right now so after the return of inside that on Sample text field along with the submit button so here it is so I just created like that so inside that finally we need to export this app right so I can just export it so in this part uh the important function is it handle submit so this code will trigger the submit button is clicked it can be see the form tag you can see the form tag as handle submit actually and the prompt will be forwarded to the end point and the address on the server right the HTTP 8080 chat obviously that node server then if it is successful the data response will be written however if it is failed or the nearer occurs the error message will be displayed on the console so here it is now let's run that our application with the command called that npm start so I can before that I can enter into the react chat GPT folder so after that npm start now it started so let me open that localhost 300 so if I executed that so it says just say ask or something so I can just say what is YouTube so if I click that button it will be go to the handle submit so after that it will be sent the back end to the node and it will return that action so the next thing I can implementing that designs in that page actually so let's come to the code so inside that we can just stop the server so I can just install that npm install D title build CSS to npmx style band as after that there is a tile wind config.js will be there right so in that part I can just copy that so what are the files it's applicable so I can just put all the file actually SRC and all those things now let me run again node index.js the backend server It Starts Now npm start so if I run that now it started so now we can check that yeah so now the page is ready now so I can type tell me about react.js hit the submit button here it is let me guess some integrate react.js open yeah chat CPT right node.js if I type that yeah so it would be cute to install the three package and creating PX command so all those things it will be given so this is our own chatbot right in that react level so hope you guys if you really like that video keep subscribe my channel and share it to our friends colleagues thanks for watching see you on the next video

Channel: intellisenseAI

Views: 5,626

Keywords: how to use openai, clone chat gpt, open ai, next js vs react, ai generated art, code chatgpt, clone chatgpt, openai, openai playground, customize chatgpt, chat gpt code, artificial intelligence, chat gpt clone, chat gpt, react js, react app, artificial intelligence course, ai chatbot, sophia robot, chatgpt code, react native, next js code with harry, build chatgpt, build chatbot, chatgpt clone, react tutorial, build chatbot from scratch, thapa technical, react

Id: fdiKq89iAeY

Length: 9min 45sec (585 seconds)

Published: Tue Feb 07 2023