How to Build Your Own Chatbot Like Chat GPT-3

in this video I'm going to show you how to build your own chatbot like chat gpt3 [Music] figma I've designed a chat interface that looks like the following let me quickly run you through it so we have a head with an image which is the logo from openai now we have the name of the chatbot I just called it chatbot then we have the chat dialog where you can see the messages it's pretty straightforward and then we have an input where we can type a message an a button where we can send or given message so the goal is to build a chat interface where we can ask the bot a question and the bot will return with a reply let's start with building a front end we do this by creating a new next.js app and configure it with Tailwind to handle all the styling so let's create a new directory I call this open AI chatbot direct into this folder now we are going to create a new Next Step yarn create next app I call this client since the next app is going to serve as our client I'm going to build the backend with KOA if you use express you can easily follow this tutorial along and just install the packages for Express instead of Goa if you want to skip to the part where we handle the back end go ahead we are going to build the front end first so I call this client we are not going to use typescript so press no no to ease the lint press yes to use the source directory and then no for the experimental now the next.js app has been successfully created if we do LS we can see the folder client has been created let's create one more folder for the server we are going to use that later and now let's open your code editor open the client folder next always comes with unnecessary files let's remove those so in Source folder and then the pages we can remove the API folder in the index.js we can remove all the Imports remove this line and remove all of the HTML we just added text with chat here and save it in the Styles directory we can remove the home.module.css file let's open the terminal and start the client and see if it's still working run yarn Dev be aware that you have to be in the client folder and as we can see it's still working perfectly let's now install and configure Tailwind we first have to install it we need clear wind sees us Post scissors and Auto prefixer save this as a Dev dependency what we can do now is MPX Tailwind in it it will generate a tailwind and post CSS config file as you can see they both have been created open the tailwind.config.js file add content we need to add a new line save it now head over to globals.css remove everything now we need to add the Tailwind directives what I'm also going to do is in the figma we use the phone later so I'm going to import this and here you can select the Styles then on the right top here you can view selected families and now you can click on import copy this and then I'm going to import it at the top here then go back to your tailwind.config.js file and at extent we can add a new font type lado here now we can close this file we can close this file as well and if we now go to or document.js file this file should be automatically generated when you create your next app if it didn't create a file you can just create it on your own and copy everything that I have here we are going to give the HTML some classes so full later I'm going to give all the text some letter spacing and I'm going to give the background a color let's save it if we now start the client and refresh it we can see our background color changed and we use the phone later so now we know that Tailwind has been successfully installed and we can now move on with building the actual chat interface let's create a new folder we call this components then in this directory we create a new file called chat.j6 then we export a function called chat foreign styling and then give it some border radius and some padding and now if we go to our index.js file we can now import the chat component that we just created and we can edit here so now we can see that our chat component is here the one that we just created what I want to do is put this in the center of the screen so let's give the main some classes so the width of the main is going to be full it's going to have 100 view height and we add Flags item Center and justify Center now we can see our chat is exactly in the middle of our screen what we still need to do is make the head the chat dialog and the input what I'm going to do is I'm going to create a component for each and we just work from top to bottom so we are going to start with a hat so let's create a new folder here with chat and create a new component with had we export a function again with head let me close the terminal because it's annoying so we need to open AI logo I'm going to use it as a SVG I'll copy the path here and save it what I'm going to do is add some props here otherwise we can add class names to it we want to put the logo inside of it div and as you remembered we had a text with chatbot let's give this logo some width and height let's now import a head here in the chat and add it here let's now style the head we want to put the items in the center the div around the logo we want to give it a background color we want to put the logo in the center add some padding and give it some border radius then the deck should be white let's make the text a little bit bigger now the only thing that we need to do is give it some margin on the left so it's not attached to the logo four should be fine and this looks perfect in the figma you can see we have a divider let's create that now open the chat.jsx file and here we create a new div IDE some classes height going to be one pixel and then we give it some margin on the top and the bottom and then give it a background color and that's looking sharp now let's build the chat dialog where we eventually can see the messages so let's create a new component with messages.js6 export a default function messages [Applause] and then return a div let's close all the unnecessary files that we have opened I forgot to export it as a default function now we can import the messages there and then we add it here and add our chat file we want to create some dummy messages what I want to do is create a new state with messages so let's import use state from react and then in here we can create a new state with messages thanks GitHub co-pilot so let's create some dummy messages here [Applause] hello how are you type we do both and then time for the time I don't want it to be hard coded so what I'm going to do is use a library called Date FNS so I'm going to stop the server and then type yarn add date FNS run the server again and from date FNS we can import format relative and then in here we can do format relative new date and then do the new date again let's create a few more messages I'm fine thank you here we do user and then here we add a new message how can I help you and then we do both again and this is fine for now because these are just dummy messages and now we can prop down the messages in the messages component and then in our messages component we can now grab the messages prop and now we can create a new function with message so here we use the props from the message so we used message type and time and then we do then we return a div with message for now and then here we can map to our messages and then we add the message component here at the index as the key and prop down the message [Applause] um close the tag and save it let's change this to message to the actual message and if we now go to our browser we can see the messages here so let's give the chat dialogue some styling it's going to have a width of 600 pixels Max height it's going to have overflow so you can scroll now if we have a lot of messages we can scroll through the dialog what I don't like is the basic styling of the scroll bar here so I'm going to get rid of this so in our globals.cs file we can create a new class with crowbar height and we can use what GitHub copilot suggested and then add a new class with scroll bar hide and then use the webkit and save it and now if we go to our messages we can now add scroll bar height here and now we can see it disappeared so now let's style the actual messages so what I want to do is wrap this message around another div and then put the message in a P tag and then put our time in his pen in every give this a class I will actually give it some inline styling so first we add a flex class then we are going to add the flex goal class because we want the message and the time be underneath each other let me put it in the middle just text wide use some border radius and some padding and what we can do here is we can do if the type is equal to both we can give it a different background color and if this is not the case we give it a different background color and now we got this so now let's make the span of the time a little bit smaller and give it a different color when the message is sent from the bolt come on so for the text we make it extra small some margin at the top and here we can do if type is equal to both then then the text should be Gray perfect what we want to achieve now is when the message is sent from the bot we want it to be on the left and when the message is sent from the user we want it to be on the right so we can do this really easily by adding a class to the top div and then add Flex item Center and then if the type is equal to the bot we wanted to give it a justify start if it's not we want to give it just a Phi and so now we can see that the message is here on the left and from the use on the right and then on from the bolt on the left again so this is perfect the only thing that we need to do now is for the messages you can see that the messages have border radius for the bolt message we want the top left border to have a border radius of num for the message from the users we want the right bottom corner to have zero border radius so here messages from the bolt we do rounded top left none and then for the user his messages we do rounded bottom right no no save it and this should do the job yes it does and this looks perfectly so now the only thing that is left before we start with the back end is the input where we can actually type our message and send the message so let's handle that other chat.jsx we can now copy this divider again and paste it in here and now let's create a new component for the form support a default function again so add our chat.jsx component we can here import the form and then add it to the bottom here and let's start with adding a input and then we want to give the input a value the value is going to be the message so we are going to create a state for that so we are going to import use State again from react and then here we create a new state with message now we do a set message this has to be a empty string and then here we can do value message and then we can add a on change so when we type something we can then set the message to the E dot Target value and then we add a placeholder here with type your message here and if we would now display the message here and go to our browser if we now type something we can see our message right here as we change it remove this message here add some classes to our form now let's style the input give it a background color text should be wide and we give the placeholder text color it's going to be Gray it actually be small let's give some border radius some padding the whiff should be full and outline we do Norm so this looks perfectly so now we need to create the actual button to send the message you can also send the message just by pressing enter but I would like to have a button as well so in the building we want to have a icon let's create a variable for that let's add the path and in here we can add the props as well so we can give it some styling and now we can add the icon here some classes to it and then let's add type submit to the button and now we still have to create a function for this but we are going to style the button first so if we hover on the button we want to we want the opacity to be half and when we click on it and it becomes active we want the opacity to be 100 again and give it a transition I'll add some padding then add some border radius now it should look like this but what we want is the button should be in this diff so we want to give it a class of absolute but we want to give the form a glass of relative so we give the button an absolute class and a form we give it a relative class now it looks like this and we want it to be on the right and then at last we want to give it a little bit of margin on the right here perfect so what we want to do is we want to prop down the set messages to our form component so we do this by adding set messages here and then just add the set messages here and then when we go back to our form we can now grab the set messages from here and now let's create a function to send the message prevent it from default otherwise it will refresh the side then let's check if a message has been set otherwise return it and now we can set the messages do like this we use the form of the relative here but we first have to import it from date FNS because we didn't import it on the form so let's do that and now add our button we can add it on click and if we click on it we want to fire the send message function so let's see if it works and send it we can now see our message has popped up great we can now remove the dummy data and remove the formal relative from here and now we can see that no messages are displayed so what we can do is some conditional rendering so add our messages we can do something like that's just that length if it is show the messages and if it isn't and show it div with no messages yet or something like ask both anything and then you can type a question here and then we can see our message so this was basically it for the client we only need to set up a actual post request so we get a reply from the bolt but for that we first have to set up the server so let's close all the tabs that are open minimize the client folder then open the terminal and create a new terminal Direct in the server directory let's now initialize a package.json file press enter to everything let's install all the packages that we need for our server so of course we need KOA if you use express just install Express instead of Goa but be aware to install all the right dependencies so we need KOA router we need course we need a body parser I install.nf to store our API key from open Ai and then we need open AI of course install this as a depth dependency I'm going to install note mode so we don't have to restart our server every time we make a tiny change let's create a script for that let's create a new index.js file let's do a console locator with test and run our server we can see it runs just fine let's import all the packages that we just installed now let's require configuration and open AI API from the open AI package then let's now create a new instance of KOA new instance of the router let's add a new Port variable we are going to run our server on Port 4000 we don't have this variable yet so let's create a Dot N file Port here we add four thousand and now let's set up the configuration for open AI and in here we have to specify the API key so let's create a new variable in our DOT end file we can grab the open AI API key from the official openai website so when you're in your account you can click on the top right on personal few API keys and then in here you can generate a new API key as you can see I already generated two API keys but for the sake of this video I will generate a new one now that the API key has been generated you can copy it here be aware to never share this API key with someone else because basically anyone with your API key can create requests on your behalf and you don't want that to happen especially because the API costs money as you can see we use the DaVinci model and it costs 2 cents per 1000 tokens and in here you can see prices are per thousand tokens you can think of tokens as piece of work where 1000 tokens is about 750 words and this paragraph is 35 tokens and to not disappoint you if you create a new open AI account you actually get 18 free to spend so you can test out the API and do whatever you like with it so after we copy the API key we can now paste it in our DOT end file let's now apply our middleware and let's now run our server on our given port the only thing that is left right now for the server is create the actual post request so we want to send a message with the post request so we can grab this from the body then we can create a new open AI API instance with our configuration and then we can create a response we use the create completion function then we have to specify the model we use the text DaVinci model you should definitely check out their documentation where there's everything about their models because each model is used for different use cases and you are able to customize the base models for your specific use case but as you can see here we are using the text DaVinci version 3. it's the most capable gpt3 model can do any task the other models can do often with higher quality longer output and better instruction Following also supports inserting completions with text so that's pretty cool so then we have to send a prompt this is going to be the message that we get from our CTX request that body then we can specify Max tokens the max tokens is basically the maximum number of tokens to generate in the completion so I'm just using 100 then we can specify the temperature and what this means is the higher the value means the model will take more risks so 0.9 will give you a more creative response and if you use something like xero it will come with a more defined answer and as I said if you want to customize this both to your own needs you should definitely check out their documentation where they explain everything about the models and the requests and everything that you would like to know so what we can do now is we can send a body back to our client send it as a message and we can grab it from response that data.choices that we do is zero and I will grab it to text and then add CTX status 200. so in Postman let me quickly create this route and test if it works before we are going to add it to our client so as our body we send a message and we add something like hello how are you doing and as you can see we will now get a response I'm doing well thank you how about you and when we ask for example what is nine plus nine it will give us the answer 18. so this was basically it for the server that's now implemented back into our client so we can close the server so we can open our form.jsx we need a package to send our request so we are going to add axios don't forget to run the client again okay now we can import axios here and then we can create our actual response we call this message response so async function and here we can grab the data from our post requests and here we need to make the call to our server and remember we made the message rather and then we can send the message as the body that's console look there's data for now and then here we can do a weight message response you first have to make this a async function otherwise a way it won't work save it open your browser and send something like hello how are you doing and then send it if you go to our console lock we can now see a response here and we want to actually clear this text after we send a message so here we can just do simply set message and the only thing that is left is we have to add the response to our messages so here we do set messages priv you can add the previous array and then add the message and we can grab it from our data then the type is bought because the message is from the bot and then at the time like so like we did before and this should do the job so if we now refresh this and we ask to put anything what is nine times nine and we send it it will now reply with 81 and we can ask it anything what is the definition coding and it will reply but as you can see if the message is longer we didn't add padding here so we can easily fix this by going to our messages here and then add space Y and then four and now we can see it has some padding at the top and the bottom so we created a really cool chatbot like chat gpt3 ourselves before I'm going to quit this video I want to give you a little bonus so what we can do to make the chat more interactive we could add transitions when a message has been sent I'm adding a new package called framer motion start our server again and then here we can import motion from frame or motion and now we can add motion dot div here and we can do initial so when the diff initially renders we can set the opacity to zero and then the y220 and then we can add animates and we can set the opacity to 1 and y to zero and now when we send a message you can see the message pops in with an animation and we have a little bug winner or a lot of messages been sent so let's ask about some more questions damn you can you can see the messages are down here what I want to do is when a new message got sent I want to immediately scroll to the bottom so let's import use effect and use ref from react and then here we can do const messages and ref is use ref nil and then we can create a new function scroll to bottom messages enter that current control into a few Behavior smooth and now we can use effect here and then add the scroll at the bottom and then and then it needs to react when a new message has been sent and then here at the bottom we can add a new div and add a ref with messages and ref and when we now so if we for example scroll to the top and then ask the bot where are you from it will scroll to the bottom perfect I hope you learned something from this video and if you did make sure you drop a like And subscribe to my channel I would really appreciate that and for now have a wonderful day and I'll see you later [Music]

Channel: Robin Vriens

Views: 11,726

Keywords: openai, chat-gpt3, gpt-3, gpt3, openai chatbot, chatbot, chatgpt, chat gpt chatbot, chat gpt, open ai, artificial intelligence

Id: j_y69wfQVrw

Length: 33min 43sec (2023 seconds)

Published: Fri Feb 03 2023