Build ChatGPT AI Tool in React JS | React JS Project with Working Example using OpenAI API

hello developers are you ready to take your coding skills to the next level in this video we will be building the chat GPT version 2 from scratch using the open AI but this is not just any ordinary project we will be creating an attractive and user-friendly interface using react.js function based components and Tailwind CSS and we will be using the VJs which is an awesome front-end development tool and 10 stack react query for data fetching the surprises don't stop there at the end of the video we will show you how to deploy our chat GPT on Virtual as a full stack application so you can show your projects to other people and potential clients don't worry if you are new to some of these Technologies we will be walking you through the process step by step in a beginner friendly manner so grab your laptop and let's get started on building the ultimate Search tool foreign [Music] directory okay as you all know about what is the chat GPT if I visit its website here you can see this uh this is the type of look which igbt provides us here you can ask any question let's say I ask specifically for the programming uh what is the use effect in real okay now it answers me in some seconds it depends on the workload on the chat GPT okay so this is the type of interface it's providing so we are going to rebuild this application Why by using the apis provided by the open Ai and yeah we are going to make it more attractive in look so how we are going to do this and how we will deploy this at the end of the project this is a kind of interesting thing so the only requirement for making this project is the node.js you should install the node.js in your machines okay so currently the LTS version is 18 0.13.0 and if I go to my Powershell here so you can look what I am using I have to write node minus V and it is saying I am using node 18.10.0 version so we are also going to use the wheat for this project and here I am on the official website of VTS which is a front-end tool and just copy this command with npm so yeah I'll go to our vs code open the terminal and before actually writing this command I want to make two folders here in the directory the first one is the client folder and then the second one is going to be this server side okay now inside the client folder we should make all these changes regarding different end so CD client I should make the text bigger something like this okay so CD client now I am in the client directory and paste the command we copied from the vidjs and hit the enter button first of all it is asking us for the project name so let's say I am saying it as chat GPT 2.0 and I also want to include the YouTube but you can give any name you want and the package name is yeah the same one then select the get and JavaScript we should simply write npm install and it will install all the required app but there is a problem it gives error on npm install let's see why it's giving error here okay so basically it makes an other folder inside the client one so we have to fix this I am making it revealing file explorer here uh yeah here you can see we have a server then we have a client so inside the client I have all these things so I am making a cut from here and paste all these things right here now let's delete this empty folder so we have our all the client code directly inside the client directory let's move to our vs code here and yeah everything is good now inside the client we have the client site code open the terminal again and write npm install now it's installing all the required dependencies for making our initial template run let's wait for this okay so here all the dependencies are now installed to run this template we have to write npm run Dev and it should start on our port number yeah it's on this port 5173 we can simply press Ctrl and then click on this URL it should open here here you can see it is running on our port number 5173 with this starter template of the vgs the next thing that we require is to set up the Tailwind CSS for this project so here in the search bar I will write Tailwind CSS with wheat JS okay so on the very first link here I have all the commands to make this happen Okay first it is saying uh make a project we already did these steps now uh yeah we should start here we should start from here npm install uh Tailwind as a Dev dependency so just copy this command go to our vs code make an other terminal here and CD to client and then paste the command let's hit the enter button here it's installing the Tailwind CSS post CSS and auto prefixer these three are the dev dependencies now let's move back to the website and here make this command in our terminal just copy and paste and hit the enter button again okay so it is also set up now let's see what it is saying at the next okay it is saying we should go to Tailwind config so just copy all this code from here and in our directory search for the same file so yeah here it is I am paste I am first of all deleting all the previous code here and pasting the new one let's save this according to the instruction of the website and the next thing is we should search for the index.css and paste all these things so yeah go to the index dot CSS and we should remove all the previous code and let's put this okay let's save this and the next thing is now we can try our Tailwind live uh if I go to my local host here you can see the styling is now distorted because we have removed the index.css code but that's okay to test our Tailwind I am going to app.jsx and removing all these things here I am making a div with the class name of padding let's say eight okay I wrote the four air padding should be eight colors should be let's say red 500 and here it says subscribe then keeps code okay let's make the text bigger let's save this and go to our localhost okay here it is saying subscribe to Zen keeps code but the classes are not applied here so let's see why the Tailwind is still not working if I try a very simple thing which is stopping our server here and then running it again by writing npm run Dev and hope for the best now okay yeah so now the Tailwind is applied it's just the restarting of our local server and everything is set up now now we have to clean our directory which comes with some pre-template of the vidges so for this first of all I am removing this you State from here then remove this logo and also this import statement of use State now let's go to index.css we already deleted the code from here and inside the main.jsx uh okay I think everything is good here nothing too much special and inside the assets we have this one so I can easily delete the assets and finally inside the app.css I should also delete all the thing that lies that lies here okay if I check my browser now so yeah nothing is broken but the styling is no more here we are only having the padding and the text color which we described in detail with CSS classes on the final step go to the index.html and here instead of our wheat plus react I am saying chat GPT 2.0 as the title of our website and uh yeah we are good to go with this let's actually start building our tool so I am going to app.jsx and here remove all these things and start from the very basic thing so first of all we have a parent Diva inside the parent div we will have three main parts so I am making comments the first one is header so make a div for the header now and with the div I should also write some text inside the div and in the second step we have the body so Dave which is saying body and the last thing is the input where we can write any query and we can ask that GPT so we can say it as only input and here div inside the div say it as input okay let's save this and yeah here I have all these three things header body and input note that as my display is too much huge so I am making it as zoom into 400 percent just to make it visible but of course we are not keeping this for long and I should make it side by side let's style the most parent div first so here I am going to give it some class names and these class names are on the basis of our Tailwind utility classes by the way if at any point you find yourself lost and you do not know what is the relative utility class in the Tillman CSS for a specific CSS then what you can do you just have to go to tailwind.cs sorry Tailwind CSS official website hit the Control Plus K and you can search anything like I search for a lot of CSS properties like text overflow just click on this and it will give you the explanation how you can cut how you can convert the Overflow hidden into a relative Tailwind class which is the truncate so now let's style the most penalty first of all I am giving it a background color and to give any custom value in the Tailwind what you can do you can make the scare braces and write your custom value like I gave it a color of this value and then I am giving it a height of full screen and I am also using an extension which is a very cool extension here if I search for the Tailwind sorry Tailwind CSS here you can see that I am using this extension what it essentially do it give you the explanation of each utility class like I have used this utility class at screen from the Tailwind CSS now if I hover on this it is giving me the explanation what H screen do it it do height as a hundred percent of our view height okay so similarly if I hover on this now it is saying it will give you your background color a property like this and for more what you do it will give you suggestions while writing the Tailwind like I uh p y and now it is giving me suggestions for py0 py1 and it also giving me the explanation what they do okay so I am giving uh the vertical Direction padding of value 6 with the position relative and on the small screens I want to give the uh padding on the x-axis or of value 28 okay now the text inside the app should be white with the Overflow hidden okay and then the display Flex with the flex direction of column basically I am translating all the Tailwind utility classes in a pure CSS so you should not be confused what I am writing what is the meaning of all these things like when I wrote the flex then I said it is display flex and this is the flex Direction column you will get use of all these classes once you start writing the Tailwind okay the next thing is I am giving it justify between and then align middle so what alignment will do basically it will align all the items in the middle of screen why I'm explaining this it's too much self-explanatory and I am also making a our code wrap turned on which can be done by Alt plus Z so here our chord so here our code is wrapped inside the view so we don't have to scroll in the X direction again and again now if I save this here you can see it has a very beautiful background next I am going to Target the header of our application which is chat GPT 2.0 if I save this yeah and for our header I am giving some class names of upper case with the font weight of gold yeah save this okay so textile text size should be changed but before giving a specific text size I should make my zoom value normal which is 100 percent yeah I know it's too much small for this screen but if I make the text as double XL now it is having a good weight and thickness okay on the next I am making it as text Center with the margin bottom of three yeah like this okay there is another thing which is very attractive in our application is the background gradients and still we have not made any gradient in our application so let's first do the gradients before moving on above the header I am going to make two divs and I'm also making comment of gradient sale let's format the code and for the first gradient like this I am giving it a class name of gradient 0 1 with the Z index of 0 so it should always behind anything else the and the position absolute because our parent is position relative then I will position my gradients according to the parent div so I am making it as position absolute similarly I am just copying this and pasting it here but instead of 0 1 here I am saying it as 0 2 let's save this now now I should Define some properties for gradient 0 1 and gradient 0 2 so I am going to my index dot CSS and for the gain 0 1 I am making position absolute with the width of 200 pixel height of 238 pixels top it should be minus 6 REM distance not the minus 6 RM it should be zero because the gradient should be on the top of the screen with a very beautiful background color so I am giving it a background value of this but then I am applying a filter of blur so it should not be a thick or solid div it should be a blurry or you can see gradient so let's save this here and yeah here it is okay I miss the spelling of blood now yeah here you can see a very beautiful blur is applied on our application similarly I am going to do for the gradient two so here for the gradient too but I will say I will make a position absolute width of 200 pixel height of 238 pixels and yeah here I should give top of minus 6 REM with the right value of 0 pixels because this gradient should be on the right side not on the left side because on the left side we already have the gradient 0 1 okay let's format the code for the next uh I again have to give it a background color which is something like this with the filter of blur and I am giving it 190 pixels let's save this and yeah here I have the Second Blur in my application let's get back to the app.jsx here and now we should start code our body component for making the body component I am opening my directory here and inside the srci I'm making a folder with the name components as we are going to use functional components of the react and here I am making body dot jsx okay here you should write r a f c e for a quick react fat Arrow function let's save this and inside the app.jsx here inside the body I should call this function chat body yeah let's save this and here I am seeing A disruption that I have already specified the justify between but still my body of application is not correctly in column [Music] okay so there is a problem here I have misspelled the justify spelling sorry for this mistake yeah now the three components are in their respective positions there should be the chat body and there should be the chat input and currently we are working on the chat body okay so inside the chat body I am removing this pre text and here I am making a div with the class name of flex and also the flex direction should be column because of course in the body there should be messages and all messages should be in column Direction with the gap between the you know relative messages or you can say the gap between the messages should be for let's save this now let's make some dummy messages inside our body I am making dummy messages just to make you understand how the code is going to work because for now we are just building the structure we are not making anything Dynamic for now we are going to have two entities in our application the one is client and the other one is the AI which is going to give you the answers of every question so first make a message for the client here I am making another div and for this day I'm making free tag notes that whatever you are going to write inside its body it will have the Escape characters so instead of writing the Escape characters directly on the screen like if I write here backslash n without the pre-tag then it will be displayed as it is but if I write inside the pre-tag then pre-tag notes okay backslash and do the next line functionality so this is basically the pre-tag and it's built in in the HTML I am explaining this because most of the peoples do not know that okay so inside the pre-tag I am making a span and here say hi chat GPT and can you help me like this one here we have our client message and then here will be the AI response and for the AI response again I am using the same format I can help you with anything okay so here we have the two messages one from this uh sorry the client one and the other one is the AI let's style them for the client one here I am writing the class name it will have a border of something like this yeah yeah it will have border like this then the break word so break words make the Overflow wrap as the break word with the border of two okay make the word wrap on then the rounded XL it will give it a border radius self end so it will align itself at the end of the flex block with the padding X of 3 and the maximum width that it can take on the screen is the 80 percent of the total parent container let's save this and here we have our first message and here we have some styling applied on the client message okay I believe it should also have some padding on the y direction also so padding y 3 also for the pre-tag here I am making a class name with the white spaces pre-wrap like this now now let's get to the AI message response and here uh what I will do I will give all the same class names here so class names I am just copying all these class names pasting them here but I am making them inside backticks rather than the simple so for using the backticks we should wrap them inside the curly braces okay if I save this here you can see both have the same styling which should not be the case to make it different on the very top here I am making a constant AI style I will say its background should be white and the background opacity is going to be the 40 with the backdrop color so sorry the backdropeller not the color so backdrop Buller is large with a drop shadow MD okay now I should concatenate our class names with the AI style for the AI message so here within the dollar sign and then paste this and here we have but still there is a problem that our this message should be on the left side not on the right side so to achieve this I am making a very tricky thing just making the margin right Auto and boom our requirement is completed now now I am again going to app.jsx and for the wrapper of our chat body here I will give some styling uh first of all I will say it should have the height of 90 percent okay and then our flow Auto width should be full with the maximum width that it can take is the sorry for Excel and then the minimum width that it can take it should be 20 REM like this and the padding on the y direction should be 8 the self Center if I save this but I am seeing a very huge problem here is that our text is not looking good and there should also be some distance on the x-axis so for that thing after the py here I am saying the PX should be 4 let's save this yeah now it's looking good so let's fix the font for our application I am going to index.html here and after so after this meta tag and basically before the title here I'm making a comment importing not the title but just if importing fonts for the chat GPT yeah and here I am pasting some links I will provide all these links and all the required assets for this application we are downloadable link you can simply download all the assets and all these links just by pressing the link and they will be downloaded to your machine so if I save this here of course I have to change my CSS so it should apply these fonts instead of the regular one so here inside the app.css I have nothing and uh I believe that we are having app.css without any reason so we can simply delete the app.css and we should also remove its reference from here so it should not give any kind of error okay and then go to the index.css and on the very top I am saying for everything make the margin 0 padding zero box sizing as the Border box these are basically the default styling that should be applied in your project and font family should be something like this this is the name of our font that we are going to use and then the scroll Behavior smooth let's save this and yeah our font is successfully applied in our application how cool and how easily we are making progress in our application so if you are liking this project and you are super pumped for completing this project then please subscribe the channel right now give a thumb up for this video so I should feel motivated for the next projects now let's work on the last component of our structure which is the input so again inside the app.jsx here uh I should make a component first inside the components so here I am making chat input dot GSX rafce for the fat Arrow function save this here inside the app.jsx inside this div say chat input okay I'm making like lot of typos here okay here let's save this and here it is saying chat input is there before going to the individual component I should style the wrapping div so for the class name I am saying which should be full and the maximum width should be for Excel with the minimum width should be 20 REM yeah and the self Center let's save this I know there should not be a lot of difference here uh yeah go to the chat input and instead of this pre-text here I am making a div inside the div I should have a text area and remove all these things okay and it should be self closing like this one and the last thing should be image and for the image source what I will say I will say it as send dot PNG it lies in the public directory okay so for now inside the public directory we have nothing I am pasting an image here I will provide the link in the description of the video of course you can find it easily on the internet which is this image send dot PNG for the button of our chat input and with that said I am also including a lot a loader dot give so this is basically our loader when the open AI is going to think for the response so we will use this gif okay let's close this one and also this now if I save here you can see this is our text area and here is our button it's time to style these things so for the parent div here in the class name I am saying the width should be 100 means the full with the background white and the background opacity I think the opacity should be 10 with the maximum height that it can achieve should be 40 rounded large padding in the X Direction 4 padding in the y direction should be 4 yeah let's save this I want to make our flow as R2 and the position relative with the no no I should not play with the scale for now okay yeah let's save this and I have a scroll bar here okay let's go to the styling of our text area I am making first of all it's border zero basically the boundary of our text area should be invisible it should behave that our this classy div is the text area so for achieving all these things I am making background transparent and also moving the outline so whenever somewhere clicks on the text area this outline should not come let's save this yeah here you can see it's invisible then I am saying it should take the width 11 by 12 so 11 by 12 means 90 91 percent of the total div so let's save this now it is taking 91 percent of total div and for this image I am saying it as silent button for the alt attribute and for The Styling its position should be absolute and from Top it should have a distance of 4 but the most irritating thing which is making it to look not a good image is the bits so here I am going to specify is width as a 20 pixel so as soon as I save disk here you can see now it is having a proper size at least but it is behind our text area so I should make it position right three now it is also in a proper direction on Hover the cursor should be pointer and it should follow the animation of ease in with the duration of 100 why I am making all these animation properties because I want whenever some someone hovers on this button then it should scale up to one to five okay let's save this also I want to refresh my screen here and here you can see if I'm hovering on the button it is actually scaling up of course our text area is not looking good in terms of its height because it's too much height for the input and also the button is looking not in the center in the text area I am going to give a property of rows and for the rows it should be only one by default now everything is in the center and it is actually looking good but I am feeling that there should be some space between the screen border and the chat input and same thing for the chat body so inside the app.jsx okay here after the PS4 small screens I am saying a general value of ps16 for all the screen sizes and yeah now it is looking good at least the distance from the border but what if I make them switch for the small screens it should be 16 and as a general it should be 28. okay it's not looking good okay so this should not be the case I should play with more values let's say 18 here not 18 is not applicable the 16 is applicable and it's making too much 14. 12. yeah I think it's looking good and if I switch it to the big screens yeah it's also looking fine for the big screens and for the small screens like this for the mobiles again it's also looking good here so uh with the PX 12 for the normal skins and for the small screen px16 it's working fine so our structure is completed here you can see we can type anything inside our chat input and a scroller become enabled where there is a lot of input you can see and when you revisit the website there is a very beautiful initial look so it's time to implement the logic within our application and before making any type of logic in the front end first we should make the back end so let's make the back end now so I have closed all the files and now I am on the root directory and let's open our terminal by pressing Ctrl plus J and I am making another terminal here and let's move it to This Server directory okay now I am inside the server here simply write npm in it to initialize a package file yeah the package name should be server and just press enter for all the questions here okay so now if I open This Server here you can see a package.json now I have to install some required dependencies so write npmi the first one is body parser the second one is course dot EnV and express server with the nod Mont to see the changes without restarting the server and open AI hit the enter button it is installing all the dependencies now okay the dependencies are installed now let's close the terminal and go to package.json here inside the scripts instead of doing this test command we have to write a command start and for the start command execute node mon index dot JS yeah as we don't have any index.js for now so let's make one inside the server I am making index.js index.js is going to be starting point over server let's save the package.json and now start decoding the whole server side inside index.js so first step first let's import all the required packages by writing imp it is a shortcut of import statement hit enter button and I have to import the express server so so yeah okay by the way as we are going to use these import statements so we have to make a change in the package.json and here I am writing the type of our app so inside the double mission it should be the type is module now we can use these import statements otherwise we have to use the required statement which is an old method to import the packages the second thing is going to be the course from course Okay the third one is Galaxy the third one is body parser from the party person yeah the third one is going to be wrong dot EnV only from Dot and we import the EnV okay and the last one is to import some packages from the open Ai and add the last we have to import some classes from the open AI so import from open AI the first one is configuration and then the open AI API yeah so these are all the requirements for making our server now let's initialize the app by saying const app is equal to express the default method to make a simple Express server and then e and V Dot config so the next one is app dot use it should use the course method so that you should not raise the warnings of cross origin next thing we have to configure is yeah body parser dot Json and I should also make one now we have to specify our port for our server so I will say app Dot listen it should listen on the port 3080 and then when it listens it should say a very simple thing console log listening on Port 3080 yeah like this and to test the route is a kind of dummy route just to test our application I will say on the default route there will be a request and there will be a response and in the response just just send the hello world okay let's save this it's time to finally start our server from the terminal so open the terminal again and here please be careful that I am in This Server directory okay here uh simply write npm start and when I write npm start as you remember in the package.json here for the start script we have Node 1 index.js so it is going to start the index.js with the node mode so as I hit the enter button here it is started and it is listening on the port 3080. now we have to test it so open the browser and localhost 3080 hit the enter button and it is saying hello world means our server is running fine now our next task is to make a post route on the backend so we can actually ask questions on the post route and we will receive the response as we do on the original chat GPT so to make this route I have to go in my index.js and here I am making an update dot pose out but before making this post route we have to fetch our API keys for integrating the open AI API okay so to fetch the API keys I am going to open ai.com here you have the button for the API click on this and it will ask you for the login so if you already have an account then just simply go login other otherwise you can do the sign up so I am doing login here and such interface will appear in front of you to get your API key click here on your profile button and then view API keys okay and then here you can make a new API key so basically I already have two API kids but for this tutorial I am making a new one and be careful these apis Keys should be private for you but for the sake of tutorial I am making them visible but of course after the tutorial I will delete those API keys so here I am creating a new one just copy this API key click OK button go to your directory here and just close all the keys and inside the server I am making a new file with the name dot EnV inside the dot EnV I am making a constant with the name API key and this API key should be equal to our newly generated API key let's save this okay so now it's time to embed this API key in the configuration of our post route so before making any type of Route we have to set up this configuration object of our API before this app Dot listen I want to configure my API here I will say const configuration is equal to new configuration and inside this we have to pass an object as the parameter and this parameter and the parameters are two the first one is the organization for the organization you again have to paste the key so go to open Ai and here in the settings you will find your organization ID just copy this and paste the ID here now for the Second Step you have to paste your API key as we have our API key dot EnV so to import this we have write process.env dot API key okay so our configuration object is ready now to use here I am making const open AI is equal to new open AI API configuration and this configuration is this one that means our account is fully connected to our server next task is to make the post route and it will better if I make comments here I configure open API and then this is a simple dummy route here listening yeah like this one and this is a dummy route to test and here post route for sorry for making requests cool start this by writing app dot post as we usually do in our node Express server and then I have to make a async function async which is having request and response as the parameter and then in the body I will fetch the message from the body so message is equal to request dot Warrior and then make a try catch block and first of all also complete the syntax I will console log the error in case of any error and also response Dot send error with the status code of 400 means your request is not able to be complete and then in the try block we have to implement our Logic for the response of this message we got from the client side okay here I am saying cons to response is equal to await open AI Dot there is a method called create completion from the open Ai and in this method yeah here we have to pass some parameters these parameters are basically the specifications and first specification is the model we are going to use so we are going to use most advanced model up to now so this is text DaVinci 003 which is the most trained model and on this model the current GPT version is working then for the question we are asking it should be the third one should be the maximum tokens we can give in the answers it is 100 it will be the amount of words the model should give in the response of any question and the maximum amount is 100 now the temperature is 0.5 by the way you can learn about all these parameters there are much more parameters so you can read about anything in the documentation here scroll down to the API reference and here in the introduction you can learn about any here you can see in the request body there is a prompt model suffix Max token and there are many more things you can learn about them okay now the final thing we have to send this response so response dot Json should be equal to message response dot data actually in the response it is not providing us a single answer it will provide us some choices from which we can select and I am going to select always the first choice dot value and I should remove this thing and remember as we have imported the dot EnV API key here inside the configuration so we have to restart our server so open the terminal here in the terminal press Ctrl C yeah and again start by writing npm start okay our server is working fine it's time to change our front end to send requests to the backend and then make the educate changes on the front end as the response let's do this close the terminal and I am closing all the files here let's go to client side again inside the srg open the app.jsx okay so here at the very start I am going to make a use State like this const chat set chat basically this chat array is going to contain our all messages in a single array so use State imported from react and by default it is going to be an empty array means in the initialization of our application there will be no message in our chat body then of course we have to provide all this chat to our to our chat body here so I am saying chat is equal to chat and before providing anything to chat body we have to insert something inside the array so chat body can render that to make this happen we know that there are two sources of messages first one is the text so the chat input and the second one is the open AI response so let's start with the chat input where we will ask some questions so go to the first save this and then go to the definition here okay now in the chat again I am going to make a use state so so const value is equal to set value as this is a use state so yeah you state imported from react and by default it is going to be an empty string now we are going to make text area as a controlled input so I am saying the value should be equal to Value which is U State and on change we have to change sorry we have to control the change of our text area by a very Legacy method which is the event method so pass the event as a prop and then set value yeah e dot Target dot value so this is a very old method and we are still using it because we can rely on this method okay now I also want to specify the type of our text here so type should be text like this let's save this and let's see if there is anything breaking or not okay so everything is good till yet I should also make my front end side by side now because we are not working with the backend anymore and now it is much more visible we don't have to switch windows again and again okay now this image is serving as a button in our chat input here so I am going to make something here The on click method I will say handle submit okay handle so by the way now if I write anything inside text area it is going to be stored in our value which is our state so on handle submit I have to define a function with this name cons handle submit a react Arrow function and as the initial step I will check the value so I will say if the value is equal to null string means empty string then return and do nothing however if this is not the case then send the message so I will say send message as an object where first is the identifier means from where the message is originated as this message is originated from the user not the es I am saying sender is so user and then message is going to be the value of our chat input and after sending the message set value as the null or the empty string okay we have to Define this method send message in our app.jsx so first I should receive this method send message here let's save this and inside the app dot JS here in the front of this name I am writing send message as send message now let's define this function inside our app.jsx so const this name with the fat react Arrow function and here I will wait until our state is updated with the newly inserted message so for making this I have to make this as async and receive the message in the message prop and here say await promise dot resolve set chat and then I'm taking previous value again as a prop destructing the previous value and adding the new message so this is a very simple method to do let's save this okay here is a problem handle submit Ctrl C okay this should be the send message not the handle submit I data mistake here let's save it okay everything fine now the chat body as we declared the chat body should render the messages from this chat array and for now chat body is rendering messages as a static message so if I go to chat body we have to play with this logic here so I am making all this thing in a comment and here on the very top of our component I am receiving chat in a prop and then let's remove this client message heading because I am rendering a logic here I will say chat dot map and for each message along with its index to return a function and in the function I want to return everything that is this one so Ctrl C Ctrl V yeah let's formative code again here and delete this thing from here inside the div I want to give it a key of I so it will not raise the warning of not using unique key for each render okay I should open the word wrap on and here inside the span instead of the default text I will say message Dot message let's save this now if I try to write anything in my text area Zen is here click on the send button so our text area is cleared and message is inserted in the chat body of course for now there is no animation and uh on pressing the enter button it is doing uh enter in the text area not which is not sending the message so to fix this Behavior I have to write some logic in the chat input and on the text area I am saying on key down so it will check each key stroke and then against each keystroke it will check if it will say e dot key code is equal to 13 which is the key code of 13. if this is the case and E dot shift key is not enabled then do the handle submit instead of inserting a line in the text area and why I said e dot shift key should be equal to false because if user really wants to give a new line then he should be able by writing this then shift enter is then shift enter here so here you can see I am able to enter a line new line if I want by pressing shift enter but if I don't want like if I just write Zen and press the enter button okay I have to save this first okay so here if I write Zen and press the enter button here you can see now if I write anything and I can give an new line by the shift enter so I think it is pretty much clear to you let's see if it's your website okay and again I am inserting a new message I am then here but this is the case when the message is from the sender but we also want when the message is coming from the AI then it should start from the left side and the AI styling should be applied so in the chat body and here I am wrapping all the glasses inside the back tick so there is a back teeth there is a back tick and then wrapping everything inside the curly braces like this at the end of The Styling uh here I'm writing the logic I will say if message dot sender is equal equal to AI then return the AI Styles otherwise it will not run the AI style so let's save this of course there will be no difference because for now we have no response from the AI sides all the response system is all the chats are from our text area like this is an other one here and here you can see all are here we should also remove all the comments from here let's save this and format The Code by shift altaf again so it becomes more readable for you okay it's time to write an API method for sending our messages to backend so here in this structure in the SRC I am making a file with the name API dot JS inside the API dot JS I am writing a function export cons fetch response is equal to open the word wrap in the prop I will give chat as a prop and make this function async okay let's it's clear for you now and then following this method I am making a try catch block here first of all for the catch block if days and any error then I'm simply console log error like this and in the try method I am saying cons to response should be equal to fetch and we have to fetch from our Port 3080 where the server is running so I will say HTTP and localhost 3080 which is the port of our server and then the method should be equal to post because our route is expecting method as a post then the headers I think you pretty much know what is this thing this is the basic format of sending requests to backend okay content type application Json and in the final thing there comes our body so in the body let's see Json dot stringify because you know whenever we are sending requests to any server we have to send our data as a stringify Json object okay then in the message I am saying chat dot map remember the chat is coming as a prop so I am mapping all the messages here so chat dot map for each message Dot message here and then dot join for each message I am joining them by a new line okay you might be wonder why I am mapping through all the messages why I am sending all the messages we can only give the math like if I give a message here I am Zen here and then I give and other messages and other one here so this and other one here so I should only send this message not the whole body but the logic is as chat GPT is able to remember the context of our chatting so it will give you more accurate answers if we provided the whole array means the whole log of our chat instead of just giving you a single response so it will give you a more nice experience for the end user if chat GPT is able to remember the previous things and you know providing the information according to your context okay now it's pretty much in the body of our fetch at the end I am saying cons data is equal to response dot Json and then return data okay so our API dot JS is completed now it's time to include a very cool tool which is named as 10 stack query file search on internet 10 stack react query here here you see all the details about this it makes the process of tracking the loading State the final State and any pending State and it also manages even the cashier for you so it manages all these interaction with the back end by itself we don't have to write a lot of view States so you will know about its benefits when I actually going to use it so inside the app.jsx here on the very top I am importing use mutation from the react query so import from the react query okay so what I have to import a hook which is called use mutation but there is a problem because still we have not installed the react query so first install this by Ctrl J on the front end okay let's make another terminal CD to client side and here write npm I react query so react query is installed now we can move on close the terminal here and we should switch to our application now the how to use the use mutation hook after this you state on the top I am making a mutation and then using a used mutation hook I am first of all writing a mutation function and this function is basically going to be a react Arrow function which is having no nothing as a parameter and on return it will give us the fetch response data from the API okay and because our fetch response is expecting the chat as the input if I go to api.js here you can see we have to give chat as our input so I am providing our used State chat and then it will keep track of the state of our function whether it is loading whether it contains data and we can use the states like I said on success here on success there should be some data and with this data just console log the data in our terminal and similarly we can also use the function on loading I believe it is on fetching no it's okay yeah these are not the loading but on error function so you can specific so you can specify any kind of error messages or toast messages on any kind of error but this is not the scope of our current application let's see whether we are able to see these mutations or not to use this mutation constant what I will do here I will say after okay again there is an error that no query clients use Query okay yeah they is a very important step with that is we should do to you in order to use the react query which is to set the query client as a wrapper of our whole application so as our app.jsx lies inside the main dot jsx so here I am going to do some changes at the very top of this file let's close the directory here at the very top of this file here I am going to write some imports so I am saying import the query client provider and query client from the react query now we have to wrap our app.jsx so here I am saying query client provider now to enable our client here I am saying const query client is equal to new you recline like this we have to pass this QR client as a parameter over here while this setup is going to be same for all of your react applications so you can just remember this method or you can easily found this in the documentation of the 10 stack let's save this yeah our application is again ready because we have made the query client provider and QD client now inside the app.jsx in order to use this mutation we have to call this so after setting the messages I will say mutation dot mutate like this let's save this okay here I am sending a message hi chat GPT version 2.2 hit the enter button I should open the console now and there is an object that I received and this is saying request field with the status code 404 so guys I did some debugging and I found some potential errors in our code due to which we are not getting the response first of all the model name we have misspelled it there should be a not the E first the biggest mistake is this one now the second mistake is by small that here instead of value the key name is text now if I save this and I am opening the terminal here means the console and I am sending another message how are you chat GPT let's hit the enter button and here it is giving me a reply in the message I am doing well thank you for asking yeah a very good response for asking how are you so our backend is working fine now now we have to consider our app.jsx okay so instead of just making a console log here we should do something to add this data in our chat array so that our chat body should be updated so for doing this what I'll I'll say our set chat should be now okay first of all it should take the previous value as the parameter and then in the array set the previous value as well and add a new object where the sender is going to be the AI and message is going to be the data Dot message okay now uh here I have applied some GSX because sometimes the chat DBT provides a response not a chat GPT but the open air provides response where there are a lot of empty spaces on in the start of message so I should get rid of these things so I am writing a very simple GSX here that on the very start which we can write this then double backslash n if there is a pattern which is following like this then replace it with the empty string okay I should open the word wrap on empty lines on the start of message then replace those with the empty string let's save this and now if our there is a response what are you doing now okay here you can see there's a response this is not a very good response from the AI let's refresh the page and what is react.js so here's the reply from the open AI of course this is not in the perfect place the Overflow is not handled here first of all let's try to figure out why this is behaving like this it is going out of div so go to chat body and here we have to work with the class names again the very first thing uh here I have made a typo it should be white space pre-wrap if I make this correct here you can see now everything is inside the div so this is a very very easy solution for our bug now if I make an other message uh can you give me a code which should be very simple okay here remember this that I am not specifying that you should give me the code about react but I'm just asking can you give me a code which should be very simple and it should pick up that I am asking about react.js now if I send this message here and let's hope okay here you can see this is giving me code about the react.js a very simple my component which is having a hello world message so how easily it is remembering the context of our messaging and providing us the correct results now it's time to add some kind of Animation when the new messages are going to be add in our chat body for doing this here I am importing a very cool Library first of all we have to install that Library so again inside the client I am installing a package and PMI at the rate form get Auto animate hit the enter button it should be installed very quickly here it is installed now I am importing this package in our application so close the terminal and at the very top I have imported the auto animate from the auto animate Library let's see how I am going to use this first of all uh here okay yeah yeah here after the AI style I am going to make a ref which is saying parent and for the parent I am saying the use ref should be null now on the use effect you know that use effect is rendered at the very start of component so uh means when your component is rendered the first thing that is going to be happen is the code is going to run which is declared inside the use effect I am giving the dependency as parent and here I will say parent dot current and R2 animate this to parent dot current okay it is giving me an error on auto animate again why this is doing so okay so this thing here I have written the seven okay so everything is pretty much clear now I have to give this user okay this thing use ref is not defined so Auto Import it from the react let's save this again now I have to give this ref to my parent component here so our most parent div is ref and yeah this is equal to the parent I think this is pretty much we have to do for making this animation let's try our messages let's now say what is current time in USA and here you are seeing a very smooth animation and very smooth animation in response from the AI okay and uh where do you live [Music] so area I live in California USA it is telling lie what do you know about biology and in the response it will save me okay it is taking time and I just came to know that the open AI is experienced a lot of server load from too much users around the world therefore it is slow okay now we require when the open AI is thinking about the response then the chat input should become disabled and there should be a gif which should show the loading state so to make this happen I am going to app.jsx here and for the chat input here I am passing a prop loading and for the loading we can track our loading state by writing mutation dot is loading okay we have to receive this in the chat input okay yeah here inside the chat input along with the send message there is the loading State and I can render all of these things in a logic so here in the logic I am saying if there is loading then instead of showing all the text area and all these things we should see an image okay like this and image source is going to be the loader dot give the width no I am not verifying any weight I will specify the class name that width should be 8 here with the margin Auto so it should be in the center I should make the text bigger like this okay now it is give me error because there should be a parent component so I am making an empty node here the closing tag should lie after this image let's format the code again here save this and open the app.jsx is already saved now I am writing another message which is saying what do you know about let's say fat Arrow function in Js okay and I again made a typo in Gs so sorry I forgot to have a look at the text area I am making another input what is your name here you can see our chat input is showing a loading indicator if I make the screen bigger so you can see it more clearly no you are telling to lie and here you can see this is the loading indicator and then we are getting our response so this functionality is done now but there is one thing that is irritating me too much that whenever new response is coming from the open AI then the chat body is not scrolling to the bottom of the uh you know our application automatically we have to go to the bottom of application with this scroll bar like said uh no you are okay so here you can see when the response come we have to go down by the scroller and then we are able to show the response so then we are able to see the response to fix this again I have a solution for you inside the chat body dot jsx where we are mapping through all the messages okay so here we are mapping through our all the messages and at the end here here let's make the text bigger I am making a div and for the div I am giving a ref of let's say the bottom ref and the class name is height three okay so height 3 is basically 0.75 RDM now I should make this ref where I have made the parent wrap so there should be bottom left which is use ref and at the start should be none now I am going to make another use fact for this use effect I am saying only for auto animations so it is handling only the animations logic and the Second Use effect for scrolling bottom and for this one here is the huge effect I am saying bottom ref Dot current scroll into view scroll to view and then the Behavior should be smooth yeah like this and I am adding the dependency as chat array so whenever there is a change in our chat this use effect hook will make our chat body up to the bottom of the screen so let's try again if I ask a question there are how many planets in universe here you can see it is automatically scrolling up to the bottom of our body and this is very nice to see this is the kind of automatic effect okay the other irritating thing in our application is the scroll bar the scroll bar is really not good to see we have to change the UI of our scroll bar so to customize the scroll bar I am using a very famous npm package which is which is the Tailwind scroll bar and here you can see there are many number of downloads and they are increasing day by day so to install this I just have to copy this command from here go to my code again open the terminal and just paste this command like this hit the enter button okay okay so it is installed now now there are some configuration to use this so again I go to its documentation here and here it is saying we have to copy and paste this line into our plugin which inside inside the Tailwind config so inside the tail made config here inside the plugin I am pasting this line let's save this now I have to customize my scroll bar in app.jsx as you know that our chat body resides inside this div so I should modify this wrapping tip of that body to make the styling of scroll bar so let's see what I can do with this Library I can say scroll bar color should be first so scroll bar some color should be slate 400 and then also scroll bar variant should be thin which comes with the dependency and then control bar track color so scroll bar track should have a gray color with the less a transparent property okay the next thing is the Border radius of scroll bar for scroll bar yeah borders should be empty okay let's format the code I should remove this extra line from here let's save this and see what happens in our output in the chat DBT I am making some random cat let's say okay so yeah here you can see our scroll bar is completely customized now and there is an issue with its border area so let's see what is the tissue scroll bar so they should not be the Border they should be there rounded let's save this again and here the border of scroll bar is rounded which we exactly want so our cat DPT 2.0 is ready to deploy on the internet and we are going to deploy it as a full stack application on the word cell or absolutely free let's see how we can do this so here I am on the versal.com you should first make an account here and you can easily connect your GitHub account with this virtual and this is too much obvious so I am skipping the steps of connecting your GitHub account and making a new account on the WhatsApp by the way this is my dashboard and these are my previous website that I shared on the YouTube so some of them I also made deployed on the virtual now let's deploy our current project I am starting from the back end first so here in my repository I am closing all these files and what I'm going to do I will deploy the client side and the service side separately okay so there should be two deployments on my virtual 14d so one for the server and second for decline so what I am doing here I am making a reveal in file explorer so yeah here and I am closing this instance so I'm closing this instance I am going to this server and open with code so yeah now I am separately in a server repository I have to make a new file in this repository with the name virtual dot I assume Json let me confirm again is it versal.json or something else okay so this diversal.json we have to make this file so that virtual can recognize this is a server function okay because mostly they expect that we are going to deploy our react application with the app.jsx or all these setups but this repository is different we have to make a continuous calls to index.js you can say it as server function so therefore we have to Define some properties so they can recognize that the first one is the version so version 2 and you can give any name to your server so let's say I am saying node.js now the third one property is builds so in the build there is an array in the array you can specify the these properties like sources index.js because in the index.js we have defined our all the logic and routes okay then there is routes so for the routes again we have to Define uh object here so I am just pasting it like this and this is the total setup let's save this now I am going to my GitHub and here initialize the repository I am giving it name as initial okay here's a problem that it is saying there are 858 files to be pushed to GitHub and this is happening because we have not made any git ignore so here I am making a new file with the name dot kit ignore from where we can get this kit ignore again if I go to my file explorer let's go back in the client side here I have git ignore so just copy this and paste it inside this server yeah replace the file in destination now I have a git ignore here and here you can see now we have only six file to push the GitHub so it push to the good GitHub let's make all the changes make a commit here and publish it as a master branch and I am giving it a name of server chat GPT and I also want to declare it as YouTube and for now I am making the repository as private so let's see the enter button so code is pushed now now I am going to my browser again in my virtual dashboard here I am saying add new and add a new project as my GitHub is already connected with uh virtual so it is scanning all the repository and here it is saying wait 58 seconds ago I have deployed this repository to GitHub yeah I want to import this one and it is already recognizing it as an other preset of framework so yeah this is good root directory yeah that is the root right and in the build and output settings okay you don't have to change this setting yeah in the environment variable we have to include the API key so here I am giving the API key basically it is the configuration of our DOT EnV file so I am copying this from my DOT EnV just copy this value of our API key paste it here like this and add yeah you can hit the deploy button now so our deployment is started now it is starting from this Step Building and there is no error in the serverless region yeah okay so very quickly our server side is deployed now here you can see if I visit this website it is saying hello world this is not actually a website this is a URL to connect over all the API calls so I am copying this and in my front end let me close my backhand side here go to the Explorer now I am opening the client side as a separate Repository here if I go to my API dot JS here instead of making calls to Port 3080 I am pasting the URL of our newly deployed backend okay just save this and now I have to initialize a new repository for different and also make all the changes and here I am againsting it as initial let's Commit This publish branch and here I am saying chat GPT YouTube yeah publish it as a private repository this code is now pushed to the GitHub again I am going to my virtual here okay on my dashboard this is my backend now I am making a new project here this is my just now client chat GPT YouTube import this and it is automatically detecting that we are using wheat framework and all the other things are good now there's nothing in there is nothing to write in environment variables so we can just simply press the deploy button and let's see what will happen okay the deployment process started you should check the logs of your building because it gives you a trace of how the production is going okay so congratulations you just deployed a new project to word cell let wait let's wait for a second go to this website which is deployed to Internet by the way congratulations and let's try our first message on the real website so okay how to make a viral react tutorial on YouTube let's see and finally there's a response from our server side how cool is this now our full stack application is deployed to the internet for absolutely free there is nothing to pay like you have to do on the Heroku or many other platforms this is a very simple way to deploy your full stack applications on the virtual let's try anything else where do you think the Bitcoin will go in next three years okay let's wait for it and here is the reply so how amazing this build was I hope you enjoyed this tutorial a lot and you learned a lot of New Concept I am sure that you learned a lot of things in this tutorial so if you want to keep watching my tutorial do support the channel hit the like button and subscribe the channel right now you can also support me via the patreon I am also available at the buy me a coffee so try to support the channel as much as you can thanks for watching this video I will see you in the next tutorial bye

Channel: ZAINKEEPSCODE

Views: 25,616

Keywords: react js, chat gpt open ai, build your own chat gpt, build chat gpt, openai api, chatgpt api, chatgpt react, chat gpt javascript, javascript ai, javascript artificial intelligence, chatgpt clone, chat gpt clone, clone chat gpt, clone chatgpt, build chatgpt, customize chatgpt, chat gpt to make money, how to use chat gpt, react website design, how to use gpt chat, react website, react portfolio website tutorial, react js tutorial, learn react js, react js crash course

Id: vAO1fxifJIs

Length: 86min 24sec (5184 seconds)

Published: Sun Jan 29 2023