How to Create Your First ChatGPT Plugin with ChatGPT (Step-by-Step Guide)

Key Takeaways

in this video I'm going to be walking you through step by step the super easy method that I've found to create your very first chat GPT plugin using chat TPT to write the code and rip it to host it now yesterday I got the magical email from openai saying that I've been accepted into the Early Access for the chat GPT plugins API I've been itching to get access to this API so that I can start making some videos for you guys to learn how you can actually start making these plugins now before you have access because before I got access I thought I have to wait until I have the API access so that I can start building them but what I've learned after getting access is that you could have been building them the whole time so what I'm going to be teaching you in this video is how I've been able to whip up chat GPT plug-in prototypes within under an hour just using this method super simple super low code essentially relying on chat GPT and gpt4 to write most of the code for you then you're able to convert that over to a plugin now the secret source of this method that I'm about to teach you is combining the co-writing abilities of chat GPT with the hosting abilities of ripplets so I'll go into it in more detail but essentially this is going to make a dead simple for you guys to create your own plugins with not much experience in coding enough talking let's get stuck into building a plugin the first thing we need to do is choose the functionality of our plugin what is it even going to do so I've actually asked ept4 here for a couple ideas and it came up with a currency converter idea which I thought would be pretty cool pretty basic just to show you within the scope of this video so we're going to be building a chat GPT plugin that allows you to ask for a currency conversion between the two currencies at the current market rate now the first step to building these quick gimmick key plugins just to get your feet wet is to find some sort of cheap or freely available API that's going to provide a data source to your application and there's a couple key components to building a chat GPT plugin that you're going to need to understand before we get into this so I'll run over this quickly now step one is to build an application so for example you might write a python script that's able to scrape a web page and return some kind of elements with the net web page so that's the core functionality of the script of this app then you need to create an API endpoint that essentially wraps around that functionality that you've built and allows you to call it from other computers and for a chat GPT to call it then you need to create what's called a manifest file which is essentially a bunch of information that you give to chat GPT so it understands what your app does and sort of the details about it then you need a document which explains the apis that you've set up and then finally you need to deploy all of it and host it in a server so that chat GPT can call it and access that information whenever it needs it now don't worry I'm going to be walking you through step by step on how you make these what each of them mean and the best part is that 95 of this can be done by chat GPT so you don't ever have to get in there and start coding it yourself or writing this if you don't know what you're doing so I've asked gpt4 let's make a currency converter plugin what apis can I use so for my currency converter plugin I'm going to need to be communicating with an API that gives me real-time conversion rates so that the user is able to get the accurate conversion of their of their currency so there's a couple of options here I've just gone for one that says it's a free service so I can get a essentially zero cost prototype up here so I've gone and signed up for exchange rate State API I have my API key here which you guys have now seen now here I've gotten straight into asking change BT to start writing me the bones of the script so I've said great let's do it with the exchange rates API here is the documentation I've headed over to give a chat CPT some understanding of how these stocks works and how they can build it into the script I've just gone to documentation tab then because the functionality of this plugin is just to convert the currency all we need to take is this first one here which is a get request to convert the currencies so I'm just going to copy and paste that into charity too if you do have access to gpt4 be sure to use that because it is much better for these tasks but if you're unable to get access to it then I'm sure gbt 3.5 will do the job as well now what we have here is the bare bones of the script what I'm going to do is copy that and then I'm going to head over to repl if you haven't already you'll need to sign up to replit it's free so just hop on there create an account and then you should see this home page here now Ripple is a super handy and easy to use online IDE essentially a place for you to do all your coding and development if you're familiar with Visual Studio code this is kind of like an online version of it that you can use I love using it it's got a super nice UI and it has a ton of great features which make it very very useful for doing things like we're doing today now what you're going to need to do is head over to create Ripple and then click on a python report and then give this a name we're going to call it currency foreign with a file that's going to automatically be made it's called your main.pi so we can just paste in the code that we took from chat gbt and put it into here the exact code that you got from chat GPT will likely be different to mine so if you want to actually steal my exact code then you can head over to the description which is going to be a link to clone this Ripple so you're going to be able to essentially copy the exact same code and follow along with me if that's how you want to do it okay guys now I'm just going over this code in here so taking a look at it it seems like already we've got a slight issue here which is it's asking for an API key as a parameter we need to sort of bake in my own API key here so we can delete that we can delete this as well and then over here you see we have a Secrets menu if you do have any API Keys before your application which you likely do what you'll need to do is head down to this tools section click on the Secret side then you can say uh which is this what is this for exchange rates data API so then you can give it a name I've just given an ERD API key and then put in my value then I've added the new secret there and then what you can do is just click this insert button here and then click this as well and then it's very quickly gone in there so you can take this back and head down here and then you can this is how you set up your API key for basically any application so once you have the setup you've added the import then you can now just put in my secret here so this is the one sort of bit of code you're going to need to be able to navigate through but essentially you need to get your API key hard coded into this app because you're the one who's going to be paying the bills now I've just done a little bit of code cleanup at the bottom just taking away print statements because we're not going to need those because chat gbt is doing the interaction for us but once you have this app essentially we've done part one now which is get the app and build the functionality then we need to set up the API endpoints that are going to allow chat GPT to interact with our application so API endpoints are essentially little like phone numbers that chapter is going to be able to call for certain Services then it's going to send the information back based on the user's query once you have this core functionality then you can head back to chat GPT now all of these prompts that I'm using in this video are going to be available in a full guide that's going to be in the description so be sure to head down there if you need any help with the kind of prompts that I'm using because there is a little bit of technical side of things that you do need to know to write the prompt but I've said here is the app that I've pasted in the application that we've just created in riplet and then at the bottom I've said I now need an API endpoint created for the get exchange rate function and their web server created and then what it gives us back is a different version of the application but this time it's taken that core functionality which is the get exchange rate from the API and it's wrapped it in a convert currency function which is going to essentially take the information that the user is actually giving to us and then insert that into the function and then give us the the final result back so again we can copy and paste this whole thing and we can just pop it back in there now just in case you completely lost this is uh the function that's getting the exchange rate from the API so this is us saying okay we want this currency and this currency please tell us what the exchange rate is it sends it to the currency conversion API it will give us back the rates for those two currencies and then once we have what the user is looking for we're able to put it into that function that we made initially which is the get exchange rate and then it's going to return the converted amount and then we send that back to chat GPT to package up and give to the user so now we've ticked off step one which is to create the app functionality step two is to create some sort of API endpoint that allows us to interact with that functionality now step three we need to make them manifest file and now again the best part about building these is that we can just copy our code take it back to chat GPT and ask it to write one for us so again I'll be giving all of the prompts for this in a document in the description so don't freak out if you see me type in these prompts they are going to be available and you just need to insert your code in there so so what I've done is ask write me a manifest file for my app here is the code and I've pasted in the code and then I say end of code to make sure it knows I've stopped and then I've asked here is the documentation for the Manifest file and an example so I've gone over to the open AI documentation and I've gone to the plugin manifest I'm just going to copy all of the documentation here so that it knows what we want from it and then paste it in below so now that we've written our manifest file we can copy the code and head back to replit and then we need to add a new file and we call it AI Dash plugin dot Json and then here we can just paste our benefits file there are some restrictions of the characters on these Json files so I think it's best just to delete the underscores or any dashes that are on the name for the model because I've had issues with that before so just make sure this is a a clean uh clean string with no no official characters in it and now that we've done that the next file that we need to do is open API definition which essentially explains what our API does and how the chat chip can interact with it so again the beauty of this is that we can just copy and paste this documentation in and ask chat TPT to look at our application and write one for us foreign and now we have our open API definition not to be confused with open AI they are different things easily confused but the open API definition is going to explain to chat GPT how our API works and then again we're going to copy that and head back over to the files section here and add a new file it's called open API Dot yaml open this file up and paste it in now that we have the apps functionality we've set up our API endpoints we've created our manifest file we've got our open API definition the final step now is to host this and make it available for chat CPT to call these endpoints whenever it needs it now what we're going to be setting up is two more API endpoints that's going to essentially take these files that we've just created and add them to our web server so that chat CPT is able to communicate with them and know how to use them now we have one little bit of code we need to copy and paste which is essentially making sure that those files that we just created are actually included and in the web server and they're available on our server for open AI to interact with and sort of pull the information from those files again you'll be able to steal this code from the replit that you'll be able to clone which is going to be in the description we're going to paste this in here essentially these need to be at a very specific uh URL so this is dot well known slash Ai plugin.json and then the same here but this is for each of these files so you'll see that the file names here match up to the file names there that we have so we have ai plug into Json then we also need to import send from directory up here then one more little thing we need to do to make sure that this all works properly is to come over to your shell which is available in the bottom left down here if you haven't already got one open on the right but click on the shell and then go pip install waitress now this is just a different type of web server that's more suited for production which is what we're looking to get towards rather than just a very basic development server we've installed waitress successfully so now you need to go from waitress import serve and then head down to the bottom where it says if name equals name which is essentially what's going to run this application and then head down and add in this line of code which is serve and then app host and Port so you just need to copy and paste this again from the rebel again you're going to be able to get this code from the rebel in the description so you can just paste this in here then you have everything set up and ready to go you can hit the Run button at the top and as you can see on the right here it's actually spun up a little web browser to show that our server is actually running and people are going to be able to start interacting with our application now so even though it is not found when it says there's an issue this is just because we haven't set up a home page essentially so what we have set up though are these routes here so we have slash convert and then we have slash well known AI plugin.json these are where our files are stored so essentially people can come to or chat your boutique and come to the URL which is slash convert and then it's going to provide all the information we need we're going to take it in process it and then send it back to them but what you want to get from this once it's running is the URL so you can copy this and now I like to put it in here just so I'm 100 learn what these routes are now that we have this URL we then need to go back into all of our files and update this URL as the essentially where chat CPT is going to be sending all of its mail what you can do for this is actually head down to this uh the open API one that we have here which is the second one down and actually just copy this whole thing and then head back to the file and this is essentially showing it where we need to go for this file make sure it has the domain for your Rebel and slash well known and then slash open api.yaml and then for the other ones you can leave for now next you need to go over to the open api.yaml and do the same thing so if we go to The Domain you can paste this in but all you need for this is up to the dot code so you can take that off and leave that there make sure there's no other dimensions of it go down and then we're all done now that you have all of this done you've completed all of the five steps you have a server that's up and running with your functionality ready to be talked to now comes the step of actually integrating it with chat GPT which unless you have the plugins which you may not have at this current time hopefully you do but now you need to go over to the plugin store develop your own plugin and then click my manifest is ready now this is chat TBT trying to fetch those files that we've put on into our web server that contain the Manifest and the open AI definition so what we need to do is provide it with the base link to our application which can be found here also what we've put in this you can head back and paste that in and then amazingly it looks like we've had no issues with the Manifest or the open API spec which is nothing like my first attempt so we're doing good here but basically this is double check that everything is here that it needs then we're able to go next install for me continue install plugin [Music] so I've asked it please convert 500 USD to AED it seems like there's an error in the code somewhere but we're able to expand this and see what's going on so it is correctly picking up the currency that we want uh the from to and the amount but it seems like we're getting an error in our response so let me have a a little dig around and see what's going on actually I think I'll do it the way that most of you guys will have to do it which is to copy and paste all of the information and then take it back to the uh the other chat that we have with chat CPT and then we can actually paste in uh these errors and say I I am getting this era [Music] now this has given me some good insights on what may be going wrong here now this is the kind of uh exercises you guys will need to be doing to make these applications things do go wrong but this thing will always be here to help you out so you need to start to learn uh how you can use this to to essentially debug your own code so I think what this is coming down to is how we're actually digging through and finding the result of this conversion so if I head back over to the exchange rates API and I head down to what this kind of response looks like so it returns a date historical info query result so this shouldn't actually be a second result called here so what we're trying to do is essentially find a second result inside that so if I go back share you know do it the way that you guys will be doing it so if we copy the expected response from the spot and then we head back here is the response format from the API here is my code what is wrong with my app okay I think I found what the error was when I actually copy and pasted this documentation what I didn't do I left it in JavaScript so the information I gave to chat gbt was actually written in a different language so if you change this to Python and I actually change this I can just copy and paste this information here foreign from the original code so it's going to give me an updated version now that's going to fix those errors hopefully and then we can do a little bit of shuffling around to test this again so you need to go through a couple of these Loops which essentially asking each activity what's wrong going back through it and sort of debugging and then you can make updates to your manifest file to reflect that okay and so the best part about using riplet is that once it's Rewritten this code we can copy it take it back to our replit and then just paste it in there and Save and then we can just run the web app again and then try it again what I've found I've had to do is actually go in and uninstall these so if you go into uh unverified plugins and uninstall this and then go uh install an unverified plugin and then we do the same thing which is to grab our URL and here we have an answer to our question using our chat 250 plugin that we've made in just a few minutes please convert 500 to AED which is what we use here in Dubai as of the latest exchange rate it is 1836 Dirhams so there you have it we have built this in a matter of minutes for you guys probably it's only been about an hour for me so uh if you're familiar with using chat GPT and you can start to play around with this and deep learn to debug your own code uh then this is a very very viable way for you guys to start spinning up prototypes for any ideas you have now obviously this is super basic but I think the point of this video is to show you how to get your feet wet and I think it will be amazed by just how far you can get uh with building these things without any coding experience now I know there was a little bit of technical stuff in there that I showed you but you need to sort of establish if you're going to learn any skill and and with and you want to develop these things make it the skill of being able to essentially develop with chat Tubity as your assistant so you need to learn how to go back and forth and learn enough about the code to be able to get answers out of it from chat GPT and affects your own problem now if you're interested in building some plugins for yourself I have a video on 10 plugin ideas that I've created and I think that you guys can get a real really good business built out of so be sure to check that out will be in the description and I'll also put it up here but it's a very good video with lots of ideas if you want to get started on those now now if you're looking to get into a community where people are talking about building these I'm in there explaining what I'm working on we're going back and forth about different plugins and how we can build them be sure to join my Discord Community the link will be in the description and then also if you have any development inquiries you want to start building some plugins but you don't have the ability or you don't necessarily it's a bigger project than what you can do with this then you can get in touch with my development company the link will be available in the description and also in the pin comments so you can get in touch with myself and my team and we can start building out your plugin and on this revolutionary new platform that we have available now now if you're looking to build these Tech GPT plugins and tap into this once in a decade opportunity be sure to hit down below and subscribe to the channel and leave a like on the video if you've enjoyed it would mean the world to me so that's all for today thank you guys so much for watching and I'll see you next time