Let's Build ChatGPT 2.0 with React JS and OpenAI on your PC!

I'm going to code a better version of chat GPT in this video chatgpt sometimes doesn't answer the questions you want or you want to build your own features or have a custom version of the AI first we'll rebuild the front end with the same general design along with our chatting interface so you can have your own personalized chat GPT running at your own discretion you'll also be able to create new chats as well as access all the models inside of openai this allows you to do more refine prompts such as if you want a coding prompt selecting a coding model will produce much better results than what chat GPT would normally do I don't have any sponsors so I'm going to sponsor myself again in this video I've put together an open AI starter kit a template to build your own ideas on it's built on top of the Merin stack and it has everything ready to go for you to start interacting with openai building your own prompts and training the AI to essentially have outputs that you want this should save you hundreds of hours and I've listed it on gumroad for 99 on top of that I'm thinking that I'll also introduce a brand new template this will be a Chad GPT starter kit a template where you can customize it and configure it any way you want it'll only take about 5 or 10 minutes to set up and I've listed it on gumroad if you want to try it out and support the channel it'll be very similar to what we're doing in the video right now it'll be just more expansive saving you the time and effort from building it yourself so without further Ado let's begin this video let me Begin by creating the front end for the website I'm going to start with a visual studio code I've browsed into a folder here that I've created called chatgpt Dash enhanced and I'm going to check my node version so I'm going to type in node-v I'm running version 18.12.1 I'm also going to check my npm version which is 8.19.2 I'm going to install create or react to app I'm going to do this by calling npx create react app and then I'm going to create an app here called enhance chat GPT now if we browse into the full destruct are here we'll see that we've got our folder here called enhance GPT I want to change this to something more specific so I'm going to call this client since this is where our front end will exist I'm going to also change the name here to something more like chat gpt-client and will also create one later for the server we can actually initialize that already so here in console what I'm going to do to initialize that is simply type in npm in it here we'll include chat GPT server and here is where we'll have our server later on so we've got our server here in the root folder and we've got a client which is with create react app inside a folder called client next we're going to CD into the client folder and run npmstat which will kick off the react server we can now customize jumping back into vs code we can expand out SRC and we can head to app.js and start configuring the application look and style we'll need a side menu and a main section so let's start off with that this side menu here if we inspect it is around 244 pixels wide so we have a general idea of how to do that we can do an S side I believe it is it's an HTML attribute and then over here we can do a section and for the aside I'm going to do a class name here and for the class name I'm going to call this side menu hit save on that and we've got an app.css file here so I'm going to browse into app.css I'm going to pass in this class name for side menu we'll select the width here to be 240 pixels and I think that should be okay the other thing here is we've got an app file well an app class sorry and I think this might be in the app CSS file so here I'm going to do a display of a flex for it hit save I'm also going to move this side menu into the app CSS file so that it's all in one place and here I'm going to do a border of one pixel solid white so we can see it let's head back to our react interface and we've got our well side menu and we've got our main menu here though it's a little bit large but we can work on that so what I'm going to do is make sure that we're not fully zoomed in now we're not so it seems more reasonable as to its sizing the other thing here is that this section here has an expanded app all the way so what we can do here is for the section that we have here I'm going to move the header and all of this code I'm going to well remove it all together this section I'm going to give a Class A name of I suppose a chat box we're going to copy that class and paste it into here we're going to give it a flex of one and we're also going to give it a border of one pixel so little white so we should be able to see some separation but we've lost the background colors here so I'm going to grab the background color here we had earlier for the app header and I'm going to put this in the app itself so it can now be visible the text though is still black so I'm gonna jump back into vs code I'm going to select the color of the text to be white finally I sort of want this to utilize the whole Space here inside of our area so we could do this in a couple of ways but I'm going to be lazy and position this to be absolute with a top of zero bottom of zero right of zero and left of zero if we hit save on that we can see that it's utilizing the entire space now let's take a closer look at exactly what colors are currently being used so if we do a check on that we should be able to use the little cursor here go to hexadecimal and grab this color of 202123 I think it is let's jump back in here and for the aside menu let's do the background color here to have that hexadecimal color if we hit save on that it should be a darker version for us now which it is and then on the right hand side we have this vs code looking color so if I was just to try and figure out what that is I can just do that little trick that I did before where I can select the color here palette and it's a three four color so I'm going to also apply that here for the chat box we'll do background color and we can utilize the same color for that so we're getting closer there is a slight larger width to this side menu which I'm not sure what that might be it might be actually the margins Coral I know so something I normally like to do when I'm building out an interface is to do a normalize so I'm just going to type in normalize CSS head over to the very first example that we get we can install this and probably utilize it immediately but this is the syntax that we you use for that I'm going to jump back into vs code Type in Normal CSS paste that in and then over here in app.css I'm going to import that normal.css and it should make sure that things like border box and other stuff like that just work properly then for this side menu I'm also going to expand out its width a little bit more so let's head back here to side menu let's do it with the two maybe 260 pixels and refresh that to make sure that it's more or less the same and that looks much closer finally I'm going to add some padding to it something like a 10 pixel should do and I can remove the white borders now because we can see some separation between the two items with the padding I can see that it's actually a little bit too large now so let me remove it back to 240 which really shouldn't happen if I'm using border box but maybe it isn't applied properly so let me double check that I'll jump back into our react application here let's go to app.css normal.css is located here is it doing border box content box I believe that is correct but maybe it's not uh let's go to border box CSS normalize uh how to do border box in this we have this just over here so I'm going to copy this into the normalized script and this just means that essentially if we're doing anything like adding padding so say I add 40 padding to it it's not going to suddenly be larger now it's still the same size this does mean that I do have to make it a little bit bigger once more but I believe that should fix that problem that we're having and the size is now correct moving on we can close most of this out and we can begin stylizing the left hand side menu as well as the right hand side chat interface so for the left hand side menu I'm going to add some features and content in there but mainly we just need this first button here to start a new chat so that's the first thing I'm going to do let's remove this H1 block and in here I'm going to pass in I think just a regular div and I'll call this of the same thing which is a new chat let's jump in here we'll call it new chat uh we'll put a class in here called I suppose side menu button and hit save on that and generally speaking I have an idea of what it looks like in terms of the CSS so we can pass it in here we'll do something like padding 15 pixels color is already set so we don't need to do that border one pixel solid white and Border radius was about 5 pixels let's have a look so that looks about the same it almost has a little bit too much padding maybe 12 pixels but otherwise it also needs to have the little plus there I think that might be like a font awesome icon I can't really tell it is an SVG but font awesome often does this quite well I don't know if I want to go to the extent of importing font awesome icons so I'll just leave it at that for the time being but I will want to do the text align to be on the left hand side and I'll probably want to reduce that padding to 12 pixels so now we have this new chat working quite well finally I'm gonna jump in here and I'm gonna add in well I guess an icon but I'll have the icon inside of a span and this span will just have a plus sign so what I'm gonna do is I'm gonna do some styling for that span will do side menu button spam not spam span and here I'll do something like padding left can be six pixels padding a right can be maybe 12 pixels and if we refresh that we've got our little plus sign next to our near chat there is a hover effect that's happening where the background color is changing so we should probably apply that so we should do an on Hover effect here uh I'm gonna grab the save menu we'll do a hover we'll do background color can be RGB two five five two five five two five five which is the color white we have 0.1 being 10 opacity hit save on that and now when we hover over it we can see that it has that animation we could even go a step further and do a transition ease 0.25 seconds on all styling uh and then now we've got that little bit of a transition when we hover over it similar to what we have over here that's our first button the only other thing here is that the text might seem a little bit smaller or larger but I'm not going to go to that level of detail I think that's enough to get us started now let's actually create this chat interface that we have over here on the right side let's begin with the most important thing which is the little input at the very bottom of the screen here as well as this text which maybe we don't really need but I think this input should be easy enough to make the first thing we can do is grab the color that it's using which is just this lighter shade of grade gray it also has a bit of a box Shadow and is quite large and has a lot of padding do that I'm going to pass in a new class here I'm going to call this div class name we'll call this the chat input holder and for this I'm going to also have probably maybe an input or a text area let's do a text area and I suppose this can be called the chat input text area uh text area and that should be enough for the basic design but as you can see it's sitting here at the very top of our screen it's not really how we want it we want it to be at the very bottom uh sort of centered so what I'm going to do is jump into our styling here we're going to grab this class chat input holder and first of all we're going to update the color that we have over here so for this color actually maybe we can do that in the text input so let's actually grab the chat input text area and also put this class in over here now I've forgotten what color that was because I removed my copy pasta and let me grab that again it's a 404 color so I've definitely found that and let's go background color and we'll paste that in with a hex value let's make sure it's not a changing opacity so it's just got the cursor there so if we refresh and now it's visible but it still has a border and it's got no padding and stuff like that so let's do width 100 we'll do border say five pixels again uh we'll do border color none and I think that I'm sorry border radius here five pixels and Border none so that way we don't even have to worry about the color hit save on that so now we can see it's located over here it has a bit of an outline when we select it and it probably also needs a bit of a margin so I'll do margin to be 12 pixels and I'm also going to do outline to be none finally we have the box Shadow so let's do box shadow here I want it to be subtle um but let's do something like maybe eight pixels oh sorry zero eight pixels 4 pixels zero rgba we'll do black uh at 0.5 opacity so hit Refresh on that that still might be a little bit heavy and we've got a bit of an overflow happening because of the margin I applied so instead I'm going to apply that to its parent I'm going to do 12 pixels here and this over here I'm going to set it to be just 0 pixels 0 pixels eight I always get box Shadow confused I think it has to be the first two values are zero and the last one yep so that looks like a much better box shadow uh there's no padding inside the text box right now so I'm going to add some padding inside of it let's do padding 12 pixels uh and check it now so now it's getting closer we also need to make sure that its color is white so let's have a look at it now it's much closer and the font is a bit larger in this example so I'm going to do font size 1.25 em so that should make it much larger in comparison to what we had here and finally it should be in the single line I also wanted to only have one row so I'm going to do rows is equal to one let's refresh now it's starting to take shape we don't have a button at the very end there but I can figure that part out a little bit later for the time being I just want to have it pointed down here at the very bottom and for it to have some more padding on the left and right hand side so I'm gonna jump back in to vs code here to our styling and for the holder I'm going to do a position of absolute for this position I'm going to put it to the bottom we're going to do left is a zero a right is zero and then for the size maybe ninety percent will work a little bit better so here it is exactly at the bottom but because we've got this uh I suppose not being defined inside of our other item we need to add a relative to our other item here I think it was in the chat box where was that it's a chat box here that needs a position of relative and that way the actual absolute position here is now at the bottom of our text box it probably needs a little bit less box Shadow and some more padding from the bottom too so what I'm going to do here is head over to this chat chat box holder put 24 pixels for that and have the shadow now we're getting much closer to what we normally have in chat gbt's chat interface they don't have a placeholders here so I'm gonna also remove the placeholder so that it looks more closely resembling well the chat gbt version and I think we're pretty good there I don't think I need to change that much more than what it is already I'm not going to put in this whole chat GPT preview or anything we could write our own but I'm pretty happy with what we have we can now build out this main section here I don't know how useful this could be so in a way I think I'll just skip that whole part and we can move into creating the chat interface for chat GPT now which will be the fun part let me create a new div up here and for this div I'm going to give it a class name and for this class name I'm going to call this the chat log which is a pretty good one in here I'm going to pass in a chat message and this chat message will be I suppose having a couple of things it's got the message itself and a small little Avatar of me so I think that should be easy enough to do if we have a look there is also a slight different color here when open AI sends a message back but we can get to that shortly so for that I'm just going to do another div here I'm going to pass this class name here as Avatar we can add an image in there later on but for the time being I'll leave that empty then in here I'm going to pass in another one called message and I'll close that off and I think we can close off the chat log div over here so I've got a message this message has an avatar as well as a message generally so chat message Avatar message so this is me here that I'll put in and this can be something like hello world let's hit save on that to see what it looks like for us here it's all text centered and it doesn't look very good right now so let's start customizing the CSS I'm gonna jump here into chat log and I'm going to start adding all these classes in so we've got the chat log class we've got the chat message class we also have the Avatar class over here and we finally have the message class and normally you could Nest this if you're using a SAS or less but for the timing I'm just doing a simple design over here let's do a padding with a scroll happening here and let's do a actually no leave this as is we'll just add in the padding then this one here can also have some more padding 12 pixels should be enough this can be a border now this can be a background of a white here for the Avatar border radius can be say 50 width can be 40 pixels I think that's a good amount and height can also be 40 pixels and finally for the message I'll leave that empty for all of this I want the text area oh sorry text align here to be left so let's hit save on that so that looks a little bit better we also need to have a display of flex here for the text message I'm thinking to add in a little bit more padding on the left so maybe something like 40 pixels uh and on the right 40 pixels let's refresh here uh and I think did I not add the display Flex properly I have to add it to message as well uh so let's refresh that's looking a little bit better I haven't added the padding in properly so let me do left 40 pixels padding right 40 pixels and what was a GitHub co-pilot doing to me before by not providing me the right design for that so that looks better I will also add some padding here to the text message itself and finally I'll remove the me from here we'll add in an avatar later but we've got a bit more of an interface happening now now there is a few ways we could do this this is one way of all the padding the other way we could do this is by having just a little bit of padding something like say 24 pixels and then doing a Max width here and having that something like 480 pixels margin left is Otto and then margin right is Otto if we save that it should be sent it which it is now that looks much better but this is because it's happening on the entire div element here on that chat message so if we go console here elements we can see the chat message happening we've got the Avatar and the message but if we were to add a background color like we have here it wouldn't look good so we actually have to Nest this so what I'm going to do is I'm going to call this the uh chat message center close enough and Nest this all inside of that so here I'm going to do chat message oh I've gone one layer too deep let's actually do it up here div class name equals chat message center great and paste that in so we've got our Avatar in hello world if we jump back in now it essentially should work the same way we'll need to update the display Flex to exist inside of that instead of inside of the chat message and even the padding so let's actually move all of that below here hit save on that refresh and now it exists here if for example we wanted it to be a lighter color say background color let's copy paste it here in the center message I've lost it where did it go here it is hit save on that we can see it's only applying just over here like that so if we actually now move it one element up to the parent it's essentially taking shape and applying to the whole side so now we could even remove the padding that we're having on the parent above that which is just over here the chat log hit save on that if we go back we can see now it's utilizing the entire space which is much better at least for when we get to the chat gbt interfaces so the other thing I'm going to do now here is utilize the same message design but I'm going to add in one more class here called chat GPT and I'm going to copy paste this and remove that class now and then this guy here will be i m n a i hit save on that so now we should have two messages both of them have well that background color but they shouldn't because we're going to update the CSS here to only add this background color if for example we have the class chat GPT on here hit save on that refresh and we're getting closer to that sort of interface look there is more width Happening Here I think it's like 640 Maybe so let's update that to 640 . hit save on that refresh and yeah that looks much better hello world great uh so with that done there is a slight different background color on this element here so if we go color red grab this color value that we have here it's a 444 color and I'm going to apply it to be the color that we want to use for charge ept's replies because we want it to be more or less the same so now we're getting closer uh we've got this chat gbt image here this is actually like an SVG image inside of a green icon so I'm going to copy that over too so for the SVG I could probably just have it here as an SVG I think this is it but because this is a react code that might not work but at least for this chat GPT interface for Avatar so where is Avatar here it is I'm gonna pass in one more value here uh chat GPT we're gonna grab that nice green color that we're utilizing for the chat GPT interface that if we did an inspect on it let's see what color it is color red select it just over here that's a nice green color and let's apply that for ourselves here so I'm going to add the class here chat GPT we'll head back and now we've got a white and a green circle we probably need to add some well avatars into there next this here is using the open AI logo so there's a little playground here where you can simply copy paste an SVG and out comes a react component so I'm gonna copy paste that and paste it straight into here hit save on that and if we go back to our design here it has not defined prop what's that that's missing something props so we can remove that and we've got a nice little chat GPT interface Circle here I personally prefer a circle for an avatar then a square I think that looks better with this done I think we can move on to the back end now and building out the back end to essentially interact with open ai's our latest API and start plugging messages in and getting responses right back so let me head over here to the main folder and create a new file called index.js we're going to include a few things here but the main ones will start off with Express because that's how we're going to be calling in well essentially API requests so let me see the backup folder here I want to do npm install Express course and body parser I'm I think I'll also get Morgan I think that should kick us off and open AI let's hit save on that and that'll start installing while that's happening in the background let's log into the open AI website then we want to head over to our account assuming you have an account if you don't just create one I'm gonna head over to Adrian and view API keys and I'm going to create a new API key which I'm going to use for this project and then delete later here I'm going to paste it into my vs code instance which is just over here and I'm going to set that a little bit later next up I want to jump into open ai's documentation and head over to the API we're going to head over to introduction and here we're going to install openai which we just did and we're going to start adding it to our node.js project by copying this code just over here so this code essentially is doing a few things it's requiring the configuration from openai it's setting the configuration with the organization and here where we have the API key I'm going to paste it in you'd want to do this with an environmental key but for the time being this is just for testing purposes I'll remove this list engine's response we can have a look at this later but I'll comment it out for the time being and hit save on that then we're going to prep up a completion and now we're going to use a node.js here with DaVinci and I'm just going to copy this text over here to complete that and paste it here in below so what's happening here is uh we're essentially resetting open AI so we don't need to reset that configuration since we've already done that and we can get rid of most of this other stuff that we have here the only difference here is it's using a require instead of an import so I'm actually going to use the require because I'm not sure if I've set Imports just yet on this so let's hit save on that we can close this off and we have most of our configuration now done now for creating the API here on the back end Let's test this out I'm gonna do an async function here called call Api and I'm going to just paste this piece of code in uh what we're doing here is an await so what we can now do is a console log and we want to console log out well the data that comes back I think then finally we just need to call this function as the last thing that we do here before we test everything is working so let me do a node index call and here we're calling indexed we've called say this is a test and then open AI has come back this is indeed a test which means that we're talking to the API here from openai all right with that done we can now create an API so what I'm going to do is say create a simple Express API that calls the function so we're going to require Express we're going to create the app we're going to to set a port then we're going to do an app get send hello world we're going to do a listen and we're going to do a console log which I don't think it is so what's happening here is well GitHub copilot hasn't done exactly what I wanted to do but that's okay so I'm going to move this import for Express here at the very top then I'm going to move this function here get rid of the function and just paste it into the get request I'm going to change the get request to a post request here and I'm also going to make sure that it's async then I'm going to have a response that will be a Json response and I suppose the data that comes back will be the response data from open AI I think that is pretty much it let's hit save on that and do in node index we're now listening to app listen here on this port which it should be working and we should now allow the front end to query this data and pull this in so it's time to jump back into react to create an API layer to start off with we'll change the port here to 3080 for the server because Port 3000 is usually where we use a react then here over react I'm gonna turn this into an input just to make submitting a little bit easier I'm going to add a form to be wrapped around it which will have an on submit and the on submit can handle submit let's save that and scroll up here and make a function here called oh on submit or handle submit sorry and we'll make this as an async function so this will e prevent default how do I do the E I think we just pass in an e over here and then we'll do e Dot prevent default which I'm pretty sure is how we do that so that'll just prevent the default behavior of it I suppose doing a um submit when you do a submit it usually does a page reload so let's refresh that hit enter open up the debugging tools and here we have a submit in console which is perfect that's what we want uh with that done we want to have some state so let's actually import a set state and that should be just import set state from react and then here we're gonna add state for input and chat log and GitHub copilot should just create that for us which it has then for the input I'm gonna scroll down here to the input I'm going to set the value here to be the input on change can be a function that basically sets the state so of input to equal input but we're going to call set input to equal input and it's not actually going to equal input it's going to equal e dot Target dot value so that way we've got our input here being set now we've just got our chat log so what I want to happen here is when we do do a submission we want the input to be set to nothing so we'll do set input here to be nothing we also want to grab the input and add it to a chat log so what I'm going to do is I'm going to do set chat log to equal chat log plus input but for that input I actually want this to have uh the I suppose user to be me fair enough and then the message to have that chat log in here well the message that we're sending so we'll reset that and I think that should be good so let's hit save on that then for the chat log here I'm gonna essentially turn this into a component I think let's see how we would do that so here we've got a chat message we're going to call this a chat message as a component and then we'll do message can equal message which will pass to it very shortly here at the bottom I'm going to do a const message or chat message I can pass in message it'll have a return I'm going to paste this guy back in here and close this all off uh then message Dot message can be that and then message dot user could be later in here but I suppose I'm just gonna apply it in here as a check so what I'm going to do is pass an avatar and then if message dot user is equal to gbt then we also pass in chat GPT into the Avatar we could probably do something similar here for the message itself because if we have a what was it if we have that background color happening then we can pass in this class gbt which makes it have that background color beautiful so with that done I think that's one example of it we are missing this one here the SVG that we had earlier so I'm going to close that off and put it in here as a check so if message dot user is equal to GPT and we pass in this SVG wonderful hit save on that we still have a bit of a problem set input is equal to input is coming up with a compile error shouldn't be left hand assignment so let's scroll down here and have a look what's happening so here is a set input but this is a value that is here set input so it should just work one change set input ah yeah I think because we're putting input in there let's close that off hit save that should fix it up so message is not defined and E is not defined interesting interesting so handle submit it's fine e dot prevent default e is here should work um and what was the other message here that we had a message is not defined on line 28. well yeah of course it's not I haven't done that yet uh okay okay so here I'm gonna do I suppose a few things first I'll create a draft message user can be GPT and message can be how can I help you today question mark so now I've got message I'm pretty sure because we also need a two Loop through that so here where we have our first message chat message we're gonna do this oh we don't need to do this we just do chat log we Loop through it and we close that off we probably also need a key so I'm going to do the key to be the index for the time being we'll refresh that so now we only have the e as not defined on line 50. uh so where's line 50. ah yeah e has to be in here okay I think that should cover it so we've got our first message how can we help you today we can remove the rest of this last chat message that we had and we could even set up an another example here just to make sure that these messages are showing up properly here it's going to be me I wanted to use chat GPD today hit save and we've got our first functioning message happening from our array inside of react which is great now we just populate this array with the API so what I'm going to do is a fetch request two to the API um combining the chat log array of messages and sending it as a message to localhost 3000 as a post so here we're going to do an await fetch as a post with the headers content type Json we're going to stringify that we're going to pass in our chat log looping through our messages and that is pretty much it then we're going to go response back and we'll console log that response for the time being at least uh now this all looks correct uh this stuff here is the main thing the message that we're sending over to the API is what I really want to test out so I'm going to save that and then over here on the API we should get a const and this will be the message from the body I'm actually going to sort of comment everything else out here and for the data I'm just gonna pass back the message that we currently get just as a test and this console log here I actually want to console out the message so let's do that uh we're gonna open up the console here go to react go oh actually we need to reboot the server first of all so let's jump back into the server which I don't know if is even running let's do node Index this actually has to be coming up alright so it's listening on Port 3080. for the API we didn't add a port 80 here 3080 so let's hit save on that we'll go testing here enter we do get our new message here instead of chat GPT or the one that we're building anyway but if we go back here uh in our client we're not getting a console log happening so let's see why that is so we definitely did a app post request but if we go here we can see that cores is probably not enabled so I need to enable cores which allows us to send messages to and from different ports and domains so to do that I'm just going to ask uh chat can you please add cores to express and we're just gonna do that over here is that adding it and body parser so I'm gonna just paste this in add a body parser and pores to express so here's body parser we're going to import it we're going to import cores and then here under app we're going to add body parser Json and Coors and that should pretty much cover that which is really cool because uh GitHub co-pilot you can see the benefit of how it works here where it just does a lot of the things you're asking for where you could normally type it out if you know what you're doing so let's do a test hit enter this time in console we've got back a message which is the data how can I help you today which is actually the combination of our messages and here we have that all in one big message which is perfect it's what we want so this means our messages are getting over to the API we've created and now we can start using them so here we have chat GPT we've got the prompt that we created but I'm going to pass in our message and this is the message that we want here for Max tokens I'm going to do something like 100 and temperature can be 0.5 we're going to get a response back here and this will be the text response and I'm going to paste this straight into the data but rather than calling this data I'm going to call this message and hit save on that here on the app now we're going to get a response that'll be called Data and data.message will be our message so realistically all we have to do now is add it to our chat log so let's go down here to our chat log let's do a set chat log we're going to set it to be the chat log but the user now will be GPT the message will be the data.message that we'll get back and that's it I believe now it should just be working so let me restart the server here I'm just restarting it manually node index.js and I will refresh here uh what can you do for me today hit enter and we should get a response back chat GPT is an AI powered chatbot wow that is working now with that done let's actually create the clear button so clear uh chats I suppose or chat logs we can do a function clear chat and then in here we'll do set state of chat log to be well nothing and then let's jump down here to the side menu that we have I think it's just where did we put the side menu here it is we'll do an on click and we'll just pass in that function so now if we go new chat it empties everything out which is perfect then on top of that we want to do a couple of things here for these messages we're doing quite a few set States um so I'm going to do a weight on each one of them simply because if you do them out of order it might actually have some complications I've noticed so I'm just gonna save that so now we're gonna refresh and then say this is a test reply success if it worked hit enter let's see if chat GPD comes back with a success so it has come back with some weird stuff uh let's actually have a look at what's happening on the back end here so if we go to the console here it actually does say how can I help you today I want chat GPT today index we have no more console logs so what I'm thinking is that something has gone Haywire during this process so I'm gonna console log out the message once more and call this message and then on top of that I'm also going to console log out in here what this is uh so these are const messages is equal to well essentially this chat log and it will pass that back in here as messages so essentially We're looping through the messages after we've set them we're joining them together I think I'm gonna do a dash n here so that it does a line break uh and then we're going to send them across save on that go to the client here restart of the client for node.js and go refresh so are you working here's our first one so we've got a response back but it's overwritten our other chat but let's have a look at what's Happening Here on our server so I had a bit of an issue here where these things are happening out of order so I'm going to fix this up a little bit first what I'm gonna do is over here I'm going to set the chat log here as a variable cons chat log new and I'm actually going to do that as a let and that can equal and I'll do this as an array uh and that can be the chat log itself plus this extra one that we're essentially creating now I'm going to set the input to be nothing and then after that I'm going to use this chat log here to create the new messages so messages I can just have as a word messages uh beautiful and then that will be based on the new chat log that'll pass in here and then finally we'll get our data and our data can be based on our original chat log new which is just over here plus the new message that we get back from the server and then we're going to set that all let's hit save on that and refresh let's go back here chat log is not defined so I am not calling or referencing the proper one here it should be called with a capital l so that is my bad let's hit save on that we'll go back and go testing enter so that is now waiting for chat GPT to respond and then it's updating in here as you can see so with that being a better structure we can actually go back in here go to set state we could probably just paste it in here like that um so that can be the new chat log and then let's jump back in here refresh test we get test popping up immediately and then we get our message here from chatgpt perfect all right so let's do a new chat this time I want you to pretend to be Steve Jobs enter so let's see what comes back this should be a completely blank plain thing hello there my name is Steve Jobs uh what are your tips to help me start a new business so I assume it'll reply as Steve Jobs here but uh have a clear vision and message know what you want yeah so this is now a completely vanilla version of well almost like Chad GPD and almost like an interface for open ai's playground but in a chat like interface so let's see how we can now customize this and add features and some of the things that you might not normally be able to do inside of here so the very first one is a let's actually jump into uh I suppose the interface here on our backend server and previously we had this thing here uh where openai gave us a list of engines we could use I'm gonna create an actual API route here called get and then I suppose engines or maybe models models might be better and what I want to do here is grab what models are being sent over from openai and then send them back to the front end as models we can start using for talking to chat GPT so if we go to open ai's options over here if we go to I think the introduction and we have a look or was it was it in introduction under API yep there it is uh here is that first one to grab the list of engines I'm going to grab that piece of text over here and I'm going to throw this in here and then I'm gonna do a uh Json or a response as a Json and we're going to pass that response in here which I assume will be the list of engines but I see assume that'll be data so uh engines or sorry models response dot data so let's hit save on that we'll restart node and this is forward slash models so here in our app what we're going to do is create a new function get engines and this will just be a simple API request which apparently is already filled out that's very impressive uh even with the right port and the right data I'm kind of scared how chat GPD just did that or at least good Hub co-pilot we need a button to call this but realistically I just want this to call as soon as we launch so what I'm going to do is I'm going to do uh let's do a uh use effect run once when app loads so we'll need to import use effect and then in here let's place it in use effect list engines stop fair enough hit save on that and then we've got a huge object thing that we've come back here from the server anyway this is under data data data okay so maybe data dot data is what we need refresh but anyway we'll jump back in here we'll open up the tools and let's see what objects we get back with so we've got our models back here and there's quite a few different models to choose from but it's called models.data so what I'm gonna do is I'm gonna create a new item in here as a set State a new variable that we're going to save and these will be called models set models and then for our models we want that to be an array and here when we get the engines and the data and I think what were they called they were called models data so we're going to call models data from there models data and we're going to set them in here great then I want to Loop them out I want to loot them out just here in the sidebar as divs so let's do a div class name equals models then I'm going to do a select and then option is models I think GitHub copilot is already predicting what I want to do here and it's even filled it out let's see if this actually even works uh so yes it has worked but but it doesn't list them properly in terms of their values I'm going to scroll back up here I'm gonna console log these out as well so I can see what they look like let's put that here in curly braces so we can run more than one command console log models uh this is what our model looks like we have an engine an object an ID I think the ID is the name of it so I'm going to use that to list it out so here in our select the key can be the ID and the model oh models model model ID model name Ah that's where it went wrong all right so model ID can be here too so let's refresh now we've got all our models here on the left hand side in a nice select so we can select what kind of model we want to use and this is just a list of models right now I believe we're probably using DaVinci but we could probably use say code and then we can chat with the code version of chat GPT which would be way better than just the regular version so let's see how we can do that so what we're going to do here is we're gonna also create one more uh Set current model and then we'll do current model here and we'll set this as a text of say adder or something like that um oh Ada I think it's properly pronounced then Set current model will be changing when we do a change on the select so let's go to select on change let's do e and we'll pass in set model to equal e-target value and this will have the value of current model updated then here under the request that we're doing where we're sending in a message I'm going to pass in current model as well for current model I'm going to pull that out of the post request here under request body and I'm going to place it here in the models so instead of text DaVinci 003 let's comment that out and instead we're going to pass in current model hit save on that and now let's jump back into here and the other thing we need to do is probably set the current model but let's do say um what model should we do a code model code DaVinci edit fix their log equal test let's see what comes back so that's come back with not exactly what I was looking for but uh in terms of what it should be doing I think we need to clear out at the chat then go what are you and let's have a look I'm doing a project I'm working on a project all right well um okay I think we'll have to jump into the server here and check what we're applying to and what the current model is so I'll do a console.log I'll do current model is current model hit save on that and then after that I'm going to doing your request but first I have to refresh this ah it's because we didn't reboot node I think but let's let's try this out so we'll do a new chat we'll use uh coding of prompt so the coding probed code crushman fix the code VAR VAR equals testing let's see what comes back so now we've got Pure code coming back from crushman so this is what we got back but now let's do a new chat and this time we'll do Adda paste this in and we'll probably get some nonsense yep because it's just not a coding example so now we've got a new chat and we've also had an option here for changing the engine that we're using for chat GPT which is very cool this should give you enough of an idea of how to build your own version of chat gbt on top of that I've continued to build this out and I've added it in the link in the description you can buy it for fifty dollars if you don't want to have to put it yourself together this supports the channel and it supports me I hope you guys enjoyed this video If You did leave a like hit subscribe and I'll see you in the next one thank you

Channel: Adrian Twarog

Views: 340,424

Keywords: chatgpt, chat gpt, chatgpt clone, chat gpt clone, clone chat gpt, clone chatgpt, code chatgpt, chatgpt code, chat gpt code, website, js, react, react js, programming, ai, openai, open ai, build chatgpt, customize chatgpt, build chatbot, chatbot, ai chatbot, build chatbot from scratch

Id: qwM23_kF4v4

Length: 62min 23sec (3743 seconds)

Published: Mon Dec 26 2022