WebsiteGPT: A Step-by-Step Guide to Building and Deploying a Custom GPT to the GPT Store

--- type: transcript date: 2024-01-12 youtube_id: MGs0UvKuthM --- # Transcript: WebsiteGPT: A Step-by-Step Guide to Building and Deploying a Custom GPT to the GPT Store in this video I'm going to be showing you how I built website GPT which is a custom GPT now live on the GPT store I'm going to be showing you all the different steps that you can take to deploy a service like this and all of the different pieces on the back end on how you can set this up and the thing that's nice with what I'm about to show you is you can do this All basically for free or at very very low cost First I just wanted to give you a quick demonstration of what this actually [Music] does [Music] so now that we have an idea on what this does we're just going to hop right within vs code the first thing that we're going to do is we're going to go ahead and create a new project you can just go npm n-y once that's created you can make an index.js file within our index.js file we're going to run through a handful of steps there's going to be only about 60 lines of code to get everything up and running and then I'm going to show you where we're going to deploy this and then we're going to set up our GPT action which is how we interact with our server the first thing that we're going to do is we're going to import all our dependencies now while we're importing all these dependencies make sure you install both crypto and express as dependencies next we're just going to set up the file name and durame to be able to use it with our import syntax next we're going to set up a directory that serves static files on our server we're just going to do a quick check to see if the directory exist if it doesn't we're going to make that directory from there we're just going to create an instance of Express for our application once that's set up we're going to set up a variable for the port that we're going to be listening on next what we're going to do is we're going to set up some middleware this is the middleware that allows us to interact with that GPT from the front end to the back end of our server next we're also going to have somewhere to parse the Json and the URL encoded data from there we're just going to Define our route we're going to have the route on the endpoint of deploy next we're going to go ahead and generate a unique file name from there we're going to set the path for our new file then from here what we're going to do is we're going to have a basic HTML structure we're going to have the Tailwind CSS CDN and then we're going to have the request query HTML this is going to be what chat GPT or the custom GPT generates for us what we're going to be specifying once we get into specifying the Json for our GPT action is going to be asking for what goes in this place here then once we have that we're just going to Simply write out the file now there is one caveat with this the service that we're going to be deploying this on render once you make an update to the repository and it's deployed again all of that directory is going to be wiped clean if you want to have these HTML files persist over time recommend incorporating some logic to use something like an AWS S3 bucket at this point I also plan on showing examples in the future on how you can set up AWS but there are many more steps to get set up on AWS if you aren't already familiar with their ecosystem once we have that set we're just going to log out that we have saved the file and what we're going to do is simply respond back with the path to that deployed HTML files this is what's going to be sent back to chat GPT before it responds back with a message to you then what we're going to do is we're going to send back a link of the deployed HTML files this is going to be what's sent out to users and this will be the link that they can click on within the custom GPT that you have set up and next this is going to be how we simply serve that directory of everything within our public folder once we have that set up we're going to set up a new repository on GitHub we'll just call this something like website GPT and we're going to Simply go ahead and create the repository I'll just make it public for now once we have that we're just going to copy this we're going to head back to our VSS code we're going to paste this with our terminal and then what we're going to do is we're going to make our first commit so we just go get commit and then we're going to get push so you see there's some gpts that I was playing around with within this directory and now that it's live what we're going to do is we're going to head on over to GitHub make sure that we see everything here first we see everything all set up then we're going to head over to render render is super simple to make an account you don't need to set up a credit card to use their service they have a very generous free tier that you can get set up with what we're going to do once you're on the dashboard and you've made your account simply go to new web service we're going to build and deploy from a git repository here we're going to go ahead and click on website GPT that we just set up next we're going to create a unique name for our web service let's just go ahead and try website gbt see if that's taken then we have to make sure that we specify that it is nodes in this case it did recognize it now I'm going to go ahead and instead of use yarn I'm just going to say mpm install and then to start it you could either put within the package Json something like mpm runev but in this case I'm just going to say index JS here just make sure you click the free tier and then you can just go ahead and create web service now the way that render is set up anytime you push to the branch that you specified with the settings there that we just set up it's going to go ahead and deploy that to your server here we see that it's pretty quick it there was a successful build that it's going to deploy and the link that we're going to use is going to be this link here the one thing that we do have to update because I do have another server for this is if we go back to our vs code this was the previous server that I had set this up on we're just going to swap that out here just make sure within this line here that you specify the URL for your render service we're going to save that out and we're just going to get add again get commit update get push here we see that the render has deployed and it's successfully listening the other thing that you can do here is if you go to the dashboard here and you have multiple Services you'll see the status we see that it's deploying again once that's deployed you can head on over to chat. open.com gpts then in the top right hand corner you can go ahead and click my gpts if you haven't set these up before there's two options that you can take for this you can set it up with natural language which I encourage you to do if you haven't tried it out it is pretty neat and it does work pretty well especially for your first iteration of what you're trying to set up but the thing that I want to focus on here is first turn off the capabilities we're going to create a new action I'm going to pop over to our vs code and I'm just going to put our screens side by side here the code that I'm going to be using here you can just look within the description of the video I'm going to put a good hump link where you can go ahead and reach for this if you'd like and what we're going to do is we're just going to paste it in here but I'm just going to run through this a little bit line by line GPT actions are going to be how we specify to the llm and inform it with natural language what we want to have it accomplish for us in this case we're saying we have our server at this URL we have the description of what it actually does we generate HTML Etc and it is a post request on the endpoint of deploy within this post request what this does is it deploys HTML with Tailwind CSS classes to a website and then the description of the parameter that I'm asking for I'm asking for the parameter of HTML we're specifying that it's a string of HTML with to1 CSS classes to go within the body tags nothing more obviously you can get a lot more creative with this and be a lot more of ver Bose if you'd like but this is just a starting off point once we have that all set up we can go and simply start building out our gpts we can call this website GPT and we can say this builds and deploys websites and then you can just give instructions to it I'd encourage you again like I mentioned go to the create tab plug some information here wait for it to generate for you it can also give you some good conversation starters you could say build a Yoga Studio website or things that you want to have individuals just come in and quickly interact with and see how it works the neat thing with this is even once it gives you an HTML link back is try and iterate on that say if I don't like how the header looks go ahead and inform GPT that I don't like the header then the next HTML file that it serves up to you should hopefully have those improvements that you specified that's it for this video if you found this video useful please like comment share and subscribe otherwise until the next one