Build A Chatbot With The ChatGPT API In React (gpt-3.5-turbo Tutorial)

what's going on guys it's Cooper codes and in this video we are going to be building this chatbot with the new chat GPT API we're going to be able to ask the chatbot questions for example what is an API endpoint and then chatgpt is going to give us a response this project is a great introduction to anyone who wants to use this API throughout the react applications and we can keep on asking questions just like you would in the regular chat GPT interface for example we could say something like why are API endpoints important and it's going to keep on giving us responses this video uses the GPT 3.5 turbo model which is absolutely breaking news this is 10 times cheaper than the previous GPT 3.5 models which means it is starting to become incredibly affordable to add AI to your react applications we can get started by building out the front end of this application I'm going to go to an empty folder in Visual Studio code and then I'm going to create our application using Veet so I'm going to say npm create Veet at latest then the name of our application I'm just going to call it app and then I'm going to say dash dash to start our parameters and then the next parameter we want to use is dash dash template and we're going to be using the react template so then you can press enter so we can CD into the application and then npm install everything in there right now and then I'm going to npm install another package this is going to be at chat scope slash chat Dash UI dash kit Dash react we are going to use this package to easily build out our chat interface so you can press enter and now we're good to go we can go into our folder structure here go into the source folder and then go into app.jsx I'm going to delete everything here and then just keep this outermost div so just like this we can now import some styling and components from our chat scope Library so firstly we're going to import at chat scope UI kit react like this and then we're going to add Dash styles to the end and we want to go into the disk folder go into default and then go into styles.min.css this is going to give us the styling for our components now we can actually import components to make this video simple I'm just going to import everything we need all different so I'm going to say import some object brackets there and then from at chat UI kit react like this we are going to need a main container a chat container a message list a message a message input and then finally a typing indicator now we can build out a component that's going to have all of our chat functionality so we can make a div on the very outside of this component and add some styling to it for example its position is going to be relative and it's going to have a height of 800 pixels and a width of 700 pixels all of our components are going to be wrapped in this large main container just like this within that main container we are going to have a chat container for all of our chat logic inside of the chat container we are going to have a message list this is pretty much going to show all of our different messages that we have in order to store our messages in an array like this we can go to the top and add some use States for example we can change this usage to be messages and then set messages it's going to be an array I'm going to initialize this with one message to show you guys what the actual objects look like we are going to have a message property which is the actual message itself so hello I am chat gbt and then a sender which is just going to be chat gbt and So within our message list we can go to messages.map grab the current message that we're going over in the array so the current object and we can also grab the index of that certain message and then we can render a message component by saying return message so this is a component will be imported its key is going to be equal to the index then it's model which is the message it's looking for is going to be equal to the current message object We're looping over now every single message in our array will get a message component we also want a message input to be used under this list so at the bottom of the list we're going to have an input for the user to input text and send messages I'll have a placeholder which is just going to say type message here and then we can also do some logic here where we have an on send event that gets hit when the user sends a message we wanted to call a certain function for example I'm going to create a function right now called handle sent so we can Define handle send above I'm going to do a const syntax so const handle send which we're going to make an arrow syntax array so we can say async message so that's like saying function and then we can point this error function here to some logic by adding some curly braces and so when a message gets sent we're going to want to create a message object so we can say const new message is equal to we are going to add this object into our state right here and so the message is going to be equal to message and so this message right here is actually some text we're getting from the input and then the sender is going to be equal to the user with our new message we're going to want to do two things we're going to want to update our messages State and then eventually we're going to want to process message to chat gpg so send it over over and see the response because we have two different spots where we're going to process these messages I'm going to make a constant called new messages which is going to be our new array of messages so I'm going to make an array then I'm going to say dot dot dot messages this is going to take all the messages that are already in our state so the current value of our state then we're going to add the new message on top oh sorry and this should be new messages and then we're going to add the new message on top an easy way of seeing this is all the old messages plus the new message and so to update our messages State we can say set messages equal to new messages super simple my bad guys if you're following along directly this up here doesn't have this little Dash react it should just be chat UI kit Styles like this and one more thing when we're using this Library one thing we have to do is you have to say the direction is equal to outgoing that means it is going to show on the right so it's a message that we are sending out and so now if we npm run Dev again things are looking good and we can see that if we type a message we'll say I am Cooper codes it's going to show up on the right now we're getting to the point of the tutorial that we're actually going to want to set up the chat gbt API but I'm going to set up a couple things before we do that but we're really close guys so one cool thing we can do is before we actually start processing the message with the API we can set a typing indicator for example chat GPT is typing we can do this by going up to the top and creating a state so const typing and then set typing is initially going to be equal to false so it's going to be a use state of false when we send the request Quest here at like line 30 we're gonna have some logic here one thing that we're gonna do is we're going to initially say set typing to true because you can imagine chat GPT is typing or you know thinking and so when this is true we want to show a component in our react application so we can go down to our message list which has a typing indicator property inside of here we can say typing if that is true show the typing indicator element like this and the content is going to be chat gbt is typing and if typing is false we're just going to show null so that just means nothing so we can save this application and then see what it looks like so we should send a message in here so I'm just going to say hello and you'll see chat gbt is going to be typing forever once our API request is done we can go back and set this typing back to false because it's kind of like done typing you'll see it's just going to run forever because we just set it to True once and we don't do any anything after that we can get started setting up the chat GPT API by going over to platform.openai.com you're going to want to log in like normal go to the top right and then press view API Keys as you'll see I make videos of this API so I have a bunch of different keys but we are going to press down here create new secret key once this has been generated it's never going to show you it again so make sure to copy it here go over to your application scroll up and just say something like const API key is equal to that string right there the API key allows us to make calls to open Ai and it knows that it's coming from our account alright guys now we're actually going to process our current message over to chatgpt I'm going to create a different function for this just to kind of isolate the logic so I'm going to say async function process message to chat GPT and the input is going to be the chat messages so all the messages from our chat and at line 33 to call this function I'm going to say await process message to chat gbt and then put in the new messages right here make sure this is new messages and not messages this is kind of in-depth but messages right here are actual state that we're using hasn't been updated with this new value yet and so when we make this API call we want to make sure that we're using the new messages here and so I'm going to be using this for a reference just to explain to you guys kind of the logic behind what we're doing here this API endpoint right here the chat completions endpoint is what allows us to use chat GPT functionality we are going to make a fetch request in JavaScript it's going to have very similar logic to this curl request right here one important thing is that look at this messages object right here it has a role of user and content is what is the open AI Mission you'll see this object here is structured differently than how our objects are structured in the front end that means that we have to kind of translate our objects into something that openai will understand because right now chat messages the input right here has a bunch of objects that have a sender which is either going to be user or chat GPT and then it has a message which is going to be the message content here but to send data to the API we need to make a new API messages array so translating these messages for API to understand and they need to be in the format of role which is either going to be user or assistant and I will talk about what those mean in a second and then instead of message we have to say content is equal to the message content it's kind of annoying but this is very common for when you have to format data for an API request but it's actually more simple than you guys might think we can make a let API messages be equal to an array we can build this array by saying chat messages dot map this allows us to go over every single chat message and create a new object with for example new properties like this we can take the current message object that we're on and then make an arrow function pointing to the logic that we want to do with that message for example the role is very important here so we can say let's roll be equal to an empty string If the message object dot sender is equal to chat GPT then we want to make sure to Define this role as assistant otherwise we can say else to find the role to be equal to the user and then we can return an object similar to how it's expecting the content to look so we can say that the role property is going to be equal to the role that we defined above and that let the line 41 and then the content is going to be equal to the message object Dot message which is how we initially defined our message content here and at line 40 this should be API messages sorry about that because this is actually the array that's being built up and it's going to be an array of objects that look just like this now that we have the API messages here we can now make our fetch statement so we are going to say await Fetch and then we want to input the search and endpoint we want to talk to for example https slash slash API AI dot open ai.com slash V1 slash chat slash completions and then we can put a comma and then we're going to make an object with all the different properties we want to specify this request for example its method is going to be a post because we're posting data we're posting these messages to the API and then we are going to have some headers here these headers are defined right here it wants a authorization and a application slash Json content type just showing you guys where I'm getting this information from so I'm going to say authorization is equal to Bearer plus API underscore key which is that API key that we defined initially up here then I'm going to say content Dash type is equal to application Json that means we're going to be sending Json and the body of this request and so the body down here is going to be json.stringify and I'm going to make an API request body variable and second here so we can do that by going after our API messages and saying const API request body is equal to an object the AI model that we want to use for this request is going to be GPT 3.5-turbo and then it also wants our messages which is pretty much all the different messages that we have in our conversation we can do this by saying dot dot dot API messages because remember this is this thing we made at line 40 which is the chat messages formatted for API so we can say dot dot dot here and remember this is going to be like message one message two message three Etc there is one very important thing we need to discuss now though you see these roles right here they're very important there are three different roles there's a user role which means that it's a message from the user and an assistant role which means it's a response from chat gbt and then a very final important role is going to be called system this is generally One initial message defining how we want chat gbt to talk so I'm going to make our system message right here where I'm going to say const system message is equal to an object its role is going to be equal to system and then its content is going to be equal to a prompt this prompt defines how the actual language comes out of chat gbt for example explain all Concepts like I am 10 years old and so you can change this content to have it display different information at the end of the tutorial I'll show you guys how we can switch to other things like speak like a pirate it will literally do that and even stuff like explain like I am a 10 years of experience software engineer and this is pretty cool because it's giving chat GPT context as to how you'd want it to respond for example if you're like a travel agency and you're trying to book people's like flights with AI or something you could say like speak like a travel agent and be very clear about every single thing related to travel right and it will literally change how it talks based off that prompt which is it defined in your system here and this is incredibly important because we're going to take this system message and put it at the front of our messages always it's always going to be there it's going to consistently be there no matter what and it has to be here and this messages array in order to actually get sent over to chat EBT correctly and respond how we wanted to respond all right guys I know this is a lot of stuff at once but this is a lot of data management when you think about it and we have to make sure that we work with the API exactly how it wants us to so now the fun part is we have this fetch statement The method's Good the headers are good the body is good now we can say dot then which is going to grab some data that's going to get returned from the actual openai API initially I'm going to turn this data into a Json format by saying return data dot Json we can then do another dot then statement allowing us to grab the new Json data something we can actually process in JavaScript and for now I'm just going to say console.log data all right let's go over to our application and see this in action and so this is assuming you have a console.log data so just so you guys are aware of that we can go in here and type our message I'm going to say what is a website and you'll see we got the response over here which is great news and the actual response is going to be in the first part of this choices array so we can go to choices and then go to the first thing in there and then go to message and then content I don't know why openai designed this API to where you have to do so many different things but you know that's on them but we're going to have to go into this data object is what we're looking at here and then get this content right here and then display to our user you'll see it says something like hey there a website is a place on the internet where you can find and see different things so it actually did respond to our question of what is a website so let's get in there and try to just console.log the data dot choices and it's in the first array of choices and then in the message and then in the content so we're going to go to the first array here Dot message and then dot content and so now if we run this we should just see a string coming from line 77 so I just refresh my application I'm going to say what is a programming language and you'll see we actually have a string at line 77 which we can then show to our user as a message which is pretty cool so one thing I'm going to do is I'm going to set messages so we can actually show this new message to our user I'm going to make an array that's going to consist of two things initially it's going to have all the dot dot dot chat messages that we've seen so far and then it's going to have our new message on top of that which I'm going to make an object like this this new message is going to say that the message is equal to this data right here so the actual string of our message and that the sender is equal to chat GPT and guys make sure to always be correct about how you capitalize chat GPT here because it's how we identify if a message is assistant or user right up here right so make sure that chat GPT is always you know capitalize the correct way because it could break your system a little bit and so now are users able to see the response from chatgpt and then this is kind of subtle but at the end we're going to say set typing is equal to false again because you guys will remember initially we set typing equal to true and so now that we've finally got the API response we can set it back to false all right let's go and see this in action so I'm going to ask how should I learn JavaScript it's going to type for us and boom it's going to give us a pretty hefty response here you will need to understand what JavaScript is first all right guys I think I should start taking notes this is actually a pretty good response and you can even ask it specific questions as to what I just told you just like chat gbt because we set up messages correctly it understands the entire context of what we said so it's actually remembered we asked how should I learn JavaScript and so I can even ask something specific to this prompt for example what specific projects are good for a developer with two internships amazing stuff and so now we have chat EBT fully initializing our application one quick thing we can do if you guys are like gonna put this on your portfolio or anything like that is we can go back over to our app.jsx and go down to your message lists should be around line 93 and then set the scroll Behavior equal to smooth I don't know why it's not this Behavior by default but it's kind of choppy by default so that's going to make things look better when you're scrolling around and guys just to show you the power that this initial system message has which should be around line like 53 I'm going to say speak like a pirate and so we can go back over to our application and just say what is an API endpoint and it's going to tell us Ahoy matey okay so you know if you guys don't appreciate my voice and you want to go learn from a pirate you can do this if you want but this actually has applications that aren't completely ridiculous like you know being a pirate for example explain like I'm a 10 years of experienced software engineer it's actually going to change how it explains things to us and we can look at this so let's go and save this so explain like I'm a 10 years of experienced software engineer make sure to refresh your application and I'm just going to ask what is an API and you'll see it actually uses different language look it's talking about scalability security maintenance software components and so if we go back and say explain like I am a seven year old just learning about computers and you can be specific with these and so I'm going to ask you the same question what is an API and you'll see it's not telling us about security or anything crazy it's saying that an API is like a waiter at a restaurant so it's completely changing how it talks based off this system prompt alright guys so that is pretty much the video hopefully this project is a lot of fun for you guys as it kind of lets you use an API AI that's completely brand new this is honestly a great portfolio project because it showcases that you can manage data throughout react and also use an external API so hopefully it was helpful in that regard if you made it this far feel free to subscribe to the channel and thanks so much for watching

Channel: Cooper Codes

Views: 16,854

Keywords: chatgpt, chatgpt tutorial, tutorial react, react chatgpt, react chatgpt tutorial, Chatbot, ChatGPT API, React, gpt-3.5-turbo, Tutorial, Programming, Coding, Software Development, Web Development, Frontend Development, Backend Development, Full-stack Development, Chatting, Conversation, Messaging, openai api tutorial, openai, openai api, react, react tutorial, react chatbot tutorial, react ai, react ai projects, ai with react, ai project, chatgpt ai project, gpt-3.5-turbo tutorial

Id: Lag9Pj_33hM

Length: 21min 37sec (1297 seconds)

Published: Thu Mar 02 2023