Build & Deploy an AI Chatbot with ChatGPT API - REACT! (Next.js, Tailwind, and Vercel)🤖

with the release of gpt4 this week many new opportunities have been unlocked gpt4 is multi-modal meaning that it is capable of processing and generating output from multiple modalities such as text images audio and video unlike previous language models that were primarily focused on natural language processing only whether you're trying to build a side project business I have some examples of the project that I found online on the screen integrated into your existing projects or just explore this tutorial will help you understand how to integrate your Jupiter API you will also build a chat UI similar to that of chat GPT and deploy it but before we do that let's take a quick peek at what makes this API so powerful that everybody's talking about it so GPT that powers the apis is one of the most advanced natural language processing tools available is developed by open Ai and under the hood uses a deep neural network architecture consisting of 175 billion parameters making it one of the largest language models in existence like one of the reasons it's so powerful is it's been trained on an enormous Corpus of data so first you would need to sign up for openai create an account on their page and once you do that you can navigate to platform openai.com and here inside your account you can press API keys and create like new secret key make sure to store it in a safe place we're going to use it for the tutorial so to look at what kind of apis they have there's like two types that we can use for like this answer generation there's a create completion this is more for like one time completion where you can pass a prompt maybe you can tell oh you're like assistant something like that and it'll generate like answer based on that and here we have list of models in this list we do have like a new uh let's see model overview the the gpt4 is included in this one but the one that is a better suitcase for like the chats and more like natural conversation where you can pass previous messages and it will um read the context and generate like future Mist just based on the context that would be this create chat completion it's feeling better so um it's still in the meaning testing phase and in here we only have um two models this GPT three um so let's see oh they did add um okay gpt4 or to test your API key we can copy this scroll command here you can either run it in your terminal or in this case I'm using Postman file import then we select raw text and paste it in this will create just a postman command and once uh it's important make sure to go to headers and paste your API key in there so once that is replaced we send the request and we get back data where it comes with choices array and then we have message role assistant and then the content of the message with finish read and stop here we can add some more like parameters to the body for example stream true if you want to check more parameters it's on their documentation so the list is here and then when we send this this will return data back as a stream so like character you know how chat gpt1 is typing its adds up characters so you can combine them this type is called server send events API in this tutorial I'm not going to cover it but if you want to see that version also let me know in the comments I'm just going to use the restful version in this one okay so let's create MPX create next app we're using nexgs framework of react and here we set the name and some of the other parameters and after that this will download the modules and create that first let's see the into the app and then run it by npm run Dev now I have this open in vs code I'm going to go to Source Pages index.js which is the main file and I will delete all the other code and let's start creating like a simple form so Heather Chad GPT form input the type of this input is going to be text this is where user types in the text so let's add placeholder type your message here and after we have that let's also import use State and use effect that we're gonna use these two hooks to store and like fetch the data so first let's start using user input constant input value then set input value and by default this is empty next up we have chat log this will hold all the message like Converse conversation history and it's going to be an array finally we have is loading this is when we are waiting for the API response and in here we can pass the value so the value reflects it and when input updates we add on change function and then take the event Target value and set it to our new state so set input value oh I have a typo here after that after input we have a button to send the message now let's create handle submit function this is triggered when user types in the message and presses send this is because this is for we need to take the event and prevent default otherwise it's going to reload the page so first let's take a user message and add it to our conversation history so it shows up on the chat itself so set chat log we take previous chat log added to all the messages like the new message we indicate type that it's from user and then the content of the message then we clear out the user input for like to get it ready for the new message and here before the form is where we can display all the messages so let's map out chat log map message index here we said the key first and then inside here we're gonna have the contents of the message and we need to pass form on submit handle submit function so once we type in the messages are going to show up okay let's create a new DOT EnV file this is to store environment variables now we have our API key make sure it starts with next public open because the otherwise client side isn't going to pick it up and paste your key in here once you save that we have to quit the app because it needs to pick up environment variables every time you add that so I'm going to stop running the app and here in terminal I'll start adding Tailwind modules so we need Tailwind CSS post CSS Auto prefixer install then we run command MPX Tailwind in it this will create these two files inside telwyn config.js in content we pass this path which will know which files it needs to look at let's save this and one more final step for Tailwind is in global CSS we're going to remove all the other styles and import their modules okay that's it for the Tailwind now to call the EPA we're gonna add one more uh package this is the axios it's pretty popular in terms of like fetching the data from the API so npm install axis and at the top we're gonna import it so just axios is a name from axis let's create a file a function that's going to pull the get the data from open AI so constant send message equals and this will take in the message and then we're gonna prepare writing uh first we're gonna paste the URL of the endpoint we're making a call to so I'm gonna paste that in here after the URL we can Define some headers so create a new object a content type let's set that to application Json and then we must pass the authorization which is bigger and then the API key and then when the way in xjs we can read the environment variables this process.en read that and here's the name of the key that we just saved so next public open AI underscore key and then in the data we're gonna pass the model name which is required by openai so let's look at the list models here in the documentations actually oh I paste the other API URL so it should be chat completions instead and let's pick um the model so model and point and so for chat completions we can take the gpt4 since it's listed as one of the options so let's pass that in here and after that we need to pass also the messages so that's an array we indicate the role user and then we pass that would be the object we also pass the message that the user has sent so content set that to the message here we can make a set that is loading to True before we start making the API call I have a typo there and finally you can post axios make a post request pass the URL first then come to data finally we have the headers and then we'll take the response and first we will set the we can like console log it to see just how it looks like um and let's fix the parenthesis here okay and I'm going to close this out uh set chat log once we get the data we'll pass it to our conversation history and like save it so it just like shows up so this is all my same processes for like way we did input where we take the old previous state of chat log and then add it but in this case the type would be bought and then the message is response that data choices since choices is an array we're going to pick first one and then that message to content finally we set is loading to false because we already got back the result from data and then we updated the state so yeah so the first we can do some um catch if there's any errors and console log the errors and also update the state of the loading set it to false and we can save this and pass send message inside handle submit so whenever user presses send it it should be triggered we can once again run the application npm run Dev and test our new function so we have um I'm going to open the console to see how the data is coming back and we are getting an error we can examine oh this model doesn't exist okay so let's go to oh it does say it only has two options for now so we're gonna paste this second one it was the other end point that had maybe all the list of options also gpt4 but we can update that it's it's very simple to update in the data so let's um paste that and save it run it one more time see how it looks now so yeah once again passing the same message we did get the data back great now what oh we can update some of the styling um so I'm gonna using like I'm using Tailwind utility classes so setting container um this is for the whole like the chat box it's gonna be centered setting maximum width then we have a column Direction the height is going to be the full screen and then setting background color also for the chat GPT like the header I'm gonna create like a gradient um colors um display it so that could be done to BG gradient text transparent this is how it looks like and then we can wrap our messages history into a new class make make it Flex grow that means that it will take up the remaining of the space on the screen and finally inside here the direction of the messages we once again need like a flex column and there's some space in between them which is space y4 let's move on to the message items itself so for class name this would be flex and then here we have two cases the user message right and then the bot message and that will have a little bit different styling so we want to align user to justify end so that would be on the right side and then just if I start for the bot and then inside here we can also have different colors whether or not if it's a user or a bot so it's visually we can identify so for user let's do background purple 500 for the bot let's do background gray 800 and for both of them rounded LG some padding text white and then set the Mac to it so this is how it looks like and we can move on styling for the form so Flex let's set that to now add some padding and for a deep class name um Flex rounded also we're gonna add a little bit of uh border around it and change the background color so it's different from the surrounding of the surrounding like the box or container it's in uh for input let's do Flex grow so it also takes up the rest of the sprays the background transparent text would be white and then we're going to remove any like Focus outlines and The Styling for button we're gonna set this color to purple background purple 500 also going to make you rounded add some paddings text would be white and then font semi bold also on Hover uh we're gonna set background purple 600 and then transition some like small animation now as you notice when we're like typing in like a message and sending it there's no like loading indicator so in components let's create a new component name it typing animation and let's like show like you know in three dots shows up so we can uh give users notice that the text is loading so that would be Flex item Center and inside here we're going to have three dots the dots will just be created using class classes so with height for rounded foot this will create like the circle and then set the background gradient and animate pulses the class that's going to animate so it would be three dots in total so I'm just gonna copy paste the dots and add a delay so each dot comes animation comes after the other one so let's export this typing animation import that into index.js and so at the top typing animation from components and then the name of the component once we have that imported here we can check first if the state is loading then we're going to display it and then this will be also wrapped the inside like um Bob message so it's going to look like it's a message from Pat so div class name background gray 800 so same styling that the bot has a padding text white then we pass the animation and let's save this and see how it looks like so typing in the message here I'm gonna ask it how can I prevent keys from showing up on react because right now if we deploy what we have it will expose our API key for openai so let's see if Chad GPT knows how to hide it if it doesn't know then I'll show in the this is after that is how I'll do it so the dots are not showing up it we did get the answer maybe there's a typo in typing animation um let's see but looking at the answers for child gbt it does say to use environment variables which we are using uh right now and server side rendering use hashing or encryption on the client side before sending data to the server okay so I guess it's not 100 sure on the answer it did give us a disclaimer that it's not capable to provide a security advice so maybe they are being more careful on that as for our typing animation so it should be the background to uh okay the first step is going back to the Envy file removing next public we're going to stop running this server once again we do this every time we update the environment variables so let's stop this and now in the API hello JS we have a sample API endpoint we're going to rename this and create our own API endpoint that calls the open AI so first as we know we use like post message so for our API we can check if the requests method is not equal to post we can send back like the 405 error saying that if we're using like a wrong method so the message would be the method should be post and else that here we can call the API it would be almost the same logic as we did on the client side so uh let's uh first import axis here at the top and we're gonna also copy some of the settings that we used previously we're going to turn this function to async since it's making a asynchronous call and then we can use um try catch and inside try we can try calling the API so constant response and then equals to axis post and all the arguments that it's taking we can pass some of the arguments and for the messages we're going to take the that since messages are Dynamic we're going to take that in from the API and after the try call we have a catech where we if there's any errors we catch them console log them and as a response back we send 500 and then the message that something went wrong this is the response of our API let's remove this and instead paste the response in case so status 200 that means it was successful also update the next public open AI API key we don't need that anymore since this is not a client-side anymore it's reading for the updated environment variables to get about different requests we say construct constant destructuring like the body from request and instead of message we're gonna send body in inside the data and we do need to also copy this response and send it back so inside the Json it's going to go in there and now we can actually directly send the body and remove the data in case from the client side we want to update model or something remove the console log and I think for the response we can just return response.data instead like a whole response because we don't need it we don't need we need just a data part okay to save it we tested by calling localhost API chat send the message and we should just test week to get the same data back as in the same format as before now now we can update the call we're making from client side so this way on line 30 where we have process.en we next public openai key that doesn't get bundled inside the file that gets generated when we're building and deploying the app so we can remove that and to call internal apis we can just do slash API in chat and everything else like the the format post method Remains the Same now we can test it just in case to make sure it's working so let's type in a message and press send we're getting typing animation and the message from the bot back now time for deployment for next year's projects versus the solution we just create a new project by importing GitHub I'm gonna also add a link to my uh to this code of this tutorial and one thing I changed before deploying to GitHub is I renamed EnV to ema.local because by default when you create an xjs app this is what's git ignored also we have to copy open AI API key and add that on the virtual like deployment settings so let's copy that and continue to dashboard once you upload the git project you just press deploy.d deploy it and inside the project we can go to settings and environment variables on the left this is well we will add the key and then the value of the key you got from open AI to deploy you might see like different links here so this is the deployment link and this is the domain link so if you go to deployments there's like stages so this will show like what was the change in the development but let's say for example if you want to take the latest develop deployment and if you want that to show up on your domain you can just promote it to production and this is where the domain is so this will point to new deployment so once uh promoted to production successfully we can go to oh it's waiting for build to finish okay we just wait for the build and once it's done uh let's go actually this is the product and this is the main domain okay here it is also I modified the API endpoint a little bit this is for just to make sure that my API is called only by the domain that I have created and no other website um so if you like to do the same just as another security step so we can go over the code here what I'm getting is a refer basically like who is calling the API and first I'm checking so by processing we know the environment in next year as we can check what environment we are currently on so for development of course from localhost we want to be making those requests so if it's not development then it's going to exclude but if it's a production or any other stage then it will check for the referral and then inside uh environment variables in here I set my app URL to the domain of my website so if it's not that one then it will return this unauthorized status number and code saying unauthorized so that would be all for to tutorial thank you so much for watching feel free to share what kind of projects you're working on that's using chat GPT API in the comments or maybe you need help deciding on tax tag other than just using the API so I'll be happy to share my suggestions and I'll see you in the next video

Channel: webdecoded

Views: 18,749

Keywords: webdecoded, chatgpt

Id: WsYABsWMFqc

Length: 24min 39sec (1479 seconds)

Published: Thu Mar 16 2023