Creating your own ChatGPT clone with .NET: A Step-by-Step Guide

foreign welcome to my Channel today we're going to be creating a chat GPT clone using.net core Blazer and the open AI so in order to get started we need to head over to visual studio we'll create a new project you want to select the Blazer server app click next we'll call this chat GPT claim next right that would have created our basic project for us the next thing we're going to need is a API key which you can generate on the open AI site so if we head over to the browser you can in your account head over to the API Keys page and then click the create secrets this will pop up a window make a copy of this key because you're going to need it if we now head back over to visual studio on your project right click and go to manage user secrets in here we'll make an open AI key and within there we'll put the API key I'll paste that in there right once that's done the next thing we're going to need to do is install a new get package to access the openai apis now I've created a GitHub repo which contains a library which you can use for the purpose of this so I'll head over there quickly and just show you so yeah it's called openai.net and the package in nougat is called openai net.client I'll put some links in the description for you guys to be able to access this so if we head back over to visual studio what we need to do is add a nuget package we'll add openai.net CW we'll install that next thing we need to do is head over to our program.cs and add the required services it's out of the top here using openai.net and then go down to our services and add them in there's a nice extension method you can use on here just to add all the required services I mean what we need to do is specify within the options our API key that we just created so in order to access the API key from the secrets file we can use the build.configuration specify the key I'm sorry if I could type and then API key and then we should be ready to go what we'll do quick is just run this website as is just so we can see the standard template and then we can start modifying it from there okay so the apps up and running as you can see we've got this basic template it's got a counter page where you can increment the counter and it's got a fetch data tab which lists some weather forecasts for us so what we'll do now is head over back into Visual Studio okay so the first thing we're going to want to do in Visual Studio is create a new page that we can go to so for the purpose of this I'm just going to copy this fetch data page we'll rename this to chat and then we'll just modify this a little bit so we'll this is the route that it's going to be presented on we'll change that to charts to open AI chat we can get rid of this what we do need to use is the openai.net namespace and then we're also going to want to inject the I open AI service and then let's just change a few of these bits over here as well and we can pretty much get rid of all of this one up the next thing we're going to need to do is get rid of this in case what we can do is quickly just head over to our data folder we're going to create a new model to store our chat conversation so we'll just call this chat info and on here all we're going to need is just the message and for the purpose of this we'll just create another string for the user so we can store both our messages and the responses all right perfect now the next thing we're going to need is just another model to hold the search data from the form so we'll just add another class called search info we add a property called search string which is just a string or such text okay so if we head back over to the razor page what we need to do is declare a property over here for our search model so we'll use the search info class we've just created right perfect the next thing we need to do is create our edit form so we'll put this over here we'll add an input for the text we'll bind the value to our search model oh sorry such model dot search text and the other thing we're going to need is just a submit button also add a button over here submit button and we'll call that search all right perfect okay next thing we need to do is just an array over here to store our chat history this so we'll use our chat info class that we created a minute ago history for now and then what we'll go ahead and do is create a new method that we can call to call the API and return the results for us so we call this search and then with the open AI button a client Library there's two methods you can call there's a synchronous method and there's a streaming method for the purpose of this we'll use the streaming method so that we get the text as it's coming through from the API so in order to do this we'll get the response from the API sorry open AI and we'll look at the text completion service and we'll get the stream and then all this takes is a parameter that is the search text so we'll pass in our search model dot search text and then once you've got our results we can assign it to the history so what we'll do is go ahead and add our current request to the search history so the history.add and we'll add a new chat info and this will contain our search text we just searched for search model that's search text and we'll set the user oh sorry set the user to certain does Tech next thing I'll do is I'll add another record for the response that's going to be coming in from the API we'll just set the message to Blink for now and we'll call this AI and then what we'll do over here is we'll assign the last record in here to the current text that's coming back from the API and we're going to be appending this because it's a stream that's coming through you'll see in a second so responds to result and then the choices contains the text that's come back from the API so we'll do that okay now we've got a method in place we can go back up to the edit form and we can set our model which is our search model we also want to set the unvalidate submit sorry on validate submits to our search function I'll save that and then okay the next thing we'll do is we'll just create a simple list over here to render out the items so so for each item in the history I'll go ahead and we'll just print out a simple lie I'll just put two divs in here and we'll print out the user in this one item.user and in this one we'll print out the item Dot message save that the one other thing I just want to do here quickly is once the search is completed it's just to clear the search text again okay perfect I think we're ready to run this so let's go ahead and run this okay before we do that actually one last thing we need to do is just on our navigation menu let's just add an item to navigate to our new chat page just copy that one we'll call this chat and we'll just change this path to chat okay perfect we'll close that and then we shall run this okay so if we switch back over to the browser oh we can see the apps up and running we've got our new chat menu item we created and let's test it out so we'll say right a poem about Christmas yep and that's not written poem you'll see that the response is quite short what you can do if we switch back to visual studio is you can specify options when you call Api so if we go over here and we see options and then what we can do is say o dots Max tokens equals 1024 I think about defaulted set at 16 which is quite low so we'll do that we'll save it and let's just stop that quickly again and then we'll run it again okay if we switch back to the browser and we try that again we should get a slightly longer response come back you'll notice at the moment that it's waiting for the entire response to come back before we see anything on the UI if we went to rectify that if we go back to visual studio so what we need to do is call state has changed what this will do is cause the UI to re-render itself and if we run that again and then switch back to the browser we should be able to go to the chat and ask the same question again um and this should produce a longer answer for us and also show us as it's writing as you can see perfect see if it can tell us a joke oh there we go well I hope you enjoyed that um that's a very basic example of how to use the API obviously you could take this a lot further but if you like this please consider subscribing and you know hit the Bell on the notification to get notified of new videos thank you cheers bye foreign

Channel: Tim Does Tech

Views: 7,959

Keywords: CHATGPT, .NET, dotnet, OpenAI, CHAT, AI, Blazor

Id: hRkVGSMijjs

Length: 12min 11sec (731 seconds)

Published: Fri Dec 30 2022