Build your own ChatGPT Chatbot in C#

hello and welcome to this video where we will set up a chatbot using chat gbt we will be using C sharp and we will actually create a Blazer server app so let's just dive right into it I will open a new project inside Visual Studio 2022 so we will say create a new project we then want to choose Blazer server app and say next and let's call this for chatbot app let's go and say next in this case we're going to use the.net 7 framework and that's actually everything so we will just say create so now that our project is set up I want to go to pages and then we want to open the index file because I just think we will go and get rid of everything in here except the page title and we could actually go and name that for chatbot so one thing we need to know when we connect to the chat gbt is that right now at this moment we only have The DaVinci zero zero three API that we can connect to and that's the closest that we come to the actual chat gbt but as you can see on their website when you log in you can see that you can join the chat GPT 4 API wait list and when you see this video it might already be available so you can just go and use that model instead hopefully it will be mostly the same way we connect to chatgpt4 but we will wait and see so now we can just go back to the project and it should be pretty simple actually to create this chatbot when we have a API that we can connect to that actually give us all the answers and when we use Blazer as we do now inside our index.racer file we can go and specify the HTML we want to use and beneath we can also go and add the code that we're going to use so there should actually not be any other pages that we actually should interact with the whole chatbot could be made on the same page and I should also point out that I have actually not created this chatbot before I started this video so we will go and make some trial and error but I'm pretty sure that in the end we will have a nice chatbot that we can communicate with so first of all let's go and create our code section then we can go and include our on initialized async method this is the method that is going to be run when we load the page I also think we want to have some layout up here so we could go ahead and create a div and also a class and say that this should be our container and when we use Blazer then bootstrap is already set up so we can just go and use the classes from bootstrap so the next thing we can do is to go and make another div inside in this case we want to create a class that we call row and then I think maybe we could go and create a new div with a column of let's say four and I actually just want to keep this empty but let's go and copy and paste it two times and this one is going to be empty and also this one so that we just Center like a container that we can use for the chat box so that we actually want to work inside this middle column and if you don't understand bootstrap then just hang on because we will look at the page and I'll show you why we're going to do this so now we have a container for the actual chat box where we're going to write to the chatbot but maybe we should even go and divide this even further so we could call this for messages and then we could go and call another diff to have a class of text message so the idea here is that inside this message div we are actually going to see all the messages like you know from messenger if you have Facebook then you write in messenger and actually just on smartphones you have this area also if you still receive some SMS on your phone and now I actually just found a picture so it's like this I mean that we're going to set it up and then the next thing we have is the container where we're going to put a input field and also a send button so we can send the message to the chatbot so just to be able to actually see the design of this let's go and create a div template with a class of response and then just go and say Ctrl D to duplicate this line and then we want to say question so these boxes should be when we send a question so we can see what we actually sent ourselves and then we also have the response from chat gbt and the reason I have them now is actually just to go and design these inside our CSS folder so we can go to the www.root folder and inside the CSS folder we have our site.css and let's just go and scroll down to the bottom so I'll just type in our classes that we created we have the messages which was the whole area where we have the response and the questions inside so I actually think we have to go to the index page again because in here we will just go and type some random stuff and I also did it to the questions just so we have some template text that we can go and see so let's go to the CSS again and in here I actually want to specify a height on this so we could try to say that the height should be 800 pixels we could also go and make a border and make it one pixel solid black just so we know where the area is and then let's go and say that the width should be 100 and then we want to look at the response and I actually think we will just go and run the application now because we can actually go and live update it with the CSS so we don't have to close the application and open it again but we can actually easily see when we change something inside our CSS file so let's go and open the application and I can see we actually have this box now which is centered inside the White area and then we have our response text and we also have our question text so I will go and make this a lot more prettier than now and that's why we're going to change the CSS I actually also want to go and delete or just remove this menu over here so that we have a whole clean page and also this top menu here so let's just go back and inside our shared folder we have our main layout and it's actually in here that we have the navigation menu so we can just go and get rid of that and as you can see we also have a link here saying about and that's actually the menu off as you can see the top row that we had on our page so let's also remove this and for this to work we also have to go and say hot reload so if we go back to the page now we can see we just have a clean white page with only our chat box inside but let's go back to the code and then go into our index.razer file oh actually we want to go to go to this file because we have to style the response and the question so my idea is to have it like you saw on the picture where we have the response on the left side and we have the questions on the right side so back to the code we can first of all say that we want to have a background color and we could go and make it gray but I think that is too dark so maybe light gray and if that's too dark we will go and just make it a hex color instead then we want to say that it should have a width of let's say 80 and then we also want to give it some padding so that the text gets a little much more space so let's say 20 pixels and let's actually go and see how this looks now and as you can see it actually looks okay we need to have some margin around the box also so that so that it don't hit the edges of our message box so let's go and create that margin and also maybe 20 pixels and let's see how it looks so this is actually okay I will also go and make some Auto radius and set it to 20 pixels again and let's see how that is and now you can see it actually takes form now we might want to make this text a little bit smaller and then let's go and make it white so we want to say color white and then the font size let's set that to 13 pixels and now you can see it actually looks okay but when we make the text white it's a little bit more difficult to read so maybe if we go and make it actually a little bit darker the gray box so maybe we should just go and say great and I actually think this looks pretty okay so let's just go and copy and paste everything to our question but in this case we should maybe make it like a dark blue let's see if that is a good color so it is maybe a little bit too dark so I found this predefined color called Dutcher blue and it's actually a pretty nice color if we go and save it you can go and see that it actually look okay now we then want to have that the box is on the right side instead of the left side so what we can go and do is to set a float and set it right you have to be careful when you use floats but I think in this case that it actually is okay if we see the project now we can see that we now have it in the right side just as we want to so I think there is a little bit too much bass between the 2 so let's go and maybe say that the margin should be 10 pixels and I can see it's actually the other one that should be 10 pixels so 10 and 20. so now you can see it came a little bit closer but we have to do the same with the gray box so up in our margin we say 10 pixels also and when you do it like this you specify that this 10 is the top and the bottom and then this is the left and the right so again let's see how it looks and well it is a little bit better maybe we could set it to five and also this one and then I think it's okay for now so now we actually have a template for some text and if we go and inspect this then we can see that the box here is the message box and then we also have a text message so underneath this message box we want to add the input field where we can write something and then also a button where we can send the message so back in our application we want to go to the index.racer file and then inside our text message and then I want to create a input field and the value in this input field should bind to a variable that we're going to create and let's just go and call it for message so down in the code section we can now go and create a public string with the name of message so now whatever we type inside our input field will be bind to this message variable and then the second thing we want is actually just a button and when we click that we want to execute a method so let's go and say button and we just want to say that it should send so the text on the button will be sent and then we want to say on click and that should be equal to the method that we want to execute so let's just call it for sent message and then we just want to go and create this method so copy this name and insert it down here and then we want to say that it should be a public and I think we want to run this as a task so it should also be async and then let's close it off here but I will actually go and create a new method already so inside this sent message we just want to make the actual API call to chat GPT and I don't want to sit and write everything because I already created an article about this I do also have a whole other video where I show how you connect to chat GPT but I will just run through the code so you understand it and if we scroll down yeah you can see that I actually have a public class here called chat gbt and this class will actually just connect to the text DaVinci 003 model and as you might notice this is actually just a console connected to chat gbt with so we actually need to do something with the code so first of all I just want to go and take everything inside the code here without taking the HTTP client so let's just copy this go to our app and insert it we do now get some errors but basically what is happening in here is that we have our API key you want to go and get your own API key because every call you make costs small amount of money then we go and set the default request header inside our HTTP call where we add authorization and because this API key is going to be used as a bearer token then we say Bearer and we insert the API key so that is going to be our authorization when we send the request to open AIS API we then have some Json content where we're going to say we have a prompt and this is actually going to be the text so we can already go and say that this should be the message variable because that was the one we created up here and it's just bind to the input field so whatever is going inside the input field will be in the variable called message and this will of course only be executed when we click the button we say send message so this one is going to be run but in our case we're going to connect to the model called text DaVinci 003 this is still the best model right now to connect to and as a showed you earlier we will soon be able to connect to chat TBT 4 version so go in and see if that is the case now that we can actually connect to it because then I will hope and only think that you have to edit this model so that it fit the chat dbt4 so we also have to specify how many tokens we want to throw at this request and the tokens depend on what model you're connected to so it's a little bit hard to calculate but the maximum token you can send is four thousand but you also have to know that when you get the response back then it also count as tokens so you should not really send a huge message to it because then it's not able to send so much back and you actually don't get the response then but the response context is going to be created out of the HTTP call where we say post async and we want to go and Target the API dot openai.com slash V1 slash completions and and then we want to send our Json string with the request so as you can see now we have a lot of red underlines and that's because we actually need to include Newton soft.json but we will do that in just a moment so when we do this we set the post async on our HTTP call we can go and say that the response context down here is going to fetch the content that we got back from the request and then we say read as string async so this will actually give the response back where we can go and deserialize this object just say dynamic because then inside the data we can go and Target the choices where the index is zero and this is the way that we actually going to get the text from the request so you don't have to think so much about it that is just the way you have to do it because that is how the response is built that we receive after the API call but now let's go and get rid of these red lines so first of all let's just close the application because we want to right click project and say manage nougat packages go to browse and then go and write newtonsoft.json so we want to install this one and it's actually just the newest version so just go and install that and when that is installed we can go back to the front page or our index.racer page and then just hover over this Json convert and as you can see it will then say show potential fixes if it doesn't do that just hit Alt Enter and now you can see it recommend that we use the Newton soft.json library that we just installed and as you can see down here we actually going to return this because this came from the code that we just copy and pasted so in that case it was just in a method for itself that returned the string so I don't think we have to do that in here because what we will do is just go to make a list where we push this inside so that we can go and display it up here as a list so we also have to include this HTTP so to actually get this I actually think we can just go and use the private static method here called HTTP client and it's already called HTTP and creating a new instance of the HTTP client so let's go and copy this and paste it just beneath the messenger and we can see the error messages is gone it doesn't mean that it works right now but we will go and test it in just a moment so we also need to have an API key so if we go into open ai's website so let's go to open AI under the developer here we can say API references and then you could see up in the corner if you like them if you're not logged in then create a user in my case I am logged in so I can click it and say view API keys and as you can see I already have a bunch of API keys so in here I can just say create new secret key so you can actually see I have already the maximum API key so I'll just go and delete one of them say revoke key and then create a new one so we will go and copy this and put it inside the API key and in this case it doesn't really matter that you see this because I'll just go and delete it again once I stop this video but let's go and test this and we can actually go and test it in a simple way because we can just go and say inside our empty column here that we will have a paragraph and let's go and say that we have a variable called test testing so down here at the message we just want to go and say Ctrl D to duplicate the line take the testing and create this variable so that down here we can actually just go and say testing should be equal to whatever we get so let's go and see if we get any errors and we do actually get an error so let's see what that is and it's because we need some encoding over here so if we just scroll out a bit here we can then go and hover over this encoding say Alt Enter and use the system.txt so now that error should be gone so let's go and test it again and now you can see we have the messages so let's go and say hello and say send and then you can see that the model actually came up with a response here so it takes a little while I think it may maybe took around three seconds or something then this answer came so what we want to do now is actually just to include it into the layout that we have so let's go back so my idea here is that we know that when we send a question or we send a text to chat gbt then we will get a response so it will always be you know back and forth messaging you should not be able to send to message after each other because what should it then answer for so it's not like you know texting a friend or something that you maybe send three messages and then your friend answer and he sent two messages because it is a chatbot so it is really one message and one message so my idea is to make a for Loop and actually before that we need to create a list of strings so let's go and say public and then say this should be a list and it should be strings and let's call this for messages and say that we have a new list of strings and then we actually want to start that you sent the first message because you want to tell it something so we save messages and it's inside the send message because when we click on the send message button then we want to add our message to this messages list so we could say add and then we want to add the message that we sent and then we go and copy this because at the bottom we don't want to display this anymore because we can just go and say that the results should go directly into our messages list so by doing this we can now take the messages list and go and fold each it and go and make a for loop on it and the reason I want to make a for Loop and not a for each is because I actually want to have the index because we know that if it is a index of zero or actually just a even number then it is me that have sent the question and when it's an odd index that we hit then it will be the response from chat gbt so this is the code that we want to use we want to say that we start with a integer that is called I that will start at this index of 0 and then we want to say that it should only continue if I is less than the length of the messages list and then go and increase it by one when the for Loop has run and to check if something is even or part we can go and use the modulus so we actually want to say if I modulus 2 is equal to zero then it is actually the question that we sent so let's go and take this template that we create and put it inside this if statement and get rid of all the text because then we want to say that inside this message or actually it is the messages then we want to Target the index of I because we know that this is the message that we sent and then we can just say else then it must be the response from chat GPT so also go and remove this and say that this is the message from chat DBT so let's go and test this let's just close the application and open it again so now everything is blank just as we expect so again I want to say say hello and send this you can see we have the message now but we actually get a exception so there is actually something wrong with the code so I did find out that we have to do some extra things here we need to set this to string because else we cannot insert it into our messages because this is strings that we're going to handle and then we also have to set this state has changed because else we cannot update the view this is basically just telling Blazer that the UI should be updated so let's go and test it again and we will say hello and now you can see we actually get a response but if the box is not as we want it to be so we will also just go take a look at that and I actually think if we sent this again we will actually get an error and that's because it right now cannot handle two requests so we also have to go and do so we can actually continue the conversation so back in the code I want to go to the CSS because I maybe do think that we have to display these as black so what I did to fix it was actually just to adding the float lift to this response because now you can see we have them aligned just as we want to have them but as you can see we now get it right but if we click again we still get this error so we also have to fix that and I believe that inside our code in the index.racer file that it is because we need to set this HTTP to a new client every time so let's go and say new HTTP client so every time we make a new request we are not going to reuse the HTTP we're just going to create a new HTTP client and let's go and close the application and open it to see if this is now working so we say hello and send it and now we can see we actually get the answer so let's try again and you can see it says hello again and if we just try again and again it actually just say it actually just say exactly what we wanted to say so let's just try to refresh this page and then say what is the capital of France and say send and you can see it just gave us the answer but I think we could go and make this a little bit more prettier maybe remove this order and just go and make it a background and also just style this so it looks a little bit more prettier so let's go to the code and inside our CSS file then we have the message here which is going to remove this border and let's say that we want to have a background color which should be a very light gray and this is not light enough I think so maybe EE and now you can see we have this nice color so let's go and also make some photo radios to this just go and copy and paste it from the other class and also make some padding so now I actually think it looks pretty nice you can always go and make it look much better but for such a short project I think that's okay so let's go and make this a little bit prettier so in the index.racer file we can actually just go and say we want to Target this class called text message and include it in our CSS folder and then say that we want to Target the input field and also that we want to Target the button inside this class so first of all I want to go and make it a width of 100 also create some padding maybe just 10 pixels and the button I also think we want to have a width of 100 and also 10 in padding and on the bottom make a color of white and a background color which should actually just be the same as this one so we use the Dutch blue and now you can see it actually starts to look a little bit better we can then go and remove the Border also so just say no and then I actually also want to make some photo radius but in this case we want to make it so that it's cornered up here and not here but down at the bottom also so it looks like it's just one big box so the way you do it for the bottom is just to say that the first two should be zero this is the Lift Top Corner the right top corner and then the two button Corners so if we go back now you can see that it has these powder radius we then want to remove it from the gray boxer so in that case just going copy and paste this and we will just do it the opposite way so take these two zeros and put them on the other side and that was actually the Box up here it actually looks pretty good but it was not what I was intended to do so let's just go and put the Border radius on the message instead and let's also set it on this response box so I do think that this actually looks pretty good we could even go and just delete this one here and this one here so let's actually try to do that so for the response we do still want to have 20 pixels at the right bottom side so as you can see here it will now put the 20 pixel in Boulder radius and then we just have to do it on the other side for the question now I think it actually looks pretty good I also want to make the Box fit the messages and we also need to remove this border at the place where we write the question or whatever we want to send so to remove the border from the text message input field we just say border none and then also remove it when there is focus on the box so you say outline should be none and this border color we can actually just get rid of it and then I think we want to use the same gray color from the response and put it on our input box so let's go and see how it looks and I actually don't like this color so let's try maybe a light gray instead and I do think it was a little bit better maybe some more padding so 20 pixels and padding and I think now it's it should be okay but we still want to fit the messages that is already created so we want to have this to be a minimum height and a maximum height so again inside our messages here you can see we have a height of 800 pixels that should be just the max height and then I think the minimum height when we have no messages inside it should be maybe 200 pixels so we say minimum height and then it should adjust as we put messages inside the box so let's try to see if that works so right now we have these matches messages but let's just clean it all up so we can see here hello and send and it actually sent a pretty long message back now I will just say say hello and as you can see there is some something wrong with the background here but we are going down so that's good so I think this has something to do with that these are just floating objects and that's why you should be careful with floating objects so if we just go and make it maybe a fixed size instead so let's say 500 and 500 so this would actually just be height of 500. then we can see it actually still is going over the size and that's because we have not a overflow that is saying scroll so let's go and make a overflow on this and it should be on the y-axis so we can say scroll now you can see we can scroll in all the messages that is going to be sent but I think that is actually all there is to create this chatbot you really have to take care of how much you sent and also how much you receive so you might want to go and create a exception for this that can go and handle it sometimes the answer is also taking a little bit of time to come so you could maybe go and include a loading icon but I think this is basically how you go and create a chatbot like the bare bone of what you should do or what you can do with C sharp and Blazer so go and have a nice day and I'll see you in the next video bye

Channel: ZetBit

Views: 7,151

Keywords: chat gpt, chatgpt tutorial, artificial intelligence, software engineering, chat gpt tutorial, open ai, artificial intelligence course, chatgpt programming, chat gpt app, chatbot, chat gpt chatbot, build a chatbot, language model, software development

Id: f4C75tmsLHA

Length: 29min 8sec (1748 seconds)

Published: Thu Mar 30 2023