Create your own GPT with CUSTOM ACTIONS

so the GPT store has just gone live and you might be wondering how you can connect your own API to a custom GPT well the good news is you can do that with a feature called actions let me show you an example so I've built this custom GPT called live flight data so when I ask the GPT a question it's going to call my API to get the latest information about the flight that I'm asking about if I call my API then this is the Jason response that we receive it's ajacent object filed of information about that flight our GPT can now use this information from our API and respond with a more natural response in this video I'm going to show you how I made this example so that you can connect your own API to your custom GPT so to begin with we first need to create our custom GPT and so to do that we can just go to chat. open.com gpts mine so that you can see a list of all of your gpts and I can see at the moment that I've got this finished one that we've been using as a test here but what we're going to do is create a brand new one from scratch so we're going to click on create a GPT so I've just filled in some initial information here in the configure tabs so I've set the name to the get flight details GPT I've set the description to ask any question about a flight number and receive a real-time answer I've also provided some basic instructions just for our GPT just so that it stays on track which is basically to provide accurate and upto-date information about flights including flight status scheduled and related details and then finally I've just added some conversation starters so we've got when is flight vss3 estimated to land today and was ba 1316 delayed next up we need to look at this capability section so GPT definitely does not require the need to generate any images because we're just going to be providing flight data next there's another option here called web browsing this will effectively allow our GPT to be able to navigate the web and find information out for itself now in a lot of situations that's going to be really really useful for your GPT but for this example we actually just want to limit it to using the tool that we've created so for now I'm actually going to disable the web browsing next we want to start connecting our API to this GPT and to do that we can just scroll down to this action section here and click on create new action in this section of the setup we've got a few different fields so we've got this authentication field we've got the schema field and we've got a privacy policy field so for now we actually need to do a little bit of work to build our API before we can fill in any of these pieces of information so we're just going to go up to the top right here click on Save and then I'm just going to publish to only me just so that I've saved the latest version of rgbt and then we're going to start building our API so in this tutorial we're going to be using typescript and nodes to set up our API however if you know how to build an API already using other Technologies then feel free to use those so there are two things that we need our API to do we need to provide our GPT with a URL that it can reach out to to get this flight information when our GPT makes a request to that endpoint we want to serve up a Json object containing all the information about the flight that was requested we're also going to need to protect that endpoint using an API key to make sure that our GPT is the only thing that can access it and so using Nitro typescript script and node I'm going to show you how we can set that up now so to create a project we just need to go to our terminal and type in the following command which is npx guyet at latest Nitro GPT test API this last section here GPT test API that's going to be the name of our project and then we can just hit enter next what I'm going to do is CD into that directory that we've just created so I'm going to go CD GPT test API and hit enter next I need to install all the required dependencies so I'm going to type in npm install and hit enter and now that I've got everything installed I just want to test to make sure everything's working so I'm just going to run npm run Dev and it looks like the Nitro has successfully built so I'm just going to go to Local Host 3000 and we can see that we've got a Json response here which is just Nitro is awesome so next what I'm going to do is I'm going to open up this GPT test API directory that I've just created in my visual studio code editor if we click on the roots directory and then click on index we can see that we export a Handler from this file which returns an object which contains the key Nitro and the string is awesome and if we head back over to our browser we can see that this is the response that's served up from our home directory so using the same methodology we're going to create an endpoint which our GPT can reach out to to get the latest flight information and so to do that we're just going to right click on Roots we're going to create ourselves a new folder and we're going to type in flights inside that folder we're going to create a new file and we're going to call it flight number wrapped in square brackets. TS which is a typescript file next let's also export a really basic event handler just to make sure that this route is working so we're going to go export default event handler and pass in an asynchronous function here which is just going to return an object which is hello world and so if I now head back over to our browser and just go slf flights slvs fre which is going to be the name of the flight that we're going to be uh testing with I can now see that we get the hello world respon response which is exactly what we expected next what we need to do is perform an API request to a different API to get our flight information from and to get that we are going to need this section of our URL here which is going to be our flight number to get that parameter from the URL we're going to extract the params object from the event. context next we're going to grab our flight number from these parameters and cach it into a variable called flight number and then finally just as a test we're going to return a Json object which is going to have the key flight number number and the value of the flight number that was passed in so if I now head back to our Chrome instance and then hit refresh we can now see that our server is responding correctly with a adjacent object which has the key flight number and the value vss3 where vss3 is the parameter that we passed in using our URL up here now that our API is aware of which flight number our GPT is asking about we now need to get that live information from a flight based API to do that I'm going to be using a free API called Aviation stack if I actually scroll down we can actually test out and if I type in vss3 just here and search for flight we can see all of this helpful information about the Virgin Atlantic flight vss3 now this is a snapshot of all the information that we want to give to our GPT to be able to answer those questions accurately so to get this live information from Aviation stack we're going to need to get an API key to get that you can just sign up to Aviation stack for free and then once you've signed up you'll be able to get access to your API key from the dashboard here you can see what your dashboard will look like after you've been logged in uh you can see your API key is just on display here so we're just going to copy that I will be resetting this API key before this goes live so you'll need to use your own API key and then I'm just going to copy this API key next I'm going to head back over to our Visual Studio instance and I'm going to create a new file in the root directory and I'm going to call ITV next I just need to fill the EMV file with a single key which is Aviation stack API key and then I'm going to set that environment variable to a string and I'm going to paste in that API I key that we just copied from our Aviation stack dashboard next I want to get information from Aviation stack about the flight number that we are querying and so to do that I'm going to call a wait Fetch and then I'm going to pass in a single string which is going to be the URL which is api. Aviation stack.com slv1 slf flights and then we're going to pass in a parameter access key and we're going to pass in the environment variable uh that we just set which is the aviation stack API key and then we're going to pass another parameter which is flight I a equals and we're going to pass in the flight number variable which we actually got a few steps ago which we picked from our URLs parameters next we expect the response from Aviation stack to be a Json object and so what we can do is we can just create a new variable called Json and we're going to call a wait result. Json which is a function next from that Json object we can grab the latest flight data for the requested flight number by going json. data and then grabbing the first item in the array and finally we're just going to return an object which contains the key flight data with all of the flight data that we fetch from Aviation stack and so we're just about ready to test but because we've made some changes to our environment variables we're going to need to restart our server first and so to do that I'm just going to head back to my terminal I'm going to go controlc and I'm going to go mpm runev once again now I'm going to head back to Chrome and go back to the URL that we were querying earlier which is Local Host 3000 for/ flights for/ vs3 where vs3 is the flight number that we want to query I'm just going to hit refresh and now we can see that we have a Json response which has the key flight data followed by an object which is filled with flight information about that flight next we want to add a layer of authorization to our API to make sure that only our custom GPT can access our API so before we do that I'm just going to get rid of this index TS file because we don't need it so I'm just going to right click it and click on delete and just move that to the trash next I'm going to create a new directory in the root and I'm going to call it middle Weare and then I'm going to create create a new file inside of that and I'm going to call it off. TS next I'm going to Define an event handler now this is going to be run every single time a request is made to our server which is basically going to validate our requests to make sure that they are authorized and so to do that I'm just going to go export default Divine event handler and once again pass in a Lambda function which is going to have the parameter event first we're going to grab the authorization header from the request and so to do that we're just going to go const authorization header event. headers doget and then passing the string authorization next we need to check to make sure an authorization header was provided and if not then we need to return an error and so to do that we're going to go if there is no authorization header we're going to call the set response status function we're going to pass in the event and we're going to set the status to 401 which is unauthorized next we're going to return an object which is going to have a single key which says error and we're going to pass the string no authorization header provided from here on out we're going to need to modify our request in ways that that we aren't going to be able to easily inside of Google Chrome and so to be able to make those requests we're going to use a tool called insomnia once we've got insomnia installed we're just going to go back to this tab and we're going to copy this URL that we've been working on we'll head over to insomnia and we'll click on this little plus here and then click on HTTP request and then we're just going to paste that URL into this field here now if I click Send we get a 401 unauthorized response which is correct and we have an error which says no authorization header provided to satis a middleware and get that flight information from our API we're going to need to set an authorization token and so to do that we're just going to click on off and then we're going to click on Bearer token for now I'm just going to pass in any string whatsoever because that should satisfy what we've written so far so if I type in one 2 3 4 and then hit send we can now see that we're going to get all of our flight data now we've checked to make sure that authorization header exists what we now need to do is set up a string on our server side that only our GPT is going to know this is going to be the API I key that secures every one of our requests so to do that I'm just going to go back over to ourv file and I'm going to create us a new environment variable I'm going to call it open AI authorization key and I'm going to set the value to a secure random string next I'm going to copy that secure random string I'm going to head back to our flight details GPT configuration screen scroll back down to our actions and then we going to click on create new action and here's where we can start filling in the first section of our action which is going to be this Authentication section so I'm going to click on that and then I'm going to click on API key I'm going to click on Bearer and then I'm going to paste in that string that I've just copied from our environment variables and then next I'm going to click on save so now we need to do is to complete our authorization middleware we just need to compare the incoming header authorization key with the authorization key that's on our server if they match then we can just let the API request go through otherwise we're going to throw another error to get the authorization token from the header we're going to go const authoriz ization token authorization header do split by the string Bearer with a space and then we're going to call slice passing in minus one to get the last item in the array and then we're going to get the first object in the array that that returns and so now that we've got the incoming authorization token we just need to compare it with the one that's on our server and so to do that we can just go if authorization token does not equal process. EMV openai authorization key that is the environment variable that we just set up a second ago we're going to once again call the set response status function passing in the event and passing in the status code 401 which is unauthorized and then finally we're going to return adjacent object which has the key error and this time it has the string authorization headers do not match because once again we made some changes to our environment variables we're just going to restart our server by going back to our terminal and going contrl C and then typing in MPN runev once again now if we head back to insomnia and perform that same request again this time with the beer token set to 1 2 3 4 which is incorrect we should be able to see that the authoriz ation headers do not match if I pass it the correct authorization token however we should see the correct response and so to get that we're just going to go back to our Visual Studio code instance we're going to go to ourv file we're going to copy this open AI authorization key tab back over to insomnia and this time we're going to paste it into this token field and hit send one last time we can now see that this token passes all of the authorization checks and we get a full flight details response what we've just done is we've configured our GPT to make sure that every single time makes a request to our API it's going to pass in that string that we just provided it because that string that we provided to our GPT is going to match the authorization key that we've got on our server it's going to pass the security check and so that's our authorization layer set up now it's time to deploy the API Nitro has a ton of different providers it supports like amplify uh Lambda Cloud flare today we're going to be using netlify so to do that I'm going to go to nitro.com TTS and I'm going to just add a new parameter inside of this object I'm going to add the key preset and I'm going to set it to netlify next you'll need to upload your project to a GitHub repository now if you've already got a GitHub account you should be familiar with how to do that step but if you haven't done this before then I'll leave a guide in the description once you've uploaded your project to GitHub you can then head over to netlify and sign up for a brand new account once you've created your account and you're on a page that looks similar to this you can just click on add new site and then you can click on import from an existing project now I've uploaded my project GitHub so I'm just going to click on deploy with GitHub and I'm going to select the name of the project where my API is stored which is gbt action API for the configuration on this step I'm going to be deploying my main branch I can just scroll down a little bit here I want to set my build command to npm run build and I want to select my publish directory to D finally I'm going to scroll down a little bit and I'm just going to click on ADD environment variables and then I'm going to click on new variable and I'm going to need to copy those two environment variables from my EMV file so head back over to visual studio and open up EMV I'm going to take my Aviation stack API key first so I'll take that key and then I will copy and paste the value and then I'm going to do the same for the open AI authorization key finally after that I can just hit the deploy gbt action API and my API will be live after your site has been deployed you're going to want to head to site configuration on this page and then you're going to want to scroll down and then just click on change site name you will likely have a random string here um I've just changed it to GPT action test but feel free to call it whatever you'd like after that click save and then just head back to site overview next Once you can see that your production branch has been published you can just copy the URL here and then we're going to head back to insomnia and test it out so as you can see I've got my Local Host 3000 flights request here I'm just going to go ahead and replace this URL with the GPT action test. netlify apppp URL which I've just copied and pasted from my netlify account next I'm going to go ahead and and click on the send button and we can see that my data is returned successfully which means that our API is now live and can now be used by our custom GPT now we just need to head back to our custom gpt's configuration page and scroll down to the bottom and click on this invalid action which is the one we're currently working on the only thing that we're missing right now is this schema section which is going to be the instructions to tell our GPT how our API works now we could use one of these selected examples and build our own but thankfully if we're using Nitro we can actually just generate one using Nitro so I'm going to head back over to visual studio code and I'm going to go back to Nitro doc config.sys experimental and inside this object I'm going to pass in a parameter open API and I'm going to set that to true so next I'm going to head back to our terminal I'm going to hit contrl + C to uh stop it running and I'm going to once again called npm run Dev to get a hold of that open API schema we can just go back to insomnia and we can just go local host 3000 Nitro slopen api.js and now we can see that we have a Json response which contains all of the information about our API Roots so I've just copied and pasted that Json response into a file called open API schema. Json what we're going to do now is make a few changes to that file so it's ready for us to upload to our custom GPT first we need to change the version from null to 1.0.0 you can call it whatever you want version wise but it just needs to be a value that is not null next we need to change our server URL from our development URL into our deployed netlify URL and to do that I'm just going to change the url value from Local Host 3,000 into that URL that we copied and pasted from netlify earlier I'm also going to change the description of our server from local development server to something a little bit more descriptive for our project which is going to be a detailed flight information API we're going to want to use https and not HTTP so I'm just going to add an S to the end of here so we're using the https scheme and now we just need to add a little bit more metadata to our flight's endpoint so that our GPT knows how to use this endpoint so inside of the get object I'm going to add an operation ID and I'm going to set that to get flight details from flight number I'm also going to add a description and I'm going to set that to get details about a flight based on a provided flight number parameter now it's important that you provide a description which is descriptive so that open API knows how to use the parameters and also so what the API does next we need to give our GPT a little bit more information about the parameter so to do that we're just going to add a new property inside of this parameters object and we're going to set that to a short description about what this parameter does which is going to be the flight number this should be a short series of letters and numbers which defines the flight finally we need to let our gbt know what kind of value this parameter is and so to do that we can just create a new object and it's going to be schema and then inside of that we're going to pass in a key type Ty and we're going to set that to string next what we need to do is just add a little bit more information about our responses Now by default Nitro gives us this 200 response and gives the description okay now we have two other responses which includes 41 which is an unauthorized response and 500 which is a server error so what I'm going to do is I'm just going to cut this piece out and I'm just going to add fre responses which are 200 41 and 500 with a little bit more description on each of those responses finally we can just go ahead and remove some of these other endpoints that we don't need so we can remove the open API Json endpoint and we can also remove the Nitro Swagger endpoint so I'm just going to select those delete them and I'm going to hit save now our schema is ready to go so I'm just going to go ahead and copy that and I'm going to head back over to our custom GPT configuration page and I'm going to go ahead and paste it into this schema section here if everything's gone right you shouldn't see any errors down here and you should be able to see the available actions which includes all the metadata that we've included in our open API schema and we can see the path that we configured along with the flight number parameter which means that everything is working as expected and so now that everything is configured I can go ahead and test this out and so to test it out I'm going to click on one of these preconfigured prompts here which is when is flight vs3 estimated to land today and we can see that we've got a response from gbt action test. net thei flight vs3 operated by Virgin Atlantic has already landed today it landed at uh 1201 even though the scheduled arrival time was 12:50 and so we can now see that our custom GPT is connected to our API if you enjoy this video and you'd like to see more videos like this then please do drop me a comment to let me know it really really helps and I hope the video was useful and I will see you in the next one

Channel: Make Stuff With AI

Views: 1,789

Keywords: openai, gpt actions, netlify, machine learning, gpt store, gpts, custom api, custom gpt, typescript, nodejs

Id: h8-MTNeoR0I

Length: 20min 44sec (1244 seconds)

Published: Sat Jan 13 2024