Full-Stack Project | ChatGPT API, React, Node.js, Express

good morning everyone how is it going today so good to see you in this week's new video tutorial in which we're going to be building an amazing um full stack AP application okay that uses the openai API we're going to be doing it step by step it's going to be very easy so stick to the answer that you can have this beautiful application in your portfolio and you can show it to Future employers okay I promise it's easier than how it looks um we're going to be building the full stack thing from scratch and the front end is built in react.js and the back end is built in node.js with Express okay and what the application does is it basically takes an input in English in natural language English and it converts it into a SQL or SQL query depending on what you described and basically this generation is done using artificial intelligence that comes from the openai API um we're going to be using I mean I'm going to be showing you how to use two of the open AI apis the previous one which we would normally use which is text completion and the new one which is the cha GPT API and I'm going to show you I'm pretty much explain why you should use the trgpt API instead whenever it's whenever it's possible for you um so yeah let me just show you real quick how this application works um so basically you're going to write something in English right here select all elements from the table uses let's make it a little bit more complicated so that you can see its power um let's see select the first 50. the first 50 elements from the table users whose um that have the column let's say where double users where the value of the column um last name is Smith and they're um there you go let's go like that if we click on generate query this is going to use artificial intelligence to generate our SQL query select everything from users where last name equals Smith limit 50. um so yeah I mean pretty useful pretty beautiful and it's actually very easy to do so stick to the end and and yeah I hope you enjoyed this video um there you go [Music] thank you all right so the thing to do now is we're going to want to set up our project okay as you can see right here I have created a new folder called open AI SQL and inside of it we're going to have to put two folders we're going to put the server and the client the client is going to be the react application and the server is going to be the node.js application um usually you would want them in separate in separate in separate folders I mean in separate repositories but since this is a very small project we're gonna put them both in the same place okay so right now what we're going to want to do is we're going to do um first let me check what version of node I'm using um there you go so it's version 18 I'm going to go with node I'm going to go with node version 18. um there you go and now I'm using node version 18. and inside of here what I'm going to do is do npm create vid at latest in case you don't know what this is this is basically the same thing as create react app but it's way faster and way more minimalist so um I mean I would recommend that you use this one instead of create react app every single time so for the project name we're going to call it client because remember that we want our folder right here to be called client I'm going to say that I'm going to be using react vanilla JavaScript and there you go now we have our client folder right here and as you can see we have all of the all of the project files inside now let's go inside of it and let's see the first thing that you're going to want to do is npm install the dependencies for this react folder I mean yes react application it's probably going to take a little bit of time depending on your on your internet and there you go so now that you have all of that you have npm installed we can do npm run Dev and there you have it now your Veet application is running and as you can see it's reactive there you go and good all right um now a good thing that you might want to do is basically start a git repository um you would want to do that from here up here from the parent like from the main repository and not inside the client or the server because I mean ideally your GitHub your git repository for this project we are going to try to Encompass both of both of the applications both front end and backend so I'm just going to do get init and there you go we just initialize the git Repository add everything and then just do our first comment there you go now we have it all and there you go now it's time to create our main component there we go so now it is time to start building the main component of our application okay as I mentioned before we're going to be doing this on react okay now let me just give you a very quick tour of what is going on here I'm going just going to move myself all the way there and all right so just to show you real quick this what we have right here is basically what we have in this template right here in app.jsx just as any other application Builder like create react app vit also has its own template and this is this is the one um what we're going to do is we're just going to remove the template so that we can build our application instead okay so instead of all of this in app.jsx we're going to erase it and just to show you let's add an H1 saying hello world if we save we have our text hello world on this side but also um we're having the CSS styles that are being applied to it so I'm just going to get rid of those there you go if I save again I still have some CSS Styles and they might be coming from main.jsx there you go so let's just remove them from here and we will also not need either this or this one so I'm just going to delete them and there you go there you go now our application looks extremely clean as it's supposed to be now something that we're going to want to do is we're going to open AI Quick Start and actually this application that we're building right now is some sort of a some sort of a um is some sort of a spin-off of this other tutorial that openai published themselves but they themselves they use next.js I'm just going to be using simple Express for a rest API um so I mean it's a little bit different but I am using the in their same CSS style sheet just to make it a little bit faster in the development so you can download that from here I'll paste the link in the description so that you can download this I'm just going to click on row and copy it all and right here in my source file I'm going to say index dot module.css right here I'm just going to paste the CSS from their tutorial this is only the CSS okay just so that we can start building our component faster there we go so um the first thing that we're going to want to do right now is let's just get rid of this right here and we're going to import our styles from from the file that we just imported which is in the same directory and it's called index dot module .css like that there you go and now we're going we can start actually building our things so we're going to wrap it all inside a main element and we're going to give it a class name of Styles dot Main in case you don't know what is going on right here the styles.main actually comes from our Styles which has been imported from index module CSS which is right here which basically gives gives it a class of main okay all right so now we're with our main component and the first thing we're going to want to do is to add a little image of if you remember the demo that I showed you before there was an image of um a SQL Server so I'm going to search for it in flat icon which is a very very convenient place to find Icons free icons and I already downloaded it it's right here so what I'm going to do is I'm just going to copy it from here to my assets folder and I'm just going to rename it to SQL logo dot PNG there you go now inside my app I can basically import it import SQL logo from and then where uh where are we inside assets and then the name of the file which is SQL logo dot PNG so now we can actually use it inside an image stack and in the source we're basically just going to say that it is the SQL SQL logo oh what's going on Logo like that there you go and we're going to add um a class name as well and the class name for this one is going to be styles again from our module CSS dot icon there you go so now there is our our very nice icon um second of all we're going to want a little title right here saying that this is our SQL generator app uh we're gonna wrap it in H3 and we're going to say generate SQL with AI there you go it's looking good and now we're going to have to add the main part of our application which is the actual input in which the user is going to input the description of their SQL query so that we can generate it with our open AI API and this is going to be inside a form element like that I'm not going to add any action right here and the form element is going to have an input element that's going to be a text element like that there you go and it's going to have a name it's going to be the name is going to be oops um query description like that it's going to have a place placeholder as well and the placeholder is going to be pretty much just describe your query there you go starting to look pretty good um there you go and let's let's just add another button right here which is going to be another input element of type submit there you go and the value which is going to be the name I mean the text that is going to be on the button like if we leave it like that we're going to have an empty um I mean it won't it won't read anything right here so in the value we're just going to say describe your oh sorry no the value is going to be generate your generate query like that there you go so now we have a button and it's a submit Button as you can see it's submitting this to our um to our current file but that's not what we want to do we're going to handle that a little bit later but for now I mean the component seems to be looking alright and we have our input element right here which actually takes some our input but if you remember correctly actually for react applications you're going to want to make your input elements I mean your input elements um you want to track their state and their value in the state okay so basically the way to do this is to import we're going to import use state use state from react and then we're just going to create the state for this the value of this input now the value of this input is going to be the user prompt I mean what the user is going to prompt our Ai and we're going to call it like that we can call it um actually we can call it query description query description because this is the query description that the user is going to set and then we're just going to say set querying description right here and we're going to set the state to nothing at the beginning like that there you go and then just to track the state right here we're going to say that on change we're going to want to sorry we're going to want to update the state okay so on change we're going to execute this Anonymous function that basically sets the state oops set state so set not set State set query description [Music] there you go and we're going to set it to the current here it takes the event so it's going to take the current event without Target if I'm not mistaken dot value and there you go um I suppose this should be alright right now let's refresh and yep seems to be good all right so that's been how to handle this thing right here how to handle our input all right next in just a moment we will see how we'll just create our submit function okay there we go so now we have our very beautiful um component right here super simple I mean of course I'm zooming in because this is supposed to be a little bit smaller but just to make it easier for you to see in the screen um what we're going to want to do right now is to actually do something on submit okay we still haven't built our backend as you can see we're still working we're still working in our client folder our server folder is still empty but what we want to do right now is we're just going to create a submit function and we're going to just get it ready so that when we have our backend API ready we can just plug it in and get it working okay so for that we're going to add an attribute right here that is going to say on submit and it basically tells react what to do when the form is submitted okay because for now when we click on submit it actually submits and reloads the page and that's not what we want to do in a single page application so in here we're going to say that we're going to unsubmit we're going to trigger another function which is going to be answer we're going to call it on submit as well now let's just create it up here click on submit is going to be equal to now let's just say we're passing an event as well and first of all we're going to do first of all we're going to do e dot prevent default there you go and second of all we're just going to console log and we're going to say form submitted form submitted Double T no just want to there you go and right here we're just going to say what was submitted and once we have our back and ready we're going to submit the query description okay so since we have our query description that we set on change right here we're going to say that this is the one that we're going to be submitting so let's just concatenated right here now let's see how it works now if we basically let me just go to the origin of this there you go let's say that we want to select all elements from a table called users and we click on generate query so far as you can see in our console the I mean we are preventing the actual submit event and we are console logging form submitted query description so there you go now our react our react component seems to be ready and now we can actually go on to start structuring our backend which is where we are going to be dealing with the openai API all right so one last thing before we before we go to the back end we're probably going to want to add everything to our git to our git repository I just in case you don't know what this is It's called um set this age um I don't remember the name but it's a it's a beautiful extension for for setsh terminal I can leave a link in the description and it's super useful it adds a lot of aliases like this this basically just means get at all it's just an alias for that so now that I added everything I'm just going to commit I'm going to say um fit your client react component create react component there you go now we have our git that's being dragged and now we can start focusing on our API that is going to deal with the open air API there we go great there we go so now it's time to actually first before creating our server we're going to want to we're going to want to get our node.js our openai API sorry to do that we're going to want to go to the dashboard from openai you can go to platform.openai.com and then if you don't still if you don't have an account yet you're going to want to create an account once you create a developer account you're gonna get a certain amount of free credits for your API I mean to test the apis and that's more I think you get 18 or something like that so that's definitely more than enough to run all the tests you want and once you you I mean but that expires I think in within a month or something like that so once that happens you're gonna have to to enter your credit card to actually use the API okay um so once you have signed up you're gonna come right here to your user account you're going to see your apis and you're gonna create and create new secret key and you're going to copy it um I can leave you pause the video and copy this one and take advantage of my credit card um I'm just kidding that's going to be I'm going to delete that API key in a few seconds but the idea right here is that you're going to have your API and you're going to paste it somewhere right here um you're going to create a DOT EnV file and right here you're just going to say open AI API equals and then your key all right and then you save it now what did we do here basically this dot EnV file is what we're going to be adding to is the file that includes all of our secret information about our application in case you don't if you in case you haven't worked with these kind of files before and then we're going to basically just duplicate it and call it dot env.example the difference is that this one right here is not going to be tracked by GitHub so this information is going not going to be in your GitHub account but this one right here is so from here you can delete all the sensitive information and then the user that downloads your GitHub repository will be able to just um to just fill in the the variables that you need and these are the variables that we're going to be importing from from our server to make the actual API calls okay there you go all right so now that we are inside of here of the server we're going to we're going to start an nnpm project so to do that we're going to go inside the server and we're going to do npm init and of course the name of the package server just leave it as is there you go yes so there you go now you have your package.json and now to continue the setup what we're going to do is we're going to npm install openai and Dot N dot end is basically the library that is going to allow us to use this secret information inside of our development environment um so there you go now install that oops I think the 10 was actually supposed to be um that's right um all right so now that we have our API key inside of here you have our Dante dot end our DOT Dev example um you're going to want to create a git ignore file for this one because whenever you add your information your your files to your Git You don't want your Dot N file to be tracked so what we're going to do um let's just look for a git ignore for node there you go and basically what I usually do is just copy a standard git ignore from here and this is basically tail get to ignore node modules and also.env so there you go now.tnv is not tracked and tnv.example is so now we can add everything and we can git commit and say um setup setup API setup set the back so let's set the back end there you go now that's been the setup of our server now let's actually start building the server um Network I mean let's actually start building our node.js server okay there you go all right so now let's first of all actually now that we have things right here what we're going to want to do is we're going to want to create a new file called api.js in the root of our server project okay this is where we're going to make the API call to the open API open AI API sorry and we will also need to import the open AI SDK which is basically what we just installed using npm um let me show you how to do that so let's just create a new API dot Js right here and we're going to import configuration and we're also going to import openai API like that these are the packages that we need to actually make the API calls all right and we're also going to import the 10th hmm from the 10th which is basically the library that is going to allow us to use this information right here in dot end and basically let's just say dot NF dot config there you go now now this should be available to us and in order to do that we can just do const open open um open AI API key and we call I mean to access the information that is inside of this folder.env we can just do process dot EnV and then the name of our variable remember that our variable's name is openai API like this and now that value is actually stored in our in our constant right here and we didn't actually write it in our code so that way we are protecting the privacy of our API key and no one else knows it but they can see our code and now basically just test our API key so that it exists um in order to do that this is basically so that if for some reason the API key is not set in the server variables I mean this information would you would usually set it in the server configuration so if there is no API key what we're going to do is we're going to say that we're going to lock an error and we're going to say open AI key it's oops it's not set actually open AI API let's give it a better name let's say it's going to be key like that and here it's going to be key like that that's why it gives better information of what actually is the name of the what actually value the variable is holding so open AI API key is not set and then we're going to process oops oops process dot exit there you go that basically just closes the the back end if the opening EI key is not set and now we're going to have to set up the configuration for our openai client okay so let's do that now we're going to create a new variable con called configuration configuration like this and we're going to initialize a new a new a new instance of configuration that we imported right here from open Ai and inside of here we're basically going to pass in some arguments and then the main argument that we want to pass in is the API key and here we're going to pass in the API key that we just um that we just imported there you go now this seems to be going all right actually no because this is supposed to be a JavaScript object like that now it works okay because this is like a key value pair um object not just a single parameter there you go and now we can create our open AI object and let's say new open AI API now we can just pass in the configuration right here now this is going to be our openai object that we're going to use to actually make the calls later on okay now that you have created this we can basically just export it oops open AI there you go let me just explain you real quick what is going on right here basically we just did the configuration of our of our I mean the new the configuration that we're going to pass into our open AI client we created an instance of our openai client and we're exporting it this object right here we're going to import it in in our service in our API in order to actually make the call from there and you will see how this this makes everything a lot easier that way this is where we configure the API and then the requests we will do them in another file let me show you that in a moment but so far we can say that we have successfully configured the openai client in our server okay I'll show you how it works in a moment there we go so we have now our openai API configured already and we are now able to use it in whichever function we want and that is actually what we're going to do just in a moment but for now what we're going to want to do first is we're going to want to create our own API which is the one that will communicate with our front end okay let me show you here we have our front end that we previously built and using reactive course and the idea is that when you when you like submit anything right here it's not going to submit it to the openai API it's going to submit it to your own API and then you will call the open AI API inside of your server Okay so in order to do that we're going to have to create an index file that will receive your requests from your front end okay so let's do that now um we're gonna have to create right here and index.js file and I am pretty sure that I got it in the wrong part right here because it should be inside in inside of server okay remember that both server and client are each their own application even though we are tracking them in the same git for this small project but usually you would have them separate um so right here inside of index.js what you're going to want to do is create your application using Express I mean your backend application and in order to do that we're going to have to first install Express all right let me just move myself over here and just so don't forget remember that we are we are inside of the server directory and this is where we're going to be running um our npm install commands Okay let me just clear this so that we can do it together um because if I run this in client for example I would be installing my server dependencies in the client and then my server would not work so remember to CD into your server I mean I am already in so I'm not going to do it but um yeah there you go um so here what we're going to do is npm install or just npme for shorter it's the same thing and then we go to in uh we're going to install Express and course all right there you go I already have them installed because I Was preparing this tutorial but to you it might take a little bit longer and then we can actually start coding it right here we're going to do first of all we're going to do import Express not like that input Express from Express and then we're going to import course from course there you go um then we're going to have to actually create our application and to do that we're going to do const app equals Express like this there you go and and we are also going to we're going to also have to use our course package right here so in order to do that it's just like middleware you go app app.use course there you go and then here you could like if you were if you were like building the actual application for a production environment you would have to for example right here right yo your white list for the IP where you have your your front end but I don't think we need this for for our local environment so I'm just going to leave it like that and next we're going to have to create our variable where we're going to store our Port okay const [Music] port and this one is going to take either process.env.port [Music] this basically will call the environment variable in the server I mean just like this one but it's inside the server by default so if we were running this in a in a production server the port in which the server will be running the application will be stored in this variable right here by default so we will be calling that and if we're not in production then this value will return false and then we will run it in Port 3005. there you go and now that we have this configured we can actually start creating our endpoints and the endpoints are very simple to create in in Express basically you call your you say that your app is going to get this is going to create a get endpoint if I wanted to create a post and put I would just do post but I want to first of all just very simple get endpoint just to get this started and this right here is the route in which this endpoint will be triggered and then this one takes two parameters right here [Music] oops there you go request and response and then basically we're just going to say that as the response we're going to send hello world from our from our API there you go and then last but not least we're going to set it to listen in the port that we wanted to listen to okay so listen [Music] and we're going to say that we're going to listen in our report that we declared up here and this one right here will just take callback function in which we're going to basically just say that we're listening listening on Port we're just going to add right here the port in which we're listening there we go I suppose this should work right now let's see um if I am not mistaken I had already added this one right here but I'm not sure that you will have it um so basically in order to run your your application I mean your your backend you're gonna have to come right here to your server and you're going to have to do node index.js okay and this is going to tell you that you're listening on Port 305 because this is the Callback function that you wrote that you added right here and basically it means that if you go to localhost local localhost and if we go to three oh [Music] three double O five we're gonna have Hello World from our API because the browser makes by default a get request and since we default we set this one to a get request at the default route um where this is just what we're getting and there you go I mean the index file seems to be working correctly everything seems to be going red now what we're going to have to do is to call this and oh you know what first of all I'm just going to add something real quick right here just to make it a little bit more standardized it's basically what I just deleted just a moment ago if you do if you add the script start and you write right here node index.js basically every time you run npm start you're going to this is going to run node index.js automatically and this is just another way to make it more standardized and so that pretty much everyone understands that when you do node start sorry when you do npm start that basically means that your application is starting so there you go um this did exactly the same thing as before so now let's actually create our function that will generate our SQL and then we will we will plug it in to our index.js okay so let's do that there you go so now let's create our generate.js file in which we will create this and we will create this function that will generate the SQL depending on the query description that we send it okay so in order to do that what we're going to want to do um you know what first of all I'm just going to commit this [Music] there we go and now basically what we're going to want to do is we're going to create a file right here called generate .js and again I put it accidentally outside of server just moving it inside of here there you go and then inside of here we're going to generate our SQL and in order to do that we're going to be using the API server that we configured right here okay so remember that we are exporting exporting this element right here called open AI and we're going to import it right here so that's the first thing we're going to do I'm going to call it open AI client like that from [Music] api.js like that and then right here I'm going to do I'm going to create my function that is going to be called generate generate and it's going to take my query description and it's going to it's going to make a request to my to the open AI API in order to generate this open this SQL code from my query description okay so let's do that right now um I'm going to create my response and I'm going to call my open AI client there you go now something important right here is that since we're going to be using this openai client that we have right here and remember this right here is going to be calling the remote API from open AI so we're going to have to make this an asynchronous code an asynchronous function and this one we're going to have to await for this function to do its work so here we're going to be calling this this method called create completion there you go and this method takes several parameters the first one we're going to do is we're going to mention the model that we want to be running on and that is very up um open AI the models right so this is pretty pretty interesting because you're going to have to choose the model that you're going to be using for generating your your SQL code and here are very different models that you can use um the regular one I mean the first one that I'm going to be showing you is the text completion one which is this one right here um you can try it on the playground on the open AI playground that is um an AI playground that is right here text completion how did this still have it open yeah there you go playground there you go so I mean basically here you have the model that you can choose Etc right now DaVinci zero zero three is the most expensive one and it's even more expensive than the chat GPT API but I figure that it's useful that you know how to use it because maybe you will you will find it sometime in the wild or something okay so basically this is the one that we're going to be using first it is this one right here text DaVinci zero zero three and basically here we just write DaVinci zero zero three and this one takes a prompt okay and the prompt is going to be in our case convert [Music] the following natural language description into a SQL query and right here we're going to add our query description okay it's going to add a couple of empty lines right here oops not like that there you go a couple of empty lines Lines line jumps line break sorry and then my query description right here and something important very important that you're gonna have to do this we are going to have to add a DOT right here okay that is super important because otherwise your your text completion model will not really understand it I'm not going to add it just now just to show you what are the errors that you may encounter if you don't add a DOT right there I'm in year period and then you're gonna set a maximum number of tokens that you want for this request and I'm just going to set it to 100 that should be absolutely more than enough for a complex SQL query and the temperature this is another setting that you're gonna get um this is another setting that you're gonna get um for your models and you can get it from Z it goes from zero to ten basically 0 means zero creativity and 10 means complete like very high creativity and this translates to when you set zero it should return exactly the same thing for every every time you send the exact same prompt okay so if I set it to zero technically this same prompt should return the same exactly the same um the same completion every single time if I set it to 10 that is more useful for more creative tasks something like generate brand names or generate um pet names or generate I don't know maybe some code refactoring would be somewhere in around five or something like that you're gonna have to run your tests probably in the playground to actually know which level you want which temperature you want for a sequel and for SQL query you're probably going to leave it at zero and then in the end you're basically just going to return whatever the response gave you and and how this model works is that it returns it inside of um an object called data and then it Returns the choices that you have and we're basically every single time going to choose the first the first choice of the array because choices is an array and then you're just going to select the text of that choice right and there you go and here we're basically just going to be exporting this this function as default there you go there you have it now our function generate is ready and now we are ready to import it in our index.js remember that we forgot that we are intentionally leaving out the period in the end of year I'll show you how how that makes our code makes our response um wrong in a moment but let's just save this for now and let's go for let's go for let's go to integrate this into an endpoint in our index.js all right what we're going to do right now is basically we're going to click on the Subscribe button and on the Bell icon so that you get notifications because if you're if you have made it this far in the video that means that you are enjoying it and that you are learning a lot so in order to be able to enjoy and learn from future videos that would be amazing and also leave a like in this video if you're liking it it really helps a lot to me it's free for you and I would really appreciate it um all right so back to this um we're going to create this new route and we're going to add it on a post um to handle post requests okay and we're going to add it in the generate path generate route okay this one as usual takes a request and a response parameter and then it takes a callback function just as our get endpoint right here and this one right here let me just um Explain real quick what is happening be here um what is going to happen with this one basically as you remember we have our front end and we're going to write a SQL description right here something like select all elements from the table users Etc and when we click on submit we're going to be receiving it we're going to be sending it to our API which is this one and we're going to be sending it to this endpoint right here which is going to return the generated SQL query okay but first of all we're just going to test it to make sure that our endpoint is working correctly and let's do that right now so for now what we're going to do is we're going to say that we want our we're going to extract the query description from the body of the request okay so we have the request we're going to access the body of the request and inside the body we're going to have send from our front end an object um called query description okay this is something that the user is going to set up I mean that we're going to set up in the front and a little bit later and just for now just to make sure that we are actually accessing the information correctly what we're going to do is we're going to console log it on the back end of course because here we're on the back end and we're going to say received description [Music] and we're going to add the query description right here okay and then we're also going to send some oops it's res dot Json not let's just send because we're going to return some Json and we're going to send a Json object right here and it's going to say a response is [Music] going to be you sent this and then just add his own I mean the own query description that we sent before there you go now this is not going to work just yet okay why the reason is that we're accessing the body of the request but we haven't actually enabled our server to handle body body objects okay so let me just show you how this looks right now the first thing I'm going to do to show you this is I'm going to open this thunder client which is an extension for vs code if you haven't used it before if you're familiar with Postman for example which is a great tool for testing apis it just lets you send HTTP requests to to whichever destination you want and to get the response it's very minimalist very easy to use and it's inside of vs code um so it's an alternative to postman basically and right here you basically just send the request that you're going to to send I'm going to send it to my local host and I have to specify the port and I'm listening on Port 3005. now I did make some changes which means that I have to restart my server I'm just going to move myself to the right right here and then right here I am sending a get request to the origin of my of my of my server so if I click on send um all right so localhost htti edit three T's there you go so if I send a regular get request to the origin of my Local Host I get Hello World from our API and that is exactly because I am sending a get request to the origin of my server and then I set it up to return hello world from our API now what we're going to do is we're going to send a post request to generate okay and so to do that we're going to add a route generate and we're going to change this to post and inside the body of the request we're going to send a Json a Json object okay and right here remember that we said that we were going to be accessing a property inside the body that is called query description so I'm just going to add it right here I'm going to say show all elements of the table users for example now if I if I click on send I'm going to have an error why the problem is that right here in my index.js I have I mean everything seems to be set up correctly but the problem is that I haven't specified Express that I'm going to be using a body object inside my request usually you would do this with body parser which is a package for node.js but now in the latest version it comes right off the box so you don't have to install body parser to use this so basically in order to enable it all you're going to have to do is go to app Dot use then you're going to say Express dot Json and there you go now you should be able to parse body parse Json inside the body of our request okay so I'm going to restart my server and let's go right here and let's send again this request remember here we have the console of our server so now if I click on send I get a response because remember this is the object I am sending back response you send this and I'm just sending back the query you send this show all elements of the table users and right here receive description and this is exactly what we are console logging right here so it all seems to be working correctly now it is time to actually generate a SQL SQL query based on this description okay so let's do that now um what we're going to do I'm just going to check take this out and we don't need this part anymore what we're going to do is we're going to try or also because we're since we're going to be using the generate function that we created up here and this one is an async function we're going to have to turn this func this endpoint I mean the callback function from this endpoint into an asynchronous function as well so we're going to be trying something here and then we're going to be catching um oops catching it catching any errors right here console um we're going to console error we're going to cancel error the error and then we're going to respond with a status of 500 this is just some error handling um you would probably want to do this I mean to set this more carefully in your own projects but since this is just for the demonstration purposes I'm just going to do this real quick basically everything is going to return a 500 code um so internal server error let's say let's say there you go and now let's add a now let's actually generate MySQL Query in order to do that I'm going to have to import this generate function that I created up here which is actually making the entire request to the open AI API and to do that let's just import generate from generate there you go I'm just going to put it up here there you go and inside of here I'm going to say that my SQL query is going to be I'm going to await for my function generate to generate the query from my query description there you go and basically after that I'm just going to respond with a Json and saying that my response is going to be my SQL query and that should be all now actually my if everything is working correctly my generate endpoint is supposed to be a returning I generated SQL query that actually comes from this function generate which calls the open AI API so let's test it again right here of course since I modified my files I may want to um what's going on having a problem here um [Music] there seems to be small error going on right here what is it you cannot find module generate um I suppose I have to add the drive oops not like that like this there you go now it should be working there you go now I'm listening on Port 3005. now let's test it again right I'm once again I'm sending this to generate and I'm adding this Square description show all elements of the table users if I click on send I'm getting back select all from table users now your API is working correctly one thing though that I want you to to keep in mind is that um it's important to add the point I mean the period at the end right here because let's suppose that you're sending several requests and this model kind of tries to complete your text with its own I mean text completion artificial intelligence and sometimes it will if you don't add a period it might try to come to finish your own sentence right so for example let's say that I'm I want to do show all elements of the table users where the status column equals um I don't know from yeah where the H column is column value is greater than 18 for example and if I click on send then I'm going to get select all users from where H is more than 18. I mean I'm not sure if it's going to happen this time but sometimes when you have sent something like that and then you try to resend the Regular Show all them something something shorter it's kind of trying to complete it right so if you go sandal right here all right it didn't happen this time but sometimes he may I mean this is an AI model and it may want to complete your own prompt um because it's a text completion after all so if you send something like this without a period in it may reply with something like show all elements from the table users and then the response would be something like where the H is more than 18 and then um return the the actual SQL query which is not what you want so basically it's always a good idea to add a period right here and there you go now our endpoint is working correctly it Returns what we wanted to return and we can test it right here and it's working perfectly and now it is time to connect it to our front end and to display the new generated SQL query in the front end so let's do it now all right so now what we're going to want to do is we're going to want to make a request from our front end and we're going to be sending it to our endpoint right here and to do that we're going to go back to our object.jsx in the client folder of course and inside of here you know what I'm going to do I'm just going to close all the other all the other tabs and right here remember that we already have this function called unsubmit right and so far all everything that we were doing was logging console logging the query description that the user had sent but what we want to do right now is to actually send it to our endpoint in our API and in order to do that what we're going to do first is we're going to create a new function that is going to generate the query based on the current query description in our state okay so let's do that we're going to say that the function name is generate query like that and of course this one right here um sorry there you go and of course this one right here is going to be an asynchronous function because it's going to be calling our API and let's just add some add the request right here um let's say that the response is going to be equal to weight because we're going to fetch this from our API and I I don't really uh use axis a lot when I whenever I can I just use fetch but if you want you can use axios and right here we're going to say that we want to make a request to our Local Host and the port which was the port of our server um Port is 3005. 305 right here and we're going to be sending it to generate right and remember that this one right here is going to return um is going to return an object containing the the generated query so we're going to fetch to this the design point right here and then the second parameter that it takes is the actual options uh it takes the first one which is a math the method and the method of our request remember that we are dealing with a post request so there you go then we're going to add some headers and the headers are basically we're going we're here to just to tell it that we're going to be sending a Json object so in order to do that you use file complete this content type okay and it is application Json I hope there are no typers right here application Json content type seems to be alright and then we're going to actually send the body of the request which is exactly what we were doing in our Thunder client and the body is going to be a Json object and we could just send the query description like that but this would this would not send a Json object and we want to send a Json object because remember that the way that we structured our backend is so that it can um deal with Json objects so in order to convert our query into a Json object we're going to say Json stringify [Music] there you go so it converts my JavaScript object into a Json object and I'm going to stringify this object right here and remember that we need an object called query description inside my a property called query description inside my Json my Json object and just as we saw in my thunder request before this one right here remember we're sending query description and the value of it is going to be the current query description which is in the state of my component I'm just going to send query description like that there you go um and now what I'm going to do is I'm going to say that my date equals to a weight again it's my response dot Json to convert it into my to be able to modify it and then I'm going to return I'm going to return data Dot um I'm just going to return data for now let's do to actually see what is going on and then right here up here what I'm going to do is I'm going to say that the new um SQL query is going to be equal to generate query there you go and of course on submit has to be async as well because this one right here is a synchronous and then we're going to have to await for its um for its return value so now if we save it this thing right here is saved um you know what we're going to console log our SQL I mean returned from server and we returned SQL query right here now if we save we come back here we open the terminal and let's see what is going on right here just gonna zoom in there you go we're going to say select all users from the table users let's just make sure that my server is running it is not so I'm just going to do npm start there we go and now this if everything's working correctly it should send the request to my endpoint so let's see send and indeed it returned from the server response select all from users so basically what we're going to want to do right now is we're going to console log as you saw we want to tap into the object called response because that is the one that we're sending from our API and then instead of doing like this we're going to say um that instead of returning all the data we're going to return response [Music] and then this one right here notice that it includes two line breaks and we probably don't want it we just want a single line break I mean a single a single string so that we can actually put it whenever whatever we want so we're going to add a response Dot trim right here which basically gets rid of all of the of all of the the Extra Spaces and things in the in in the in the end or in the middle okay so this should basically just return our query and now if we return this like this and we console log this like this and we save this we should see something let's change a little bit let's see select the first 10 elements from the table users where the column H is greater than 18 let's see generate query and return from the server is now just a string that says select everything from users where age greater than 18 limit 10 which is the query that we needed and now it's actually just very very simple we just have to instead of console logging this adding it to the state in our component and basically just showing it on the bottom so let's do that right now we're going to do const we're going to say that the SQL query I suppose did we already use this one somewhere else didn't we SQL query yeah um oh yeah so [Music] um yeah I'm going to change this one to generate it query right here and right here I'm going to say that SQL query and set of course SQL query like that it's going to be equal to use State and I'm going to set it to an empty string as well for now okay and so now what we can do right here is instead of just console logging it like this we can actually set the not the query description but the set the SQL query to I mean of course remember that we're dealing with the state right here so we don't want to we don't want to just show it in the front end we want to actually make it part of our state um so that we can actually fetch it from that and so now we're going to set the SQL query to this generated query that we just got so there you go now our SQL query value should be um should be reactive so now we can actually just add it right here on the bottom and what we're going to do is basically I mean you could create a code block with with a custom react component or something like that I'm just going to add a pre element right here with the SQL query string right here so there you go now if everything works correctly if I make the make request this time and I click on generate query it should generate my query update the state with this new generated query and then since the state is being is reactive it's going to display it inside this free element on the bottom so let's see how it goes there you go so now you have a working um application that basically takes your code in plain English and displays it displays a SQL query based on the description that you gave it and it does so using the openai API works very good there you go so now for the fun part which is the actual update for this API we're going to be using I'm going to show you how to change a little bit one of the functions that we did in order to use the chat GPT API instead of the text completion API so let's do that right now so that you can save a lot of money when they'll make in your application there we go right so what we're going to be doing now is basically we're going to convert I mean update this generate function right here that currently uses the text DaVinci model which is the text the text completion API so that he uses the new chargpt API and why would you do that okay um if the text completion API seems to be relatively straightforward and easy to use the thing is that even open AI recommends that for every single I mean like most of the average uses of this API that you update to the chat GPT API why is that well the first thing is that it's way more way less expensive um the text completion API according to open AI is 10 times as expensive as the new charge GPT API and also the charge GPT API is a little bit more sophisticated in that it allows you to train it as though you were actually having a conversation just like with rgbt I'm going to show you right now how it works but first of all I'm gonna wrap what's going on here in and another function so that we don't lose this code that we already made okay so basically I'm going to say that I'm going to create a new function called DaVinci which is the name of the model that I'm that I was using here and it's of course an asynchronous function and it takes a query description and we're basically just going to put the same thing that we have right here inside of there we're going to say that we're going to return DaVinci and our query description like that and there you go now this should do exactly the same thing we just created a wrapper function so that we we will not be using this code right now but I'm going to leave it right here so that you can check it in the repository that I'm linking in the description um but now we're going to create a new function that actually calls the chatgpt API instead of this one just to make sure that this is still working I'm going to go back to my to my front end I'm going to restart my server of course my front end is working so let's restart this now let's just send something select all elements from a table called tasks [Music] select first [Music] 100 elements from a table called tasks and it seems to be working correctly all right so nothing has nothing is broken uh so what we're going to do right now is we're going to create this new function called now we're going to call it chat um chat GPT API and just as the previous one is going to be an asynchronous function it's also going to take the query description and we're going to do something similar to what we did up here but with the open AI sorry with the Chad GPT API and first of all what you want to do is you're going to want You're Gonna Want to create a conversation that is going to train the model before your new your new prompt okay and it's very simple it works like messages I'm just going to call it um messages and this is an array okay an array of objects like this that have a role and one of the rules is system [Music] and then it has the content of the message from the system right so let's say um so the system I mean this is the first prompt that you gave it you're going to describe to the model what it is supposed to be so let's say the model is supposed to be a translator from plain English to SQL so that's what I'm going to write right here um you are a translator from plain English to SQL there you go and now I'm going to add another message from a user so that it kind of understands what it should do whenever a user sends something okay so the user is going to send um something like we had just up here there you go and this allows us to give it examples a little bit uh easier I mean to actually tell it what it is supposed to to what it is supposed to do right so now I can say that the role the new role is of course the assistant and it is going to be and the content the the I mean the answer that I expect is the answer to this one right here so in order to train it I'm just going to give it an example instead of sending this I'm going to send I'm going to send um show all elements from the table users there you go and now I'm just training it right now remember so I'm just giving it the example so it's going to be select everything from users is that correct convert the following natural language description to an SQL query show all elements from the table users show all from users good and now what we want is the actual prompt that we're going to give it so now this is this was basically just to show the model what it is supposed to do and now we want to actually do it for us so now I'm going to actually send it [Music] um the prompt again we have the user we have the content and we have our prompt right here convert the following natural language description into a SQL query there you go and now I'm using a comma right here there you go so those are the messages that we're going to feed into our model so that it knows what it is supposed to do and the last one as you saw is the actual prompt that we want that we wanted to respond to and now all that we need to do is we need to do just as before we're going to create an object called an object called response and we're going to await from the same openai client that we created before and that we're importing from api.js and this one instead of calling this endpoint called create completion we're going to call the endpoint called create chat completion all right and inside of here just as before we're going to specify the model just at this time instead of it being the text to DaVinci text DaVinci model we're going to be using the GPT 3.5 turbo which is the model that runs on chargept currently um I mean once gpt4 is not unlimited beta beta better I can I will show you how to use this one but so far I'm still in the waiting list so I'm just going to be showing how to use this one but it should be pretty much the same thing um basically instead of adding this you're going to add GPT 3.5 Turbo or you can use any of this but I mean this is the the most recent one so let's use it and right here we're going to say that our model is that one and then [Music] we're going to say that our one second we're going to say that our messages are going to be these messages right here there you go and now we should be getting our response correctly so now what we're going to want to do is return from here the response which is this one right here that we're getting from the chatgpt API and just as before we're going to be getting data dot choices and then from the choices we're going to pick the first one and this time we're going to be choosing the message from that choice and we're going to be taking the content of it um there you go so I mean it's a little bit different from what you're getting up here so I mean the data is structured a little bit differently but in the end it's very similar so you have the data you have to access the choices and instead of just accessing the text you're going to have the message and the content of that message so let's save it and instead of using the DaVinci model we're going to be using the chargpt API model and that should be all I mean we should be actually returning the actual content um before we actually test it on the front-end application how about we test it in our API client right here I'm just going to restart my server there you go and we're going to do exactly the same thing as we did before we're going to say that the query description and instead of showing all elements of the table users I'm going to say show the first [Music] um 10 elements of the table users were the column H is great word the value of the column H is greater than 18. let's see how that looks now we're going to send it and there you go we're getting our response and our responses um being fed to us through the kgpt API in order to track your expenses because this is quite um I mean this is definitely less expensive than the text completion API but of course you don't want to live your credit card there just like to to just like to to explode your prices here you can see in in your chat with your open AI dashboard you can come here you see manage account and there you can see how much you have spent every single day since you logged in I mean since you loaded up your account currently I spent five cents which looks alright um what I have done very very few very few requests um and basically yeah the thing is that when you sign up you get 18 for free for you to experiment and to test which is very convenient and there you go now basically we have our application you know what I'm I don't think I have tested it from here so let's do that select the first 100 elements select the first 70 elements from a table tasks where this the column status equals completed generate query um there you go select all from tasks where status equals completed limit 70. I mean of course this is a very very basic application but I hope it has um taught you how to how to use the openai API how to use the chat GPT API in particular and how to create your own full stack application using both I mean using both of these apis using react of course and node.js for the backend so I hope you enjoyed this video I hope you learned a lot I hope you subscribe and I hope you liked the video If you enjoyed it and yeah I will see you in the next one thank you very much for watching [Music]

Channel: Alejandro AO - Software & Ai

Views: 11,183

Keywords: react tutorial, react, mern stack, react tutorial for beginners, react js, learn react, chatgpt, chatgpt api, chat gpt api js, chat gpt javascript, chat gpt api example, chatgpt api tutorial javascript, chatgpt api tutorial nodejs, openai api project, openai api js, openai api tutorial, node js tutorial, node js project, full stack project, full stack web development course, openai, full stack js, mern project, chatgpt api javascript, chatgpt api nodejs

Id: kjUSOa_KOts

Length: 88min 51sec (5331 seconds)

Published: Wed Apr 12 2023