🛑 Learn to use OpenAI API by building ChatGPT (super simple!) | React Node.js

hey everyone and welcome to this video in which we're going to learn how to use the open AI API or in other words the thing that powers chat GPT to build our own chat GPT clone and we're going to be doing this in react for the front end with a node.js packet so that's what we're going to be doing today the final product will look like this and it'll allow us to write text prompts and once we do that we'll start a new chart automatically and then we can carry on having a chat with the AI now if we want to create a new chat all we do is click on the button and that will generate a new chart for us and automatically that path size product will be saved in the history and the best part about it is that we can go back to the previous chat and add to again go to the next one add to that and that will be tracked accordingly and of course we can create new chats as well so that is a cool feature that I'm going to show you how to do and we're going to be saving that to six of course we will also be keeping our API Keys safe and we're going to try do it with not using all our free tokens okay so I am super excited about this what are we waiting for let's get to it okay so first off I'm just going to create a new project I'm using webstorms so all I have to do is click here and I can select react and then I can call this whatever I want so I'm going to call this react chat GPT clone okay and that will get made in my webstorm projects and it's going to use this command so npx and then the string create react up as one so that is separated by a space here and I'm just going to click create now for those of you who aren't using webstorm or you would do is use your terminal so here is my terminal I'm just going to make it bigger and then you can gravitate wherever you want so I'm going to go into webstorm projects and then you would use npx create react and then whatever you want to call your project so react chat GPT clone and hit enter okay so that is what you would do of course I'm not going to do it this way because I'm using web services done all that for me so this is essentially spinning up all the files and configuration that I need for this project so we're just going to wait for that to do its thing so when that is ready it should say happy hacking and there we go happy hacking and I will see all the folders and correct files are already in there for me so let's just clean this up a little bit we're not going to write any tests so I'm just going to delete these two I'm gonna delete that we also don't need a logo so let's go ahead and delete the logo I'm also going to delete the app test file because we're not writing any tests as well as the CSS file because I'm just going to put on my CSS in one file because it's a small project so that's it so at the moment you should just have these three files in the source directory the app.js file looks like this and I'm just gonna delete everything in here so that we can start fresh that is what it should look like I'm also going to change this to a functional and expression just because that is my preference and we don't need these two inputs so this is what your app.js file should look like your CSS file should just be empty so we can start fresh and your index.js well we're not wearing any tests so let's delete that we don't need this and then delete the semicolons again that is a personal preference and we are ready to roll foreign so that is my index.js file that is my index CSS file and that is my app.js file and that's all that we should have in here great so again like I said this is a really small project so we're actually not going to have any components or anything like that because this is about learning how to use the open AI API so I'm just going to start building up my app so I'm going to start up by having two sections so one section that's going to be for the sidebar and one section is going to be for the I guess main part of the app so let's give this the class name of side well and this the class name of main so we can differentiate between the two main so what do we want to go in our sidebar well I want to have a button uh this is going to create a new chat and I'm going to just put a little plus text icon here if you want to know where I got the text icon from I'm just going to search for it you can simply just get it by searching for it so if you visit this URL you'll be able to get that plus sign as well so I believe so anyway let's just find yeah so there it is great so that is my text icon next up after the button I'm gonna actually have an ordered list and this is going to be for the history of all our previous prompts so I'm just going to pick it out by the class name of history as well just to kind of make things more readable and in here we're actually going to map out onto list items the first prompt that we wrote for the chat the fast text prompt so we'll leave that for now and lastly I'm gonna have a NAB element and in here I'm just going to have the P element of made by Anya so that is my whole section my first section it's got three children which I want to space out evenly so I'm going to use justify content space between to space them out evenly so shall we do that yeah let's do it okay so let's get my index CSS uh file up I'm gonna say that everything so star means everything everything in this uh I guess project is gonna have the font color of white and the font family of open sand so open Sans is something that I'm going to get from Google fonts so please go ahead and just get it as well so just go to Google fonts and then all you're going to do is search for open Sans there it is and then I'm going to select the appropriate ones I'm going to actually select all the weights so that we have four of them to our disposal so I think that's it I'm not getting the italic ones so if you click here we can then import them you can do import them into the HTML or the CSS I'm going to import them into the CSS I'm going to grab that and I'm just what I'm going to do is just paste it making sure that that's semicolons at the end and you can see all the font weights that we have to ask disposal so now if I want to use this use the rule that I need to use we can have anything as a backup but I'm happy having Sun serve as a backup as they have kind of given us so there we go so yeah everything in here is going to have essentially white text that is open sand and if open Sound doesn't work it will revert to sunserve as the backup next I'm going to grab the whole body and I'm just going to get rid of any default margin and padding so margin and padding I'm just going to set a zero to get rid of any weird funky white borders that we may have and now let's make this bigger I'm going to grab so the wrapping element so the element or the class name of app so let's grab it by the class name and I'm just going to give the whole app a background color so the background color I have picks out already directly from chat GPT and it is this three four three five four one okay and I'm just going to make sure that the Side Bar so let's saw the sidebar but also main let's give them both some styling first to the sidebar and on the background color of this to be darker again I have picked this out as 202 one two three and I'm actually going to make sure that the height is 100 of the viewport height but the width is only 244 pixels and it's going to be stuck at 244 pixels okay and while we're here I'm also just going to make sure well let's just leave it at that for now and the main I'm also going to give it a height of 100 of the vehicle height but width I'm just going to say 100 so it's going to try to take up 100 but obviously we've got the sidebar there at the moment though let's go ahead and start this project so in webstorm I can just hit here and it will run the command npm start so essentially look in here and run this command but if you are not using Web Store I'm just going to show you how to do it you would find the project first so webstone projects and this is what we call this react Chad GB clone you would do npm Run start and hit enter okay because you're literally just doing npm run and whatever we've called this we call this start so that runs this so let's go ahead and do that on webstorm so I'm just going to click here and it should start up by uh boom so great this is looking very cool I'm just going to inspect it for now so I want essentially this to be you know just spaced out evenly right I want it to appear this to be at the bottom and then history which at the moment doesn't have much starting to be in the middle and the new chat button to be at the top I can use so with display Flex so let's minimize this I'm going to minimize that too and on the sidebar I'm going to initialize flexbox so that is initialized so I can use it and we now want everything to be stacked on top of each other because if I save this it will you know stuck next to each other we don't want that we want it to be over each other so Flex Direction column and now I'm going to do justify content space between so now they are spaced out and if I kind of move this I'll always be at the bottom the space between all the three children should be equal so in here the three children there's one child as the second child and the third child has equal spacing between them let's carry on maybe let's just make this a little bit smaller okay maybe let's start the button and the nav first before moving on let's just complete the side one so that is my sidebar I'm also going to grab the button and just give it a border solid 0.5 pixels uh and then make it kind of well I'm gonna do white but then I'm going to make a 0.5 or Paces here so a is for a piece of t uh make sure to spell button correctly we shouldn't really use RGB and hex so we can swap that out at the end and then let's also give it a background color of transparency we've given it a border we've got a little background color let's round off the edges border radius and let's go with five pixels and then padding 10 pixels margin okay so that's what I have done so now it looks like that very much like the real thing now let's do the nav bar so let's go back here and let's grab the nav element and all I'm going to do is give it a border at the top so I'm going to do border again but this time just border top and literally just copy this line really okay but that's going to apply it just at the top and let's also give it the same padding so let's just copy this just to keep it consistent okay so now it looks like this wonderful this is looking great now if I was to start adding elements into here so into the history so say we have a list item or already a lot of what we do for now it's going to look like this I don't really want the Dots here so I'm going to show you how to get rid of that as well as give some padding to the whole unordered list so let's grab the unordered list first okay I'm just going to grab it by the element because we don't really have any on other unordered lists in here right I mean you could grab it by the history I gave it a class name to make it more readable so maybe let's just do that some dot history dot is for class name as hopefully you know and let's apply the same particle margin for consistency I'm also just gonna uh maybe give make sure that it spaces out a hundred percent and now every list item that lives inside the element with the class of History I'm just going to use list Style type none okay and that will remove that dot okay now I'm also going to Pat it out however I just want to cut out 15 pixels from the top and bottom and zero from the left and right so that is a shorthand for doing that I'll reply to the top and bottom of this to the left and right and I'm also wanted to give it a cursor of pointer because I'm going to want to be able to click on these right so I wanted to be very obvious that we can click on them by changing the pointer like so all right done so we're now done with this side bar maybe let's get rid of let's keep that for now okay so let's move on to the main section now let's do it now my main section well I'm just going to give this the H1 element of Anya and gb2 like so and then I'm also going to I guess make a feed so we're going to use another unordered list so luckily we gave that our class name because I am going to use another unordered list so let's give this the class name of it's going to be for our feed and we're going to also map out onto here some list items which is essentially going to be each chat um do we want to do this now maybe let's leave that for now so we're going to map onto of course you know list items but we'll leave that let's then make a div and let's give this the class name of Autumn section and it's going to basically hold everything that needs to go in the bottom section and what goes in the bottom section well we're going to have an input I'm going to wrap it in an input container so I'm going to make a div with a class name of input container so that we can essentially position a little icon on top of the input so let's put in our input there we go and then I'm also going to add a div and give this the ID of submit okay so that is it and again I'm just going to use some text symbol if you want to Google it that is it and you can get it from Unicode characters so that is the URL to do it so now let's go back here Okay so we've got our input container and under the input container so make sure it's after this closing tag that's linked to here I'm going to put a p element let's give this the class name of info as I want to style this up a little bit smaller than a normal P element and it's just going to have the text that I've stolen from the chat GPT website okay wonderful so we've now finished with all of this at the moment uh you know it's under here because we have our sidebar here and then our main is under here we need to use these two to appear next to each other so the parent on the sidebar and the main element is the devil class name of app so let's go back into here and just right here I'm going to use display flex and that should make both of these appear next to each other like so great let's style up the main element a bit more next so the main element well I want everything I guess to kind of be in the center but also uh with space between so once again I'm going to initialize flexbox so display flex and once that is done of course everything will appear from left to right we want to appear from top to bottom so what I can do is use flex Direction column and now I'm just going to justify content space between okay so it looks like that and now let's Center the text as well as everything else actually so we're going to use align item Center which again is part of flexbox you can't use a line items Center and you can't use this in fact you can't use any of these three without initializing flexbox so just keep that in mind and now let's also Center the text so once again I'm going to do text align this time Center and I believe that's all we need to do so that is what it looks like next I am just going to make this smaller and more transparent so the P element with the class name of info so what I'm going to do is have the class name of info and the color of this text is well it's not going to be white so let's override that so I'm going to do RGB a 255 255-255 0.50 is what I'm going to give it next I'm just going to send the font size font size 11 pixels and Pat it out just a little bit though by 10 pixels so at the moment it will look like this okay just much more I guess realistic let's tackle the input next so the input well of course the input and the uh icon are children of the input container and we want to do some positioning which is why we're going to use position relative on this and then position this based on the parent are you in a position absolute and then some values for top and left I believe let's have a look uh okay so let's grab the input container actually the other side so top right or bottom right top or bottom it's up to us so let's yes grab the input container like I said we need to give a position of relative relative to everything else so essentially not much will change for that but we need to do it in order to position the child and one other thing that the input containerism is the bottom section which we're going to have to assign a width to so the bottom section let's just say we want the style width of a hundred percent just like so oops there we go I'm also going to use display Flex on it and make sure that everything's stacked on top with each other so I'm going to use Plex Direction column and then let's also Center everything so justify content Center and align items Center so everything's going to be centered from uh top to bottom and then left and right so that should be good so yes it is and now let's so here is the I'm just going to show you exactly how big that bottom section is it stretches and then if we go into the bottom section I need the input container to stretch too so the import container let's also give it a width of 100 percent but then also stop it so cap it if it gets too 650 pixels anyway okay great so again that won't look like much because now we need to stretch the input that lives inside of it so now let's grab the actual input itself um and the width is going to be 100 now I'm also going to get rid of the border of this let's give it a background color which is going to be rgbase it's going to be white and it's going to be super okay so 0.05 I'm going to do and let's also give it a padding at the top of 12 pixels and 15 pixels from the left and right so this is applied to the top and bottom and this to the left and right and round it off so I'm going to do border radius 5 pixels okay so one other thing that I should probably do is well let's have a look at what this looks like at the moment so actually this looks good I'm happy with that I don't really want uh any focus on this so that blue line so what I'm also going to do is grab the inputs focus and I'm just going to do outline now okay so that will get rid of that and one last thing I'm just also going to add some box Shadow I'm essentially going to Overlay lots of box Shadows on top of each other the first color is going to be black with 0.05 opacity 0x axis 54 pixels y-axis 55 pixels blur and then overlay with another one so in fact I'm just going to copy this because I think we're going to keep the color the same but just change uh the X and Y and blurs so I'll make this minus 12 and change this to 30. to again [Music] and this time zero let's put four pixels and six pixels and then again of 0 12. 3 pixels and a final one of zero minus three and five so there we go that's a lot and we just need to change all of these to the commas instead because it's just one long box shadow so the desired effect is now there let's position this next so this time what I'm gonna do is grab the submit okay so the div with the ID of submit and I'm going to use position absolute so at the moment that will appear here but I wanted to appear here and I wanted to position it from the parent from the bottom 15 and from the right zero so let's go ahead and do that bottom 15 pixels and write zero and I'm also going to change the cursor so like we did before so we pointer so that we know that we can click on this and the end result is that we can probably move it a little bit down that does seem kind of high up or maybe let's make the font size bigger for here maybe let's do that so again on the input I'm just going to change the font size to be 20 pixels if we write in the input and great that is so much better I think we're now ready to actually cook this up a little bit to the API and for this we're going to build a Bakken so let's do it so back in here what I'm going to do is on the same level as the package Json I'm just going to create a new file so let's go ahead and add a new file I'm going to call it index or let's call it server.js you can call it whatever you want really so that is now our server so that's our backend okay and we're gonna have to install a few things uh so let's go ahead and do that first so I'm going to install a package called cause Express know them on and I think that's it if you want a bit more information as to what these are please do check out my apostate developer course where I go into this in a bunch more detail okay or you can do your own research just research those packages otherwise let's carry on so you will see those packages having us all here along with their version so if something isn't working make sure to move up back to these versions and install that version okay if you are watching this in the future so now that we've done that let's write a script to start our back end I'm going to call it start but this time I'm going to write back end and it's differentiated already in the front end for this one right and I'm going to say that because you can read it and to start this well we're literally going to use the package that we just installed to listen out for constant changes on my back end so I'm going to do no demon and then we're going to listen up changes on serverjickness great so now let's start our front end again so I'm just going to stop it from running here and do npm Run start front end and hit enter okay so that will just re-run that and I'm going to create another tab so I can run my backend so keep both of those running npm Run start back end time and hit enter so now our backend is running so let's actually Define a port Al run on first so I'm going to minimize that so we're done with the package.json let's get off our server.js file so we're going to run our backend on Port 8000 and let's also just go ahead and require those packages that we literally just installed so we're going to use express we're also going to use cores so require course to get rid of any course messages that we might come across and now let's initialize it so I'm going to essentially get Express we've got the package we've saved and express I'm going to release everything by doing that and save it under app so we can use it in this project so now I'm also I know I'm going to be working with Jason so I'm just going to use um to press Json that will allow us to work with Jason when we start sending stuff from the front end to the back end with our post requests and I'm also going to do app use uh course because I know that I'm going to run into some course error messages so that is the setup now I'm going to do app listen to listen out essentially on Port so let's actually uh just write a message your server is running on ports and then whatever the port is support 8 000 of cons is 8 000 that we're using here okay um we actually need to make this a callback function because we report as the first parameter and this as the second parameter and then console log this out so console.log this whole thing great so now if we look in here it says your server is running on 40 000 and if I make any changes so if I just do console log apply that will rerun okay and same if I visit localhost 8000 here that is our port and it's running of course we haven't written any Express routes so that is why it says cannot get anything while we visit the Home Route right here but let's carry on so I'm just going to minimize that okay so now it's time for us to get our API key so all I'm going to do is head over to open Ai and I'm going to go to developers API reference okay of course you have to be signed in so just make sure you are I am currently signed in and we are going to get our API key so all you have to do is go here view API keys and I'm going to create a new secret key so copy that it's really that easy there it is if you uh got lost just make sure to visit this URL when you are signed in and you can create as many as you want of course if yours gets taken or you think it's compromise you can delete it as well so keep that in mind I just created one and all I'm going to do is essentially for now I'm just going to put it here like so so there we go right now it's in here but we will be creating a DOT EMV file to keep it more safe but you know I just wanna get the basics done first and now let's write our route so if we post to the root let's say if we go to what should we do localhost 8000 forward slash completions this could be whatever you want essentially all I'm saying is that if we visit forward slash completions then we will get something back here okay uh and then the Syntax for this have a request and a response so put those in parenthesis this is actually going to be an async function because we're going to use the await keyword inside of here but let's cross that one we get to it we're going to do try and catch so we're going to try something and if it doesn't work we're going to catch the errors I'm just going to console error them out so console error the error okay great and what we're going to try well we're going to use the fetch keyword make sure you are on the latest version of node for in order to be able to use the fetch API keyword on the back end so just keep that in mind as well so all I'm going to do is use the fetch keyword and we're going to fetch to the completions API so once again let's go back here let's go to the documentation and we're going to use the chat completions API from open AI so the model we're going to use is I don't have access to GPU Chief gpt4 yet so I'm going to use gvt 3.5 turbo so let's go here and if we go into chat chat completion not completion okay chat completions this is the URL that we're going to need okay so I'm just going to make that smaller here we go it's a post request to this URL so I'm just going to grab that and paste it in like so next we're going to have to pass through some options like what kind of request is going to be so what method summer headers with our API key as well as actually what do we want to use and the message we want to send over so I'm going to Define that here const options it's going to be a whole object like I said it's going to take a method it's going to be a post method as we discussed and next we're going to pass through some headers so the headers that it's going to take well we need to postroom some authorization so make sure to spell this like so authorization and the authorization is just going to be um well a string with our uh const so that's why I put back text so we can use that code in here you have to put Bearer and then that and then we're just going to put some curly braces so that we can pause through the API key so that's how you'll put in variables you'd use the dollar sign and the curly braces okay next we're also going to have to pass through the content type content type and then we're going to put application Json as we're going to be working with Jason and now we can Define the request body so we're gonna have to pass this through json's string of five okay and it's going to be an object that we're going to send through and we're going to juicify it Jason defy it thanks to Jason stringify the model we're going to be working with as I said I don't have access to chat gpt4 but if you do please go ahead and use that because the results will be better I'm going to use uh this model right here and the messages we're going to pass through are gonna be so the role is going to be user and then content well the content for now let's just put how are you okay and we'll replace that we're just going to check this works and I don't want to go over 20 tokens I'm going to limit my tokens so I can do Max tokens 100 okay that will just mean basically every string um uh protects prompt is tokenized if you want to check how many tokens your string is going to use you can check it before using this on the open AI documentation but I think just you know put a Max in here just so you don't go over and use up all your free credits and whatever so there we go one thing that I will say is that we can't pass over Json from the front and to the back end unless you have this right so if you're having any issues when it comes to that make sure you have this that's very important okay great so those are all my options that we're going to pass through with this URL like I said this fetch API is an async method which is why we're gonna have to await it so we're literally going to wait for uh something to come back and we're going to save it under response and because we're using the 08 keyword in here this whole function it needs to be an async function again check out my full size developer course if you want to learn more about this in more detail so now once we get the response we're going to wait for it and then we get it back I'm going to get us Json but uh oh Jason is another async method so we're gonna have to await this to I'm going to await it and once we get it back we're going to save it as data great and let's just send this over to localhost 80004 slash completions by passing it through rest set so now let's check it out so first off after you've done this let's hook this up to the front end I'm going to do so with an on click so on here if we click this div I want something to happen and I just want to get message okay that's all I'm gonna do and find me below student messages as it could be plural and let's define it up here so right under here we're going to Define get messages so cons get messages it's going to be an async function because we're going to use the fetch keyword in here too and once again we're going to use try and catch so try and we're going to catch any errors and what are we gonna do this time well first off we're just going to console a raw any errors and in here once again we're going to use the fetch keyword so await fetch I'm going to pass in the URL this time though we're going to get it from our back end so right here that's what we're going to get it from so paste that in like so and again we're going to have some options because we're going to have to pass through uh the some data right so exactly what we're writing into the input so let's define our options again the method is going to be a post method the body this time is uh I'm just going to actually pass through a message and it's going to have a value but at the moment well yeah we can we can pass it through let's just put hello how are useful hard coding it and we're gonna have to wrap this through Json stringify again so Json stringify and I'm going to get that whole object and positive okay great and I'm just going to add headers as we are working with Json so I'm going to put content type application Json okay wonderful so once again we're going to wait for the response and once we get the response we're going to get its Json and let's save it as data just like so and then for now I'm just going to console up the data so let's test that out so at the moment we're just hard coding hello you that will be passed on to the server but we're not doing much with it because we're just going to send how are you from here anyway so let's just try this out so here if I click on here I don't need to put anything in we're just going to wait uh the promise is pending why is that that's because we didn't wait if you need to wait for that to come back that's why we got a promise there that's try again and great so we get back this whole object okay everything is working and if you look in the object and we look under choices and we look under the first item in the array we get a message from the assistant saying I'm an AI language model so I don't have feelings like humans do but I'm functioning properly and ready to assist so we're getting about that message next thing we want to do is actually show that message in here instead of card coding how are you we want to actually get the input right so let's do it well first off I'm just going to save that response so the whole message to State and for that we need uh use state from react so I'm going to import use State and while we'll add it use effects as I know I will need that from react so now if I want to save that message I can go const message set message use State and it start off with being null and so now at the moment we get and I'll go we assigned the value of an L2 message and if you want to say change sorry the value of message we use that message to do it so I do want to change the value so I'm just going to use set message and what I'm going to do is go into the data get the choices so just like we did before go into that Omega the first item and get the message right so once again here's my whole object so that's technically data you go into choices get the first item of that array so zero right zero and then we get the message so the message will actually be an object that has the content and the role okay I want to save both so let's carry on so we don't need to console this app anymore the message with the role and the content is being saved under the const message so it's not a string as an object okay so what do we say we want to do next right we want to hook up the input so let's say the value of up here to Value set value use State null and we're going to override the value if we interact with the input so let's find that input here we go I'm going to display the value so whatever the value is right now we're just going to assign to the input at the moment it's null of course but on change of this input well I'm just gonna pass through the event I'm going to set a value to whatever e Target value is of that input right so now up here if I consult log value just anywhere just above the return and I type something to get up or console log see that's what technology console login valuable console login app line 27 and it will change so that is how we are changing the value constant okay and next let's actually whatever state is at I want to send it over so currently I would send over this let's hook that up so what I would do this is super simple all I would do is get rid of this string and put the value instead instead and now to pass it to our back end we're passing it through with the body we need this to be here in order for this to work so don't forget that and that just means that instead of having this here I can get the request body message and pass that through like so and that will now be sent over to open AI okay so again if this doesn't make sense check out my full site's available course I don't want to keep banging on about it but you know there's a lot of stuff we're doing here that if a beginner will be way too much so do check it out so now the one last thing I'm going to do well I'm just going to console log the message that we get back so that's saved on the message and try it out so let's do what is two plus two send that and great we get four and it's from the assistant from the AI assistant so let's now use this in order to create a chat response okay as a list item so let's do it so let's go back in here and what I'm going to do is actually save all the previous chats and you set previous chats in order to change that and I'm going to start off with this being an empty array this time okay so that's what I'm going to do and I'm going to actually get this whole message so whatever's coming back here right now because right for the role and content and I'm also just going to assign a title so that I can essentially say that okay this chat has this title I'm going to lump it together how is this chat just a new chat I'm going to give it a new title and it's just going to be the uh current the first prompt that we give our chat so let's do it let's do this maybe in a use effect okay so just like so and I'm going to say that anytime the message changes so whatever we get back from the open API I want this to run I'm also going to save the current title so current title Set current title use state instead of as being an empty array as well so I'm also actually going to change this if the current title changes so whatever the prompt for the chat whatever the start of the chat changes then we run this again so let's just console.l log the current title the value so the input value and the message that comes back to us okay just so we can see a little bit more of what is going on great then you say comment there so what do I want to do well if there's currently no current title right so if there's no new title we don't have a chat however we do have a value in our input and we do have a message that has come back to us where then I want to set the current title to be whatever the value is right so hopefully that makes sense and once we save it we can add it to the history however if there is a current title already that exists and the value exists in an input and we get the message back so we're on the chat currently we're still chatting away we just want to set previous chats and we're going to essentially get whatever's in that array already right and this is how you would update an array using use state I would open up the array I would get the previous chats and spill them out but then I'd also add I'm going to add an object I'm actually going to add two objects so just like so maybe I'll put this on a new row so it's more readable for you there's one object and here is another object is going to have the title and the title is going to be the current title so whatever the first prompt was the role is going to be the user so essentially us and the content is going to be the value so I'm using kind of what open AI gave me in terms of structure for the object but I've added my own title so we can save it to State and then I'm literally just going to get what churches if you get back to me so roll I'm gonna go into the message and get the role and I'm going to get the content and get the message content okay and I'm also just going to give this the title of the current title so let's just talk this through so every time we are saving previous chat so a new chat I'm saving whatever we ask the AI and we're signing the role as us the user and I'm just going to say the current title to Rick show that all the charts are loved by the first prompt and I'm also sending over the other object which is the response from the AI which we've saved under the constant message right that was an object that had a role and content and I'm literally just getting the role from that object I'm getting content from that object and assigning it to raw and content for my previous chats state I'm going to show you what this looks like okay so there we go we have a few more things to do and that is actually set the uh history by the current titles so let's go ahead and do that here so here's my section of Main and actually let's just show this if there's car if there's no current title then we show this however if there's a current title then we get rid of that and here we're going to map out onto list items however maybe let's just see what this looks like at the moment I'm just going to console log out previous chats okay so that's what we're gonna do so let's go back here I'm just going to let's start a new chat what is five plus five ask it okay so that is essentially these are my previous chats we've created an object that has the content of what we asked as the user there we go the title is an empty array that is strange we need to essentially change that current title and then our second object the content is 10 because that's the answer that we got back from the AI and the role of the AI is a system so why is title saving as an empty array that is because the current title we did set this to be an empty array this should actually be null because we're just going to save a text prompt and where do we set the current title well essentially this should have done it for me because we're listening out for current title changes and if there is no current title which technique that is not okay because before is an array that didn't run let's try that again so what is five plus five let's click on that okay and great now our title gets populated with the prompt itself and both of them have that prompt right and now because current title exists we will miss this because current title does exist and we'll just keep adding to the chat right so let's ask another question are you sure okay now there's four because I asked it another question so there's me asking are you sure as the user the title is still the same the first initial prompt and then we're getting the response okay from the assistant so great so this is good however what if I want to change it I want a new chat so if I click here I essentially want to clear this title so let's do it so I'm going to make a uh handle click function that I'm going to attach or maybe let's call it something else so on the button on click I'm going to create new so let's define it so up here const create new chat I'm going to set message I'm just going to clear everything set message so whatever the message is from the uh AI I'm going to set that to null I'm going to set the value of the input to an empty string so we're clearing that and I'm going to set the current title to be null 2 so I'm essentially completely clearing it so we can start fresh okay so shall we have a go at this let's try it out what is one plus one that's send that over okay so we get that there the title is assigned but if I start a new chat and go how are you and send that over okay the title has changed so great so now if we ask more questions the title of that should be still attached to how are you and it is so great now I'm gonna get the unique title so we're gonna get everything and we're going to filter by the unique title and show it in the history as well as show the chat up here so what I'm going to do is get the previous charts and I'm going to use filter and I'm going to look at each previous chat individual you can go this whatever you want it's essentially every item in my array and I'm going to literally just look at the previous chat objects title and if it equals the current title that we are currently on well then we know that we're on the current chat so let's save these filtered items as current chat objects any object that has the title that is the same will be lumped into current chats and this just means I can then get current chats with the feed okay and map out each let's call it maybe a chat message we're going to have to use an index as we are mapping so let's put that index here like so and then I'm just going to map onto a list item uh we of course need to give it a key so I'm just going to use the index for that for this demo and then I'm just going to essentially I'm going to spell key correctly put that there put in two things into my list item element I'm going to put in two P tags this one's gonna show you who sent the message so roll either it's the user or the AI assistant and here I'm just going to show the content of that message I'm going to do a chat message great and let's just give this the class name of row so it's really obvious okay and we can pick it up later so this is looking good to me let's just check that that current chat exists fast before mapping anything onto here and while we are here I'm also just going to get all the unique titles I'm going to filter I'm going to get all the messages and just get the unique titles because as we saw there's some titles that have like numerous right we just want essentially to filter them all out and just give return this title and this title and put them in an array for us so I'm going to show you the code to do that well this time we're actually going to get the previous charts and we're going to map I'm going to get the previous chat individual and we're just going to get the previous chat title and now I can pass it through so all of this I'm going to pass that through into a new set and make an array from it so array from just like so and this will give me the unique title so that piece of code is super useful if you want to get unique uh items from an object so if I console log this out now unique titles on line 61 you will see I've just got those uni titles and put them in an array great because now I can map them on into the history so let's get those unique titles and instead of having blur I'm going to get the unique titles and if they exist I'm gonna map each unique title let's also maybe get the index so put that in parentheses like so thank you and I'm just going to get that unique title and pass it through here as code like so wonderful I believe that should be it we just need to give this a key and it should now look like this so it doesn't look great at the moment we still need to style stuff up but now let's actually maybe add an on click so that if we select a chat then we essentially uh pass through that chat that we click on as the current title right because we want to change the current title to the other chat so I'm going to define a function for this const and or click and if we click on any one of those so handle click is assigned to the list item in history so in here so we'll do it on here on click we're going to call the function handle click and we just want to click on it so if we click on the first unique title I'm just going to pass through the unique title that we clicked on so now we need to make this a callback function as we just call that again so we're gonna pass it through into here that you need Title and we're just going to set current title to be whatever title we clicked on right so hopefully that makes sense it will do in a bit so that's what we're gonna do and we're also just going to set message to null and set value to now okay so we're just starting fresh great so let's just test it out what is four plus four send so that should now get assigned to here great and we can click on it and my why is my content not showing up let's have a look let's go down here uh chat message this should be content right because that's what we saved it as here role and content and that's what we're mapping out so now if we look in here there we go user what is four plus four assistance is eight and I obviously pressed it twice because I'm getting it twice so let's just try again what is four plus four send great are you sure question mark foreign 's answer and then I'm just going to start a new chat and this time how are you okay so that's my question and that's the assistant's answer but if I want to swap back and carry on this conversation you are great then I can and it will be assigned to here it does not get added to here so great this is looking so good and if I clear it we just get on your GPT this is wonderful a few more styling things that just style up these messages next so all I'm going to do is style up essentially this list item here so let's do it so down here I'm going to first style up the feed I'm just going to give it a scroll so I'm going to go over full scroll so we can scroll through the messages if we get loads I'm going to make sure that the width is 100 and I'm also going to uh just give it a padding of zero so it's really squashed up to the edges next any list item that lives inside my feet so just like that I'm going to use display flag so I'm initializing flexbox so they appear next to each other rather than stacks and the background color I'm just going to go with 444654 the width I want it to be a hundred percent and I'm going to give it some padding of 20 pixels and I'm going to space out each list item top and bottom by 20 pixels and zero from the left and right okay so at the moment it looks like this this is looking good let's just uh assign a line the text a little bit better so again I'm just going to say that any P element that lives inside of my feed is gonna have the color of rgba so a bit more transparent I'm gonna go with white 0.8 opacity I'm going to get the font size of 14 pixels and I'm going to text a line left and if that P element also happens to have the class of roll I'm just gonna assign it A Min width of 100 pixels so that we go this is looking so good right now you can of course add images in here instead of just use an assistant like the actual app does but I think this is looking fantastic there are a few things you can do to clear this up for example I do use RGB uh and hex colors in here so please go ahead and change that but overall now you know how to use the open AI API and you know how to make this cool chat gvz clone that has a history that you can kind of move back and forth to and add to the history and create new chats with as well finally we're just going to hide this so I'm just going to stop this from running and import a package called dot EnV so just like that and we're just going to create a new file so new file on the same level as the server.js so e and V just like that and we're going to Define our API key so instead of having it here I'm just going to take it you don't have to put it as a string that is implied just paste it in and now that means that I can just use process EnV API key and of course we need to require that package so fire dot EnV config and just start this up again okay so just do that that should now be picked up from this dot EnV file okay so you don't upload this dot EMV file onto GitHub great so great I hope you have a bad fan please take this to the next level you know add new features it's yours

Channel: Code with Ania Kubów

Views: 49,145

Keywords:

Id: JJ9fkYX7q4A

Length: 65min 12sec (3912 seconds)

Published: Tue Apr 04 2023