What is going on everyone in today's tutorial I'm going to show you how to use OpenAI's API in order to integrate ChatGPT or to create your own ChatGPT in a React application. Now we're going to use Express as a dedicated server so we're going to create a little server in Node.js so you need to have Node.js installed if you don't have Node.js installed then please check out the video down in the description or check it out on my channel it's a pretty short video how to install Node.js and also please have the latest version installed now let me just quickly show you what this application does it's basically exactly like chachi pt for example if i would ask it what is react then it's going to take a couple of seconds and there we go react is a javascript library for building user interfaces let's ask you another question and as you can see it's not typing it out one word at a time as chachi pt does because i don't have that type effect integrated that's basically all it's waiting for the entire code to to be sent to me or the entire script to be sent to me and then it's going to pop out so for example you can also ask it what is javascript and let's say javascript is a scripting language used to create and control dynamic website content so hope you're excited if you are give this video a thumbs up share with others and also subscribe to the channel and click that notification bell so let's get started with the project okay so i just have here a empty folder called code and within here i'm going to now open up the terminal and create first of all a react application now hope you know how to create an app react application mpx create dash react dash app and i could create it within here but i'm going to create uh let's say chat dash gpt dash app as a completely new project now this is going to take a couple of seconds until it's installed in the meantime let me tell you that you do need a openai account if you don't have one don't have one created i'm going to create a short video on how to do that but it's pretty simple and also you're going to need your api key now please don't show that api key to anyone and normally you would integrate that key in a env file now we're going to do it the quick and dirty way so so you should go in the meantime to openai openai.com And here is where you can then create an account. You go to products, overview, get started. And there's going to prompt for your login. I'm not going to do this.
I'm already logged in. I already have my key ready. So the application is ready.
Let's cd into chat gpt. And let's npm start. And this should now start up.
I already have it running. I'm going to start it on a different port. Localhost 3002 in.
in my case close this up so this is our application going to delete everything and first things first we are going to create within our chat gpt another file you can also create it outside this is the front end normally you would create a back end a server outside here but again i'm going to do it the quick and dirty way so i'm going to create here a server.js file and this is where the server will live in order to create our server we need to bring in a couple of things we need to bring in express we need to bring in course we need to bring in body parser and we need to bring in our open ai so and we will also need axion so i'm going to do the following uh let me go up here like make this larger i'm going to create start a new terminal we are in code so you need to cd into react chat gpt into chat gpt app and within here we're going to npm install and we're going to install express which is basically used for creating node.js servers then we're going to install openai basically installing them all at once openai and openai is just a node.js library that provides convenient access to openai's api from node.js applications and also most of the code in this driver is generated from a openai's is generated our generated for specific open ai now we also need to install body parser body dash parser which is just a middleware the body parser will parse as it says incoming requests for bodies in middleware before you handle them so it is available under the request when we adding our request response we're going to get our res.body properties and what else do we know oh yeah we need course not course just CORS which is a Node.js package for providing connect slash express middleware that can be used to enable course with various options so and i also need axia axion uh so that x and x ceos okay because we're going to create the connection that way so that's pretty much it let's hit enter and now take a look in your package.json and we'll start seeing them appear right here okay so we've got opening here we got express we got course we got body parts we got axios and yeah we can get started so we're going to close up our package just json and now we can start creating our server basically we're going to bring in express i'm going to require it from express so open close parentheses express we're going to copy this replace this with course also need course we need our body parser and this should be here dash and p and i'm also going to bring in open ai and from open ai i'm going to destructure here const the configuration duration and also the open ai api api okay i'm going to bring this in from require open ai okay now next up we're going to use our configuration because basically we're going to create a config variable here which is then going to create which will then assign to a new configuration configuration and in our configuration this basically just going to take in a object which is going to take in the open ai key now as i said you will need your open key ai key here so we're going to paste it in in a string now where do you get your open ai key i'm also going to do a separate video on this going to go to open ai and you're going to go to guidance where's our keys and from keys you're going to create a new key copy and paste it in here okay now this key will not work because i'm going to delete it so just create your own key okay we got that part done now let's go down here and create another const we're going to call this open ai and we're going to assign this to new opening object so new open ai api object wait uh open ai oh yeah i would suggest that you just let this puppy learn itself that this is a new expression you're going to use it in the future i'm going to pass in here our config so this config will be passed into our open ai api because basically this is our key this is your password this is everything that you need in order to connect to your application now again this key i said is a quick and dirty way you should always add it to a dot env file and access it that way so not through here okay so let's move on let's we have our const open ai we have open ai created here now let's set up our server basically i'm going to create another const app we're going to assign it to express let's initiate here express then we can use on our app now our use property and we're going to now use our body parser and from the body parser basically when we're going to get information as you saw in our finished application we want to get text information so for this we need to use json okay so when we're going to get information is going to be in the json format and then we're going to use on our app use and course as i said also initiated here course will then that will then provide the connect express middleware okay so this is set up all we need to do now is to create our endpoint so we're going to create our app this is where our front end is going to communicate with our backend and we're going to say post So the at app.post, we're going to have here forward slash chat. This is where we're going to create. We're going to connect to our backend. We're going to connect to this forward slash chat, meaning that we're going to have our address, our local host, and going to define the port just in a couple of seconds. But forward slash chat is where it's going to connect to.
Now, we're going to use here a synchronous function. As I said, request and response because to our response, request we can now add our body so we're going to write with an error function we're going to destructure here our prompt because we're all going to prompt problems spelling p o u and we're going to destructure this from request dot body now on completion we're going to create here another variable called completion we're going to await from the open ai dot you and this has a property called create completion and within here we're going to pass in a couple of properties that this completion has so key value pairs are first of all the model the model that we're going to use will be the da vinci so text dash the bin you can also check this out in the documentation of openai so we're going to use the davinci language model it's going to have a max tokens of 512 the temperature will be this is basically from the documentation so want to read more about it go ahead temperature will be zero the prompt as you saw up there will be assigned to the prompt and we're almost good to go we just need our response will be then a send we're going to send the data as completion dot data dot choices and we're going to select our very first choice because that is the string which is json i'm going to convert it to text okay so from that choice we're going to select the text okay so let's start up our server for this we're going to need a port i usually assign it to a port year of 2000 not 2000 8020 the 8020 principles 8020 and we can now use our app.listen to the port so the variable that I just created port and now we're going to create a callback function and pass in here our console log of in a string server running running on port and we're going to pass in here port with the variable of port okay So if the server will run successfully, I'm going to see down here a prompt of server is running. So let's start our server.
I'm going to go ahead and say node server.js. And I have an error here. Well, it seems that I do need to pass you into curly brackets. Now let's try this again.
So node server.js. Still up. Sorry about that. Now post port.
Okay. node server server dot js this is basically the file that okay and server is running on port 8020 perfect now let's take care of our front end we're going to leave the server running and we're going to go into our front end now i'm going to delete here a couple of things so you know what i'm going to leave them in there also the code is down in the description below and a very important part of the code will be cs the css part now you for those of you that have already taken my my react course the react project course 30 projects in react you should already have the entire css the part of the css that we are going to need are going to copy and paste it in here and i'm going to leave it as as always the entire code is on my blog and the link to that will be down in the description below so first things first i'm going to paste in here the css and i'm going to paste also from the index.js i did Make a couple of modifications. And boom.
So that's pretty much it for the CSS. Now let's go to our app.js. I'm going to delete everything that is in here. I'm going to create a new component. Let's create a new folder.
First of all, in source. Component. In components, we're going to create a chat GPT component.jsx.
Start with a capital letter. Okay, RFC. And we're going to bring in React here.
And we're also going to bring in our useState. So from React we're going to bring a new state and we're also going to import Axios from Axios. Now I'm going to destructure here, we're going to use state to destructure two things. First of all we're going to have a state for a prompt and a state for a response. So let's create a state for prompt and set prompt.
We're going to decide to use state and this will be empty, just an empty string. So the initial state will be an empty string. Now please remember when we are prompting this will be our prompt basically the input here we're prompting chat gpt we're sending information over to chat gpt and it should send it back so over to open ai actually using our api using our server now when we close this one up when we're sending this we're setting something we're setting a prompt and then we will need a response so i'm going to copy this and change this to response and also set response it's going to art there and this is what we're going to get back a response now let me close up the left part also drag this down to the bottom now let me also import this chat gpt into our app css close this up close this up and our app we're going to have here our chat gpt is going to be imported up there if it's not automatic whoops automatically imported for you then you need to just import chat gpt from components chat gpt and you should now see it in your application up here with chat gpt because basically this is the title that we added okay now down here i'm going to add to this a just going to go really quickly a bit of styling that is automatically added because of the css that you will have in there so let's add to this a class of container we should just add some automatic margins and alignments and also going to add a container and dash sm for a small container then the all-around padding of of one hit save you should see this move down to to the right a bit next i'm going to go a little space here create an h1 with a class of title and also a class of text center and then a class of text and dark green okay so this is basically just a couple of classes that i created now paste the chat gpd in there so we're just doing just a bit of ui ux design now comes the important part we're going to create our form this form will not have any kind of action but it's going to have a class with form in it and now comes the important part we're going to on submit this form we're going to handle the submit handle and now the application will break so let's create our handle submit okay we're going to move up here const handle submit we're going to assign it to an error function and we're also going to pass in here the event because the first thing that they need to do is dot event dot prevent the default behavior of submitting the form and now we're going to use axios so axios and first things first we're going to use our post request on it so when we're posting we're basically bringing information from the server now the server that we created on our localhost 2000 you can see here the server is running on our localhost 2080 so we need to add that server at that that entry point I'm going to add it up here as a const HTTP and get assign it to our HTTP columns for slash for slash localhost and 8020 and forward slash as I said chat is very important okay now i'm going to add this http down here in our post using back ticks dollar sign variable paste the http request in here and we're going to also add here the prompt basically this little state that we just created up there because it's sending here a post request okay so we're sending the post request to this address and the request that is sent will be the prompt after that then we're going to wait for a response and that response will have a set response as the state and that response will call upon the data now if you have an error then we want to catch it so we're going to do here catch and error and again error function and if we have an error then i want to console log that error okay so pretty simple axios request okay so where are we sending our our prompt now this prompt sending will happen in a form in a in a input text i'm going to create here a form dash group this is just for styling purposes form group and this form group we're going to have a label with with ask questions oops there we go there's our label and after that label we're going to have a input tag the input tag is going to have the type of text also you can delete it it's automatically text if you wish i was going to give this the class of shadow dash sm you and a place whoops what am i doing here and a placeholder of enter text or enter question whatever now the value of this will be our prompt our state up here so whatever we're going to pass in here as a value will be then added to the state and will be sent right here in our post request okay now in order to change the value of our input tag we're going to need a on change event listener here so on our on change we're going to handle prompt our handle prompt will be up here so whoops const handle prompt and we're going to assign this to a function we're going to take in the event and this is just going to set the prompt to whatever e dot target dot value is going to be passed in here okay pretty simple so let's just try this out okay we can type in there this means that this handle prompt is working and next we we will need some kind of display we're going to get our results so right after the form i'm going to create another div with a class of bg dark green and also a margin top of two and a padding of one padding one and border is a border radius of five so basically i'm just using my own css now this is going to include a paragraph tag with a class of text light and let's just hit enter for now not that good text there we go so text light there we go and within here well we're going to have our response so we're going to add here our response response but also going to create here a condition so if there is a response then going to just play that response but if there's no response because we don't have any kind of response at the moment then we're going to display here ask me anything anything boom there we go so we don't have a response it's going to ask us everything so let's try this out let's ask it some kind of questions uh how to subscribe to a youtube channel and let's see if this works there we go go to the youtube channel you want to subscribe to then click on subscribe button look at below the channels banner free if you you're not already signed up to youtube you'll be prompted to sign up so as you can see chat gpd is telling you to subscribe to my channel and also click that notification bell in order to get notified whenever i post new videos like this also if you want to support the channel i have great courses on web development javascript sas css html beginner courses advanced courses react courses please check them out support the channel and catch you on the flip side bye