ChatGPT API in JavaScript for Beginners - AI Chatbot Tutorial
OpenAIVintage📅 2023-03-08
Integration Flow
┌─────────────────────────────────────────────────────────────────────┐
│ INTEGRATION ARCHITECTURE │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ USER REQUEST │
│ │ │
│ ▼ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ │ ────► │ │ ────► │ │ │
│ │ OpenAI │ │ API │ │ Output │ │
│ │ │ ◄──── │ │ ◄──── │ │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │ │ │ │
│ │ │ │ │
│ └────────────────────────┴───────────────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────┐ │
│ │ RESULT │ │
│ └───────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘Integration Points
- API authentication
- Request handling
- Error management
Transcript
[00:00] a few days ago openai released the chat GPT API to the public this is significant as this will allow developers to include gpt's technology in their order clients applications so in this video you'll learn how to include openai's chatgpt API in your own web application so in this tutorial we'll learn how to build our own intelligent chatbot using open ai's chatgpt API you will learn how to train the model to behave exactly how you
[00:32] wanted to your chatbot can take on any personality that you want and you can give it some unique personality traits as well so in this demo I've created the chatbot called body body is curious about the world and loves learning about humans he's also got a small personality Quirk that makes him go beep boop in his responses as with charge EPT we can ask body anything but the difference between body and chat GPT is borty's unique personality so we'll start off with a
[01:03] simple question something like do you like nature after sending the message but it will take a minute to think about it and then respond you can see in the response that the personality Quirk will be boops in the response and body is telling us that he loves nature what's quite cool about Chachi PT's API is that we are able to provide context to the conversation so that body can remember certain information during the conversation as an example I'll tell boti that my name is Leon the Baltimore response saying nice to meet you Leon I
[01:35] can then ask Wati what my name is and both he will actually remember their details but we can also ask you the advanced questions just like he would have put your GPT year or ask body but in JavaScript how do I write messages to the console 40 will give us an answer and what's quite interesting about the response is that it's actually in markdown language so in this tutorial you'll also learn how to format the markdown language with some think it's a bit more presentable in this example we can see some highlighting around anything that's considered to be code so
[02:07] in this video you'll actually learn quite a lot I will teach you how to create your own little Avatar you will learn how to use the chat GPT API in your applications and you'll also learn how to deploy your application to production as for the tech stack we'll use next.js to develop the front end as well as the API that's needed for calling the cha GPT API as a little bonus you'll also learn how to use route handlers in xjis route handlers or the API Solution that's been introduced since next year is 13.2 we will also
[02:40] style our application using talwin CSS right so let's get started first we'll create a new next GIS project open up an IDE of your choice I'll be using vs code I'll have a link to vs code in the description below after creating a new project in vs code open up the integrated terminal you can use this by clicking on Terminal and new terminal in the terminal we can create a new nextgis project by entering npx create next app at latest followed by a period after
[03:13] eating enter will be asked a few questions would you like to use typescript no would you like to use eslint no would you like to use the source directory no would you like to use the experimental app directory yes import aliases or displays enter this will now set up our next JS project after setup is complete you'll notice all bunch of files appear in the folder next we'll set up Tailwind CSS for this we'll just follow the instructions in the documentation I'll leave a link to
[03:43] Title 1 CSS in the description below until then click on get started then click on framework guides then click on next.js and then we can just follow the instructions Step 1 simply shows us how to create the next project this is something we've already done for Step 2 it's telling us to run the following commands in the terminal so I'll just copy these two lines and then back in vs code or simply paste in those two commands and press enter after running the Taliban installation
[04:14] we will now see the style event config file in the directory let's go back to the instructions save 3 is telling us to replace the contents of the toluent config file with the content every year so I'll simply copy all of this and in the title when config file I'll just delete this and then paste in the new content then for step 4 it's telling us to paste the following in the global CSS file so I'll just copy these three lines then back in our project we can find the global CSS file under app and
[04:45] globals.css I'll actually go ahead and delete all the stuff that's in there and then replace it with these three lines now that we have next J is set up as well as style wind you can start work on our project first in the app directory I'll actually go ahead and delete this page.module.css file we can then open up the page file and delete these Imports at the top I will then remove everything from this first main tag up to the closing Main tag for now I'll just create a new header with the text hello
[05:16] world and I'll save this we can now test out our app by running npm run Dev and press enter in the terminal you should now see a link to your Dev server for me it's at localhost 3000 and that seems to be working to make things easier to see I'll actually just zoom into this page slightly and I'll place the browser next to the IDE now that we have next.js and talban setup we need to start some real work on the project our first step is to create our own API which we can call to
[05:49] communicate with openai's jgpt API in next 13 we can create our own apis in the app folder and within the API folder the sample next GIS app already gives us an API endpoint for hello and within the hello folder we've got a file called route.css within the routes file we are able to specify all the methods that are available for the servers like get post put delete Etc in this example they've provided us with a get function that
[06:20] should return a message for hello nextjs we can test this out by adding the following to the URL API slash hello visiting this route will trigger this file and since we are calling this route within the browser the get method will be triggered after running this we get that message back hello nextjs what we'll do instead is we'll delete this route file we'll delete the hello folder and we'll create a new folder called bot
[06:51] within the bot folder we'll now create a new file called route.js the reason we're creating an API route for this project is because in order for us to communicate with open AIS apis we need to provide an API key as part of the request the API key is not something that you'd want to expose on the front end so therefore running server code is recommended and these apis that we Define as routes will only run on the server and not in the user's browser I
[07:21] hope that makes sense so just to test this out let's create our own API method you can do this by exporting a new async function and then providing the verb for the method like get post put delete Etc this method receives the request object as input and we can return a response by simply returning a new instance of the response class for now I'll just add in some text like bot response and I'll save this file so back in the browser
[07:51] instead of calling hello I'll call the bot route instead and this gives back the response that we hard-coded here bot response realistically for these responses though we'd want to return an object maybe something with a response attribute and some content we could also use this response to return other attributes like error messages Etc however if we try to call the endpoint like this we get an object back which is not ideal so what we need to do is Json stringify this object we can do this by calling
[08:22] Json Dot stringify and then pass in that object as a parameter after saving this and hitting refresh we can now see the Json response coming through we can now integrate the openai API in this route file so what you need to do first is create your open AI account you can do this by going to openai.com click on product click on overview and then click on get started you will then be asked to create an account so you can go ahead
[08:53] and do this it's free to create an account after creating your account you should be presented with this dashboard screen in the dashboard you can view example implementations of these openai models but for our purposes we simply want to find an API key you can create an API Key by clicking on your profile and then clicking on view API keys and on this screen go ahead and click create new secret key and you can then copy this key over here please ensure to use
[09:23] your own key as I will be deleting this key after this tutorial after copying the API key we need to paste it somewhere in our project this API key needs to be kept secret and not be exposed to your users in order to do this we'll create a new environment variable file by creating a new file in the root directory and calling it dot EnV dot local we can then give our variable a name I'll call it open AI API key and we'll assign it the value of
[09:54] that API key we can then save this file in order for the environment variables to be made available to the project we need to restart the dev server so in the terminal I will press Ctrl C and Y before we start up the development server again we do need to install one more dependency we will install a package called open AI by running npm I open AI after that's installed we can start up the development server Again by running npm run Dev so back in our route
[10:25] file we need to import a few dependencies from the open AI package so at the top of the file we will import something from open Ai and what we'll import is configuration as well as the open AI API then in our git function we will create a new configuration object which instantiates the configuration Clause the configuration class takes in a few options and the only option we care about is the API key because the API key is stored in an environment variable we can access it by typing
[10:57] processs.env dot open AI underscore API underscore key this is the same name we gave the variable in the environment variable file we can now instantiate an open AI object by calling new open AI API and then passing it the configuration object we can now use the open AI object to call any of the many functions exposed by open AI this object can be used to create images using doll E2 it can create completions from any of the available models like DaVinci but for chair GPT they've now exposed this
[11:28] function called create chat completion this is what we'll be using this function types in an object and the first attribute is the model that we'll be using for chat GPT open II released the GPT 3.5 turbo model besides for the model we also have to specify the messages this is an array of message prompts typically this is the two sides of a conversation this includes messages from the user as well as responses from the AI each item in the array needs to be an object and this object has two
[11:59] attributes the first is the role which can either be assistant user or system and the second is the content of the message as an example if we add using the message to the AI our role would be the user the content will be the message that we sent to the AR AI something like hello there if we wanted to simulate a response from the AI for instance to train the AI it could provide another role but this time we will select assistant as the role assistant represents the AI and we could also specify the content of this message so
[12:31] in this case we're pretending the AI responded with I am doing well thank you feeding this information into the completion function we'll also have to train the AI in how we expect it to respond however there is a very interesting role available as well and typically you would start a conversation off with this role what I'm referring to is the system role the system role is neither the AI or ourselves see this is an internal role which can be used to train the AI into behaving a certain way
[13:02] for the system role we could instruct the AI to behave in a certain way or to role play as a certain person as an example I'll just give a simple instruction like you are a customer support assistant let's actually add another the message from the user and we'll just write a simple message here I'll just ask it the question like are you able to assist me so when we call this function the AI will process these messages in sequence first it will receive the instruction from the system role then it will receive a message from ourselves at this point we've now told
[13:33] it how to respond to a question like that and finally we're asking it a question the AI will now respond to this question this function returns a promise so what we'll do is we'll avoid the response and we'll assign the response to a variable lastly we want to take the response that we received from the AI and that is what we want to return in our service response so I will therefore replace hello I'm a bot with the response dot data dot choices and we'll describe the first result in the array let's go ahead and test this out I'll
[14:04] just refresh this page after refreshing we can see a few cool things coming through we are receiving a message what we're getting back is the role which says assistant so this is coming from the AI we are also receiving the content in this case the AI responded with yes I'm here to assist you with any customer support needs or questions you may have well can I assist you with today fantastic so let's start with the route for now we'll revisit this soon I would now like to move on to creating this user interface if you want to use the same Avatar that I did you can find it
[14:36] in the GitHub repo linked below but if you wanted to create your own avatar you can do that using my journey for this you can visit medjourney.com and then click on join data this will then ask you to join the mid-journey Discord chat you can just click on accept invite after joining the merge Journey Discord chat you can simply open up one of these newbies rooms and you can then generate an image by entering a prompt so in the message field type in forward slash imagine and you can then describe any
[15:06] Avatar that you want so I managed to eventually get a nice result using a prompt like this so after a couple of the themes I managed to generate this image and I was then able to remove the background using the Adobe Express web tool once you've downloaded your avatar without the background you need to then drop the image of the Avatar in the public folder and we start working on this side first let's create a section that contains body as well as these chat bubble so back in the page file is remove the heading and let's add an opening and closing main tag let's give
[15:38] the main tag a few styles by adding class name I'll add container margin left and right of Auto and the maximum width of 4XL I will then create a div that contains the chat bubble and I'll create a heading that says body says we'll give this heading a few classes like text to XL we'll make that text white and bold below the inning or create a new paragraph that contains bodies chat and for now I'll just add some text like body is thinking and I'll add some Styles like text white we want
[16:08] this chat bubble to have a blue background so in the outer div We'll add a few Styles We'll add a background blue or 400 I'll add some padding top and bottom or four and I'll add some padding left and right or 4 as well let's create another div that contains the image of body within this div We'll add an image component with the source of Slash bot dot PNG by adding slash anything we'll simply refer to images in the public folder we need to import this image
[16:39] object from next at the top of the skirt we'll import image from next slash image image expects a few properties so we'll specify a width of 512 as well as a height of 512 you can get these exact values by looking at the properties of the image that you generated but these values should work for you as well we do want to chat block and bought it to show up next to each other so I'll wrap these items in a new Dev I will give this Dev a few Styles I'll align the item's grid
[17:10] and grid columns 2. this should place these two items next to each other we also want to Center the text in this block you can do this by adding a few styles to this div all add flicks flicks Dash call for vertical alignment and justify Center to move everything to the center of the container next we also want to add this little arrow part to the chat block for this we'll add a new item just above the header we'll create a div we'll then give this div a few Styles first we need to position the stiff absolute which means we need to
[17:41] give the wrapping Clause a position of relative we can give it a height of 15 pixels a width of 15 pixels or give it a background color of blue for a hundred I'll move it to the right of the container by using minus right 7 pixels and will also specify a top position of 50 after saving this we can see this new little div Square showing up over here we also want to rotate this slightly by adding rotate and 45 degrees we can now see that little chat Arrow every year
[18:12] the next section we want to add is our prompt form so next we'll create a form just above the closing main tag and we'll add an on submit event through this form for this I'll add a new function called handle submit we can then go ahead and create this function we can add this function within the home component and just above the return statement let's go ahead and create this function by saying cons and also met this function will receive the event and in order to avoid refreshing the page when submitting the form We'll add the event dot prevent default function we
[18:44] can now add our fields to the form first I'll add a label and I'll give it some text like say something I'll also style this label office saving this fall will give this error message this is because all nextgis components are considered server-side components by default so in order to solve this error we need to add the following to the top of our page use client after saving that we can now see that the text is pulling through below the label we'll now add an input field we will set this to required and the type of text and will add some
[19:15] placeholder text like ask a question or say something nice after saving this we can see that the label and the input field is showing up next to each other they do want them to be aligned vertically so to do this I'll wrap these components in a new Dev I will then add a few styles to this wrapping div like Flex Flex column for vertical alignment and we'll add a space between these two items with a gap of four let's also style this input element by adding class name We'll add padding left and right or four padding top and bottom of two a
[19:46] text Gray of 700 a placeholder color of gray 500 a background color of white will also create the board there with a border color of gray 700 and pull around the edges with rounded large you can now see the input field pulling through this now also add a button we can do that by adding a button just below this wrapping div we'll give this button some text like send and I'll add a little icon like this rocket ship you can add icons by pressing the Windows key and period we'll give this button a few Styles we'll keep it padding left and right or
[20:17] four or give it vertical padding of two we'll create some spicing between the button and the input form with margin top of 2 We'll add a text Gray of 700 a background gray of 100 We'll add a border with a border color of gray 700 or round the edges with rounded large and will add a hover state to scale the button up slightly we have it over after saving this we can see the button showing up and when we hover over it we do see its scale we want this scaling to be smooth so we'll add some animations
[20:47] to this so on the button We'll add a few more Styles We'll add a transition all and then animate duration of 200 you can now see it grow smoothly on the button we also want to assign a type and the type will be submit I also want to create some space between the form and bodies section so for this I'll add some styles on the Forum and I'll add a margin top of six right the next section we want to create is this chat history that we see over here so below the form We'll add another div I'll add some
[21:18] styles to this div for now we just want to create some spicing between these three and the form so we can add a margin top of six in this div we'll be looping through the chat history but since we don't have any data yet we'll just contact it as the flight there so what we want to do now is once we submit this form we want to send this message to each other gpt's API so we'll add that logic in our handle submit function the handle submit function needs a reference to the values in this input field so in next what we can do is create a use ref site and assign that to
[21:50] this field so at the top of the file below either use client we can import use ref from react then within the home component we can create a new variable called message ref and we can make that equal to use red then in the input field we can add another property called ref and the sign message Riff to this we can now access the value of that field by creating a new variable like prompt and then saying that prompt is equals to message ref dot current dot value we can
[22:21] test this out by writing prompt to the console so back in our page we can open up the developer tools and then clicking on Console or just type in something like this message and then click Send and we can see our message coming up in the console so what we need to do is if we go back to our route file we can see that when we call the create chat completion function we actually passed the entire chat history to the AI that will also ensure that the AI remembers context like my name and other information so the way we can see this
[22:52] working is when we call the function we will first pass in the system message to Prime the AI this will remain intact within the route file however the list of chats or the conversation needs to be dynamic so we'll have to keep track of the past messages and we'll use type for that and then each time a new message is added for instance a message that we send or a response from the AI will be added to this list dynamically so back in the page file we'll create a new state to store our message history in
[23:23] order to create state or import use state from react then below message ref will create a new const we will call it messages and use type also provides us with a function to set the messages and we'll then call use type and initially the value will be a blank array I would also like to store the response from body in another use state so whenever we receive a new message from body the text in the chat window will automatically update for this I'll create a new cons I will call this the display message I
[23:54] will call the setter function set display message is equal to use State and I'll assign the initial value as I there we can now replace this hard-coded text with this display message so we'll take body is thinking and replace it with display message instead and we can see that reflected on the page there is one more state that I'd like to add and that is a loading state so when we send a message to the AI in the time that it takes for openai to get back to us we want to set the loading state to true
[24:24] and display a text here that says body is thinking for the duration of the loading phase so I'll create another state I will call this loading with a seter function of set loading this will use use type and initially the state will be false we can now make the response from body a bit more Dynamic by saying that if loading is true then we want to display some text like body is thinking else if loading is false then we'll just display the message you can test this out for changing the state to true and now we can see the text showing
[24:56] up saying body is thinking there is one more detail that I'd like to add to the chat block the wall body is thinking in other words while the loading state is true we want this bubble to have a bit of a pulsing effect to it so in the div that represents the chat bubble I'll add in some JavaScript code so we need to just remove this comment and replace it with this back tick so we'll add it to the front and the back we also then need to wrap this in curly braces so I'll add that at the front as well as at the back now we can add some Dynamic JavaScript
[25:27] code to this by adding a dollar sign and curly braces and we can then say that if loading is true then we want to add this built-in animation of pulse else if loading is not true we'll just return no styling we can now see that because loading is true the entire bubble is pulsing and if I set loading to false the animation stops right so back in our handle submit function when we sub submit the message the first thing we want to do is set loading do true then
[25:57] we want to build up our chat history so the first thing I'll do is I'll create a new variable called New Message list which is an array new message list will then spread all of the existing messages so it's the existing message history and we will then add our new prompt to this history list by creating an object and for this object we'll create a role of user since this is taking in our prompt as input and content will be equal to our prompt now that we have this new message list which includes the previous
[26:28] conversation history as well as the latest prompt from the user we can now call our route API at the moment the route API is set to a get method because we force informed data to this method it needs to be changed to post so back in our page file we can now call our API by calling the fetch method and then passing in the API endpoint with front slash API and Bot fetch API requires more attributes so our second parameter will be an object in this object we'll specify the method as being post we need
[27:01] to assign headers to this request and in headers we'll set the content type equals to application slash Json lastly we need to specify the body of the request the body will take in this new message list as its input this object needs to be stringified so we'll call Json Dot stringify and within Json stringify we'll pass in our object this object will have a parameter called messages and for messages we will pass in the new message list as input this now means that we are calling our custom API and then passing it the entire
[27:33] message history as input the fetch function returns I promise which we need to avoid in order for a way to work we need to convert our handle subnet function to an async function after our custom API has completed we will return the response from the AI in the response attribute so therefore after calling fetch we need to assign the response to a variable as well since it's possible for the route to return an exception we need to handle any errors that it might throw we can do this by wrapping the fetch logic in a try catch block if we
[28:05] receive any errors or simply write them to the console by calling console.log error Dot message if we do receive a response we want to check if the response dot OK is not false if it is we can write some messages to the console but for now I'll just return out of this function we can now grab the data from the response by creating a new variable called data and then on response we can call Dot Json this will convert our stringify it response in the route file over here back to a JavaScript object
[28:37] the Json method returns a promise which we need to await right so the data object will now give us the response from the chatbot this response will include both the role which should be assistant as it's coming from the chatbot as well as the content which is the response as we get back from the chatbot the data object will now give us access to the role as well as the content of the message coming back from the chatbot so we can now update our new message list to include this new response from the chatbot as well so now we can update a new message list by
[29:09] adding the response from the chatbot to this list so our new message list are called the push function and I'll open the new object to this list this object will contain the role which we can get from data response role we can also set the content equal to data dot response dot content new message list should now contain all the conversation in history up until now as well as the prompt that we just sent to the AI and lastly we've added the response from the AI bot to
[29:39] this list as well now that we have this new message list array we can set the messages state by calling set messages and then passing in the new message list variable this means that messages now have an updated view of the conversation but we also want to take the response from body and display it in his chat bubble to do this we'll call this set display message function and then pass in the data dot response dot content value what I also want to do is after we've processed this message we want to
[30:10] clear out the text that's in this input field to do this we can call message riff pod current plot value and we'll set it equal to an empty string also once all of this processing has completed we want to set the loading State back to false so after catch I'll also include this finally block within finally I'll call set loading and I'll set it to false this means that whether we get a response from the API or we receive an exception we will always set loading to false we now need to make a
[30:41] few changes to the API route when we call the API we are sending the message list in the body tag we now need to receive this list of messages in the API route So within the route file I'll add following line of code I'll create a variable that these structures messages from the request object because the request object is a stringified value we need to pass that back to a JavaScript object so on request I will call the Json function because the Json function returns a promise I'll await the result
[31:13] now we have a view of all the messages in the conversation so now we'll make a change to this message array we'll leave the very first item intact which is the priming instruction from the system purple remove the rest of these objects and instead We'll add the list of messages by spreading the messages variable we should be able to test this out in the console so I'll open up the developer tools and I'll open up console you might have noticed that we are getting an error message on the image component saying that the old property
[31:45] is required so let's scroll down to our image component and let's add in that alt component I'll simply give it a name like body after refreshing the page that error message has been resolved the first thing I would like to taste we can test this out by writing data to the console so back in our application let's try this out I'll write a message like who are you and I'll click Send we can see the response object coming back within the data object within the response we have an attribute called message where clearly we are receiving a
[32:16] response from the API as well as the role that means that this logic needs to change slightly instead of just looking at response we also need to draw one level lower to look at message.roll as well as message dot content I would also like to have a look at the value of new message list so let's write that to the console as well I'm going to refresh the app I'll ask the question again who are you and we can now see our messages reflected in the console for the very first message we can see our prompt
[32:47] under the role user as well as the content who are you the second entry in the array is the response from the AI or let's write a comment I will say my name is Leon and click Send after receiving a response we can see we now have an object with four entries the first being the question from the user the second item being the response then we can see our message my name is Leon as well as the response from the assistant hi Leon how can I help you today so we can now see the site being updated with the chat
[33:18] history and we can also see that the AI is indeed receiving the context like my name and responding with an appropriate answer I will now remove these console logs we can see that the chat window is missing that response from body and that is because we reset display message we just need to add message to this structure let's try this out by entering my name is Leon and clicking send we can see the loading State working as well as this thing is pulsing after sending the message the loading state was set to
[33:49] false and the bubble stopped flashing we can also see the the response from body and our input field has been cleared we can now work on writing out the chat history by going down to this div within this therefore create some curly brackets in the sky it will map through messages map will call a function which takes in a single message as input and we can now return something to write back to the screen in react when mapping through a list we need to provide a key prop at the highest level element so I'll add key I'll set the key equal to
[34:21] message dot content for this diff I'll add a few Styles as well so in class name I'll add flicks items center with a gap of 4 and padding top and bottom of two within this therefore add another div with a few Styles this specific div will represent this little Avatar icon so we'll give it some space we'll set a width of 10 of the container all set it to flicks as well as items Center and based on whether this message is from the bot or ourselves I either want to
[34:52] show the Bots icon or the text you so I'll add this little condition that says if message dot roll equals assistant which means it's from the bot then we will write out a Dev with the following Styles a width of 50 pixels a height of 50 pixels we want to round the image by providing a rounded or full and I'll add an overflow of hidden to prevent the image from overflowing outside of the div within this therefore then add an image tag and I'll link this to the bot PNG image I'll give this image a few
[35:24] class names as well or provide a width or full a height or full and an object cover to ensure that the image takes up the full width and height of the dev then if the roll is not assistant then we'll simply write out another div we give this a few Styles also detects the extra large and a font off bold within the div I'll just write the text U you can now see the two entries showing up so let's also add the text so below this div We'll add another div So Below this image Dev will add another div and
[35:57] within this div we'll write out message dot content we can now see there's two messages showing up this is all these containers a bit so I'll add a few styles to this Dev I'll say the background gray of 100 a padding top and bottom of two padding left and right of four I'll set the border and the Border color of gray 400 and all around the corners with rounded XL that's looking good let's try to add another message to this I'll tell it that my dog's name is Ruby and I'll send a message we can see the loading State kicking in and after
[36:28] that we can see the response coming back from the bot and we can see our messages in the chat history the responses from body is very plain at the moment and it's very stock standard 3gbt Behavior so what we can do is go back to our route file and we can now change the message in the system role to really tell the bot to behave in a very specific way as an example you can tell this bar to behave like Elon Musk Donald Trump or any celebrity that you can imagine you can also ask it do role players any fictional character as well
[37:00] so what I'm going to do is remove this text and replace it with something else so for this demo I came up with this prompt you are a friendly Little Robot your name is Botti you are helpful and kind you have a little Quirk where you go beep boop in between certain sentences you love nature and Earth you have a great sense of humor you find humans fascinating after feeding at this prompt we can try to ask the questions again I'll ask body do you like dogs and send the message instantly you can see a very big difference in the response you
[37:31] can see that personality Quirk where the guys be Boop it's also a lot more playful and fun in its response we can also ask body more complicated questions as an example we can ask the coding challenge like in JavaScript how can I write messages to the console and but it will then give a response what is quite interesting if you look at the response it's actually using mark down language to format its response that's what these three little backdicks are they represent the code so to make us look better we'll convert this response from
[38:02] Mark down to something that's a bit more readable so to do this we need to install two more packages we can stop our development server by pressing Ctrl C and Y we can then install the following two packages by running npm install HTML react parser as well as marked now press enter after installing HTML react parser and marked we can start up the development server again and we can go back to our page file at the top of our page file we want to
[38:32] import marked from The Marked package as well as pars from the HTML react parser package we can then make the following change so at the point where we write out the display message in the chat bubble we can wrap display message in the marked function so after doing this we'll see that the message is being converted to HTML but obviously we don't want to display the tags as a string we want to convert this into HTML as well so for this we'll call the parse
[39:02] function and then pause in the marked display message into that we'll ask it again how to write messages to the console and you'll notice that the output looks much better now also if we have a look at the developer tools specifically the HTML elements we can see that the code is actually added to a code HTML element so if we wanted to take it one step further we could add styling for the code HTML elements specifically to show you an example of this we can go back to our globals.css file and we can add styles to the base
[39:34] layer in this case We'll add some styles to the code element by calling apply followed by Tailwind CSS classes so I'll spot it again in JavaScript how can I write messages to the console and you can now see that styling reflected every year right so we now have a function in AI chatbot built using chat GPT the next thing I'd like to show you is how to deploy your application to production basically there are two parts involved to this first is we need to deploy our
[40:04] application to GitHub so if you haven't already I recommend signing up for an account at github.com and then coming back to the IDE from here we can click on the source control icon on the left hand side and we can then enter a message something like initial deployment and then create the Commit This also means that you need to have git installed as well I'll have a link to both GitHub and git in the description below if this was successful you can now publish the branch to GitHub by clicking on publish branch and you
[40:35] will then be asked to create either a private or public repository this is completely up to you I'll make this public a vs code will now deploy this project to GitHub once it's completed successfully you should get a message like this saying the project has been published to this repository lastly we will then the employ this project to versel I'll leave the link in the description as well but head over to versel.com and create your free account after logging in click on add new project and from here you'll be able to link your versal account to your GitHub
[41:06] account after doing that you will notice the chatbot showing up in the list of repositories now we can simply click on import so now we can give the project a name I'll just leave it as chatbot we can also set environment variables which we need to do in our project under the dot env.local file we have one environment variable called open AI API key so I'll copy that over to the environment variables and I will also copy over the value of that key and click add lastly we can now click on
[41:37] deploy the deployment will take a few minutes to complete after the deployment is complete you'll see a screen like this with the confetti you can now visit our application by clicking on continue to dashboard and we can then click on visit so now your site is live and available to the public you can also assign a custom domain name using Versa let's give this a spin we'll ask sporty how are you after sending the message we can see body thinking and eventually body comes back with a response also tell boti what my name is and Botti
[42:07] sings me a friendly message back and then also ask body what my name is and it was able to retain that information so before we end this video there is one more piece of advice that I need to give when I bought this project initially I was getting all sorts of error messages after deploying to versl when I submitted the message to the bot it was just thinking indefinitely and in the console I noticed error messages related to course error messages so if you run into that same issue you can try the following to resolve that error message this worked for me in this file
[42:39] next.config.js you can add a new attribute to this next config I will just paste the values here you are welcome to freeze the video and just copy this text so he passes this icing headers function which returns the stuff here I managed to find this guide on the versaille website in the documentation as well so after adding this content you can Simply Save the file go back to your Source control Tab and add a comment like add course headers and you can then click on Commit and click on sync
[43:09] changes vs guide will now push these changes to the GitHub repo which will automatically trigger a deployment on their cell after that you should see the course errors being resolved I really hope you enjoyed this video and if you would like to see more content on open AI or any of its apis or Ai and chatbots in general please leave a comment I would really appreciate if you could subscribe to my channel and like this video thank you very much for following along I hope you can see the value in this chat GPT API and I would love to
[43:42] see your projects and how you end up using this API I'll see you in the next video bye bye