Use OpenAI API With React (Beginner OpenAI API Tutorial)

what's going on guys it's Cooper codes and in this video we're going to be doing tweet sentiment analysis using the open AI API so we can paste in a tweet and you can press the button to get the Tweet sentiment from the openai API for example this is a positive tweet we can also do a negative tweet and get the Tweet sentiment where it's going to show us is more negative this video is a great introduction to working with the open AI API let's get started by going to an empty folder in Visual Studio code and saying npm create Veet at latest the name of our app so I'm going to say app then Dash Dash and then dash dash template and then react then you can press enter we can then CD into the app folder here which is this app that just got fully generated for us and we can npm install all the different packages let's get started by going over to the source folder going into app.jsx and now we can create a basic interface for our users to interact with so I'm going to go into this return statement and delete everything within this div so it should just be the div class name app then I'm going to make a div that's going to hold our text area this is going to be a text input that our user can put their tweet in we're going to have a placeholder that'll show paste your Tweet here and we'll give it a calls of 50. so 50 characters wide and then a rows of 10. so 10 character rows we can then make another div which we are going to put the button that's going to say get the Tweet sentiment from open AI API looks good to me let's npm run Dev and see what it looks like so far amazing so a pretty simple nice interface we want this value of the text area to be saved to a state so we can use it in our API request so we can change the state align 6 and make it say tweet and then set tweet and make it an empty string initially whenever our text area changes so on the on change event we can grab the event specifically from the on change we can then set the Tweet equal to the event dot Target since the events coming from the text area this text area will be the target so you can then get the value by saying dot value from that specific text area this button down here is eventually going to make an API call so we can make a function that gets called when this button gets pressed we can say function call open AI API and so when we say on click down here we want to then say call open AI API and for now we can just have a console.log in this function saying calling the open AI API so a pretty simple setup we can also make another state that's going to hold the value of the sentiment that we get returned from the API so we can say const sentiment and set sentiment is equal to a use state of a string so this is going to be either negative or positive like we saw before and so if we want to show this sentiment to our user we can go down here and say if sentiment does not equal an empty string then we want to show its value so we can do a little H3 and say this tweet is and then the value of the sentiment and because we use this question mark that's kind of like saying if this statement is true show this then we can say the colon here to say else show this I'm just going to show null which means show nothing and react amazing so we can also console.log the tweet and so let's run over to our react application and see these logs happening in real time you'll see if I type anything it's going to be saved to that state which is then getting logged and if I press this button it's then going to call the open AI API but we're not really calling anything yet let's get set up with open AI we can get started by going to openai.com API and then pressing log in log in with whatever account type you want once you're fully logged in you'll be brought to a page like this one of the first things we have to do is go to the top right and press the view API Keys as you guys will see on my account I already have a handful of keys but you guys will just see an empty list here press the button that says create new secret key this key will only ever be shown once so you want to make sure to copy it right now and paste it over in your react application so I'm going to say const API underscore key is equal to this I'm saving this as a variable to keep things simple but to make it more secure you can save this as an environment variable as well but now we have the API key and we're good to go let's go back over to the examples page so go to the top here and press examples this will show you all the different pre-trained models open AI has to offer I'm going to be using the Tweet model here specifically this Advanced tweet classifier but this tutorial should help you with any of these models As Long as You Follow the steps I show you so you can press Advanced tweet classifier and you'll see all the different settings for this specific configuration that allows us to get the sentiment of certain tweets by talking specifically to the text of nc3 engine the important part of this is this API request right here we can take a look at this curl request specifically because curl is kind of like the pure HTTP request we can take this curl request and translate it over into a fetch request which we can use in react so I'm going to copy this link at the top of the curl request go over to our react application and I'm going to say fetch that link specifically and because we're talking to an API I'm going to make this an async function and we are going to await the fetch alongside just the link we want to talk to we have to give a bunch of different options as to how we want to talk to this specific request for example we have to say method is equal go to post because curl by default is doing a post method we can also see these two things with the dash H tag this means they are headers so we can copy these over and I'm just going to paste them in right here to show us examples we can then set the headers of our requests inside of the fetch here to be equal to first of all content Dash type because I'm looking at this header right here is equal to application slash Json then we can set the authorization header equal to Bearer plus API underscore key which is that const that we have above and so then this Dash D is the data of the request or in our case the body of the request so I'm going to copy this data object and then bring it over into our code so I'm going to say const API body is equal to that object from the curl request the one thing we want to change is the prompt this is the default prompt they're going to give you in the request but you can change this to anything you want the easiest way of thinking about prompts is it's kind of like talking to chat gbt if you've ever done that so we can ask this prompt specifically what is the sentiment of this tweet question mark and then we can add the tweet that the user entered in this text area down here in this video I'm not going to go in depth as to what all these different kind of parameters mean down here but they pretty much allow you to make the model specific to how you want to use it the most easy one to explain is Max underscore tokens some questions take more you know brain power from a computer than others if you ask a really complicated question it's likely to cost more tokens if you ask a really simple question it's not going to cost as much and so max tokens helps it so you don't make an API request it's going to be very very expensive and so to put the API body inside the actual body of our request down here we can do a comma and say body is equal to Json dot stringify API body and this json.stringify is just turning this object into a string format that can then be sent alongside our request and so that's all we need to do for the request when the fetch statement is done we can say dot then then the data that has been returned like this we can then run some Logic on this data and I'm going to say return data dot Json so it's getting the data from our request and then translating it into a Json format that we can use we can then do another dot then statement which is going to just take in data and even though we use data twice here just to not confuse you guys what this data is saying is saying take whatever this return statement is and save it into this variable and so now that we know that this data right here is a Json we can then console.log data to show that Json object let's go back into our application and see this console.log in real time so I'm going to make a very positive tweet here I'll say Cooper codes has epic react tutorials then we can get the Tweet sentiment by pressing this button here and as you'll see we're going to get that complete response from our API which is great news the response is going to be saved under this choices property and for this example we're only ever going to be sending in one tweet at a time this choices array allows you to have like five tweets at a time if you want but for us we just want to look at the first tweet and you'll see inside of the first thing of this array is a text that shows us the response from the AI and it's showing positive and so we can get this text here and show it to our user to think about how you get this text is you can look at this object is called Data inside of our code so we can say data dot choices which is an array go to the first index of choices so the zero index and then go to the dot text property so like I just said data dot choices the first index dot text is how we get there you'll see there are some weird new lines inside there and so to get rid of those new lines I'm going to say dot trim which is going to get rid of anything in the front and the end of our text we can then set the sentiment State here to this value this means that we are going to show this string which is either going to be positive or negative and because we already have everything wired up check this out we can go down here in this sentiment so if this value ever gets changed is going to be shown to our user so after this set sentiment gets ran we should expect to see that sentiment be shown to our user right here so I'll make a positive tweet like Cooper codes viewers are the best yeah I know I know and look this tweet is positive and this is amazing because it's using the open AI API in real time we're getting responses right away we can also do negative tweets like Cooper codes sucks at react and it's going to say this tweet is negative and so the AI is kind of making decisions there I do have one more cool thing to show you guys though if we scroll up to the top here and go to our API body we can look at this prompt again just like cha GPT we can really ask The DaVinci gpt3 here whatever we want for example we can add on to this Quest question like let's say what is this sentiment of this tweet with a value between 0 and 10. 10 being it's very positive and so we can actually ask for more you know detailed information the caveat here is this prompt is probably going to be a little bit more expensive it's going to use more tokens so if we go back over to our application and say something in the middle like Cooper codes is an okay developer right if you can get the Tweet sentiment and it's going to show us right in the middle the suite is a five so it's not super negative it's not really super positive either and we can do something super positive like you know Cooper codes is crazy good at react he is probably the best in the world I don't know if that's true but I'm just trying to get something crazy because maybe we'll get a 10 out of 10 here that gave us a 9 out of 10. and so these sentiments are kind of defined by the AI models we use and we can also say something negative like Cooper codes is a mega Noob at react that's kind of funny so I don't know what it's going to say to that but let's check it out oh okay so calling me a mega Noob is a two out of ten it's pretty negative statement and so this is just showing you guys the kind of cool things you can do with the open AI API hopefully this video was helpful if you guys are interested in more full stack projects that also incorporate the open AI API alongside you know just like more normal stuff like mongodb or Apollo server or Super Bass feel free to subscribe and check out the videos on my channel another amazing thing about this API is how much it costs it really doesn't cost that much I messed with this API a lot before even creating this video and it was all done on this account it only cost me two cents which is like almost nothing for what it's providing if you guys just did the calls that I did in this video alone it probably wouldn't even be like half of one cent like it seriously isn't that much in terms of how much value you're getting and I bring that up not because it's cool to do your own personal projects but but it's getting to the point where with AI you can really start to introduce like AI features if you have like a software as a service application and these AI features can be valuable to your users and they won't cost you like a million dollars to implement and so I definitely think platforms like open AI are the future of adding really cool functionality to your applications alright guys thanks so much for watching

Channel: Cooper Codes

Views: 2,984

Keywords: OpenAI, OpenAIAPI, OpenAI Tutorial, OpenAI API Tutorial, OpenAI Beginner Tutorial, OpenAI React, OpenAI React Tutorial, OpenAI React Tutorial Beginner, React Tutorial, OpenAI API Call, OpenAI API With React, OpenAI API With React.js, React.js OpenAI, Reactjs OpenAI, OpenAI API Beginner Tutorial, Beginner Tutorial OpenAI, OpenAI API Setup, OpenAI API Setup React, React OpenAI API Setup, React Tutorial OpenAI, Reactjs Tutorial OpenAI, React Tutorial OpenAI Beginner, reactjs

Id: _tYuhnlw7OU

Length: 12min 55sec (775 seconds)

Published: Thu Feb 02 2023