How To Create Your Own Custom GPT With Bubble & OpenAI (Complete Guide)

if you're interested in creating your own custom GPT model then this is the tutorial for you in plain English a custom GPT allows you to fine-tune your very own chat GPT you can give your model specific parameters that it should follow so for instance you could make your model talk or respond to users in a particular way or you could make your model a subject matter expert in a particular field now I just wanted to quickly highlight that this specific tutorial is a completely free guide I've taking this from a course that I've recently published in that full course I explain how to connect bubble to absolutely every open AI API service so this includes things like text image and audio generation right through to image edits language translations and custom AI assistant while this free video will absolutely share everything you need to know about creating a custom GPT I'd recommend checking out the full course if you're ever interested in learning how to connect any additional open AI services to your bubble app if a of course I'll be sure to throw a link to that full course in the description of this video but look by this point in time I've rambled on for long enough let's just get to what we came here for today because look there is plenty to cover what I'm going to do is hand this one over to Shane and he's going to walk through all of these steps that you need to follow guys it's Shane here and in this video tutorial I'm going to show you how to create a custom GPT app using no code this app will be created in bubble and will be powered by open AI chat completions API using a custom system assistant message to help us along our tutorial today I've generated this checklist which lists all the tasks we'll be completing today to create our custom jpt app uh this is built in notion and as we go along I'll be checking off these boxes here you can actually find a link to this exact checklist in the description of this video so that you can clone it and follow along as we go with the build now before we get started today I wanted to show you a quick demo of what we'll be building and it gives me great pleasure to introduce you to Professor GPT this is the next Generation AI app which gives students access to University and college grade professors from the comfort of their own home now Professor GPT I have set him up to be a history Professor so if I were to ask him a question like who ruled Greece in 400 BC it send should give me a response which looks to be correct I'm no history major unfortunately um but it looks like in 400 BC uh Greece was run by the Athens Spartans and a few others so uh in this tutorial I'm going to show you how to build a similar app and hopefully you can use this use case that I've shown to build your own app uh for your own use case so how are we going to do this let's jump back to our checklist um I'm going to tick off the I've just shown you a demo of the product and the first thing we're going to do is create an API connection between bubble and open AI now for those not aware an API is essentially something that connects two web apps or two online portals or two services on the web bubble makes this super easy to facilitate and there's only a little bit of code that we have to navigate through but luckily there's a lot of documentation on open ai's website to make this a breeze speaking of open ai's documentation I will show that we do have a window here which shows the documentation I'll be referring to throughout uh this tutorial there will also be a link to this in the description of the video so that you can read through and follow along with any documentation and find any more information that you may require for your use case so let's get started uh what we're going to do is head to our bubble editor and before I create the API connection I just want to quickly walk you through this UI that I've built uh I've essentially got a repeating group above and input field where we can ask our question to Professor jpt there's this submit button which will generate the workflow that we'll set up in the second half of this tutorial and then the messages that are sent between our users and our assistants will be shown in this repeating group uh in the chat format uh that you see on things like forums or other websites nowadays uh just to show that conversation piece and really get make use of the chat completions aspect of open I's API so let's get started by adding the open AI connector to our Bubble app to do that from the bubble editor we're going to go across to this uh power plug button here and click to our plugins section and all we have to do is hit this add plugins button that's going to pring up this dialogue box and the first result should always be this bubble API connector and all you have to do is simply hit this install button and if we jump back out of this screen we should be able to see that the plugin has been installed into our app it's that easy this will allow us to connect our Bubble app to any API across the web it's a really powerful tool in connecting our app to other services including open AI so let's take a look at how to do that I'm just simply going to hit this add another API button and it should bring in this gray box where we can start to build out our API call now before we get into explaining how this all works I'm just going to give this API name now I'm going to call this open AI because this is the service that we're connecting to and the reason I'm going to do that is because we can store multiple API calls underneath this open AI uh installation um which means we can add multiple uh you know services that a open API uh offer including you know image generation through dolly or whisper or other GPT uh functions some text generation functions all within this single open AI API function fun where this really comes into play is with our private key now to make sure that our API is kept secure so there's no malicious intent or there's no way for the connection between our app and open AI to get intercepted we have to create what's called a private key now this authenticates that the connection is secure and that also that we're a trusted service and it ensures that it works between our two web apps the good part about having this under one API service is that we only need to generate the one private key for all of the API calls within our app now to connect to open AI I'm going to select this private key in header option and this is going to bring us up this key name of authorization and this key value now I'm going to quickly jump back across to our documentation so that I can learn what we're going to add to these fields and if I scroll across I should be able to see in this example request that we have our solution so uh because we are putting our private key in our header we have to find where in our header we need to put our private key so you can see in this curl example this is curl text we can see that authorization is put next to a h which means header and you can see that it's followed by a semicolon the word Bearer and then what looks like text to be where we put our open AI API key so what I'm going to do is I'm going to copy this Bearer text all the way just before these quotation marks I'm going to hit contrl C I'm going to scroll across and I'm just going to paste in this key value section here now basically what bubble is doing here is it's recreating this code in the header of our API so if you can imagine that whenever the source code or whenever our app uh does a call to open AI it'll read it in this format but bubble just puts it in this easy to read format uh just so that it looks nice and it's easy to manage now as I'm sure you can tell dollar sign open aior API key is not going to be our API key so what we're going to do is we're going to have to generate one of those ourselves now I'm going to scroll across again to another window where I have my open AI account now these are super easy to set up and it should only take you a couple minutes to do so but then once you get to platform. open.com AI Keys should be able to navigate to this API key section here and you should be able to create a new secret key with ease all you have to do is Select this plus button uh give your secret key a name so let's call this professor GPT for the project I'm going to leave as default project and for the permissions I'm just going to leave us all I should be able to create my new secret key and then it's generating me this long string of text and numbers that will form my secret key I'm going to hit copy select done I'm going to scroll back across to my bubble editor and I'm going to replace from this dollar sign till the word key with my API key now you have to paste it after the word Bearer because Bearer is a critical part of this sensitive uh information just confirms that we are the bearer of this key and make sure that the connection is secure to our site so let's take a quick pause we're going to jump back over to our notion checklist and just confirm what we've done we've installed the API connector we've created a new API within the connector that open AI one we've added the authorization to the main header and created the secret key with the word Bearer in front of it so we've made a good start and the next thing that we're going to do is take a quick look back at our API documentation to see how we create our API call now before we do that let's just jump back to our bubble editor and under this name API call section we can actually expand this and start to see where we can put the meat of our API call in this example I'm going to quickly rename this as custom GPT and we'll touch base on these fields shortly but quickly let's take a look at the documentation to see what we need to put uh in this section so essentially what we're doing when we send an API call is we are sending a body of text in a certain format using a certain key to a certain web address or location online now this is Made Simple using the curl method which you can see here and essentially this is just an easy way to format our code that's readable essentially to us as no code developers this is probably the most simple bit of code that you can deal with uh and goes to a place that uh is secure and easy to read and we'll do what it what we need it to do essentially using Json code now I haven't touched on Json code just yet um because first what we're going to do is we're going to scroll back to our bubble editor and we're just going to quickly just touch on these fields here so for our API call we can choose to use this as data being we're going to do a call to a service and receive data that we store on our Bubble app in our database or we can use it as an action now we're going to use this option because number one we want to use this API call in our workflow which I'll show you later but we want to use it as an action because we will be sending a prompt to open AI we will be sending the input that is in our message field for Professor jpt or whatever you use we're going to do that action and we are going to then then restore uh receive an answer from open AI to then do as we please to build the rest of the workflow and build the UI of our app so that's why we're going to use the action tab because essentially we're doing an action to then receive something back from the open AI API the data type that we're going to choose is Json now this is the code that we saw in our previous window uh we could you choose maybe text uh or we could choose you know a file if we were doing um a whisper or a dolly uh API call or you know if it was an image uh these are different options that we can choose but we're just going to select Json we're also going to choose to post this API call so like I said we're not just receiving static information from another service we want to make a change and an influence in our app and then post that to open AI to get that back so we're going to select post and then we are where are we going to post this where are we going to post our API call let's jump back into our documentation and to this URL here api. open.com V1 chat completions all we're going to do here is hit contrl + C we're going to scroll across and we're going to paste this URL there so we've made a great start on building our API now there is one more step that we're going to do before we get into the Json body and that is add some headers now we're not going to add these headers as shared because like I said we're connecting to a single service being open AI that actually offers a lot of services and API calls so for example if I were to copy and paste if I were to copy this application Json section and add a shared header being the content type of application Json that would mean that every API call within this open AI service would be of this content type however like I mentioned uh a few minutes ago uh different open AI services use different uh content types some use images audio files if it's whisper um so we're not going to do that for this open AI service because that would do it across the board if we were if we were to ever add additional functions or features to our app it just wouldn't work so what we're going to do is we're going to use this key and value in the header only of this API call not the whole service just the API call so let's contrl C content type into this key and copy into this value I'm going to get rid of actually I'm just going to click this trash can to get rid rid of them I'm also going to leave this check boox ticked as private and the reason that is is because if it was unchecked we're going to give the user the option to make a change to this however this is not going to be changed across our app so we can leave it as private it's private to us it doesn't need to be public to the user they don't need to see this or know this so we can leave that as is there similarly what I was saying about the authorization and key value the structure and the boxes that we see here are just another way to rearrange this content type semicolon application Json section in the head AR just a way to make it look nice and neat however when the open AI API call happens it will format it in the way uh that it expects with this with these quotation marks and in this structure like this so um just an easy way to follow along and just an easy way to copy and paste the right values in and make sure that um Bubba won't make any mistakes there so let's jump quickly back across to our checklist we reviewed the API documentation and viewed it as curl we started to create our call within the API we set it as an action and post and we set the content type as application Json so what we're going to do now is copy across the Json parameters now the first thing I have to do here is scroll across to my documentation and you'll notice that within our curl example here you'll see that the model has no models available now the reason that is the case is because in this window I actually haven't logged in uh to open AI but uh you'll see in this screen I actually have logged in in a different window so once I hit refresh here it should know that I have logged in and it should automatically change this model to the default model that I have on my account which is uh 3.5 turbo so let me hit refresh and you'll see that it did just update to 3.5 turbo so now when we copy across our Json parameters essentially a parameter is the content within the body of our APR call in this instance the two parameters we're copying across are the model and the messages so to make it nice and simple I'm just going to copy the body Within These uh single quotation marks going to copy that we'll scroll across and we're just going to paste that in our Json body there now we could just test this and see if it works so in this example we've got our model we've got our system just the system message that we have is that it is a helpful assistant and we want to just say hello so let's initialize this and see what it says um I'm going to scroll down to the raw data just to sort of quickly see how it works um the content that it's responded with is hello how can I assist you today so what we're seeing here is the code we've received from openai in this structure uh which looks a bit messy um but I'm going to clean it up in a in in a moment so essentially we have choices uh and we've only got one choice here so all we have to worry about is the first choices message content we'll touch base on that shortly when we build our workflow and it'll all makes sense but a quick thing you can do to clean this up is just to ignore these fields that we don't need and that just helps to clean it up a little bit so that when it comes time to uh do this call in our workflow we only see uh what we need to see so here is where we can start to customize our jpt so essentially how this API works is that we have this role of system followed by this role of user and then whenever we initialize this call we have a response which is the role of assistant so we have three roles the system the user and the assistant and essentially when the chat function starts to take place we're going to have our user and assistant go back and forth asking questions to each other but that system role and the content that fits within it is never going to change because that is where we can start to customize our GPT so what do I mean if I were to customize the content underneath this role system if I were to say you're a helpful assistant who Rhymes in all their responses let's see what happens happens and if I send the uh as the user if I send the content of hello how are you today let's test that if I scroll down we'll see the raw data I'm excited for this hello hello I'm here to play I'm ready to help in every way so tell me what you need today and I'll rhyming pave the way that's brilliant essentially what we can see here is that we've got this message back from the roll and if we were to ask another question uh to this assistant um it will respond in such a way that it's already been preset by what was in this uh system section of our initial API call however what I'd like to show today is how we can make an app that has a dynamic system message that isn't preset so what we essentially want to do is we want to give the user of our app control of what the system message is and we have to do that by creating what's called a dynamic value in our API call now as you can see in these instructions up here to create a dynamic value you have to use these symbols uh and then put a key in between those uh greater than and less than brackets so let's call this custom GPT and then when we click away we can see that there are these boxes that have been brought up um below our API call and this is essentially where we can replace the value and just test the dynamic nature of this custom GPT key what we can then do is use this custom GPT Dynamic value either in the UI of our app or somewhere generated in the workflow so that it gives the user of our app control of what the system message of their custom GPT is so to test that let's just add in a test value here so um we will uh put in the system message that was uh shown just before you are a helpful assistant who likes to rhyme and an interesting part here because we want to allow our users uh to customize this prompt we are going to uncheck this private box we want that uh we want that to be public to the user so that they can see what the custom GPT message is and we want them to be able to change it so let's reinitialize this call and just have a quick sanity check if we scroll down we go show Ro data okay so the response has been given from an assistant who likes to rhyme so uh we can see that that Dynamic value is working uh and we can go from there I'm just going to quickly head across to our notion checklist uh if I'm going to go back here we've copied across the Json parameters we've specified what a static and a dynamic prompt is static being that we are putting the system message into the API call and locking it in there essentially so that whenever it's used across our app the API call and the system message won't change versus Dynamic where we're going to create a dynamic value that we are going to edit on our front end and allow our users to customize and then we've also customized the system message uh to to do exactly what I've just just explained so uh we're going to take a quick second to just review our UI design and just sort of explain how that's going to work when we start our workflow so I'm going to jump across back into our bubble editor and we're going to see the design tab and what you can see here is uh an input message button like I showed earlier but the important thing to note here is that whenever this group is selected this is essentially the button that triggers our workflow and to see this in action if I were to double click this and click this add workflow button when our dialog box opens up it should be it should take me to this workflow tab where I can start to create a workflow whenever this send message button is clicked so essentially what we're doing here is we are triggering something to happen on our app and in this case it is asking the question that is in our input message field now that's a pretty simple uh action to do so uh to do that I'm going to uh first quickly just tick that off we're got to make sure that we do everything correctly uh and let's jump back across into our workflow tab uh and essentially build build the workflow that will call the open AI API uh using our custom jpt prompt so heading to our workflow tab you'll see that because we click that add workflow button the trigger has already been set up and here we can start to add our actions and our steps in creating our workflow quick little note in some other setup things that I did uh in the pre-recording of this video is that I just added some navig navigation buttons uh to the menu which is the other uh workflows that you see here I'm just seeing that when you click the the text of settings it goes to the page settings uh and same goes with the home just to make it a a usable app but here is where we will do the magic for our workflow so the first action that we are going to take is that on our UI whenever this submit button is clicked we want to first save the message that is in our input field to our database and the reason we want to do that is so that we can use it in our message repeating group so that we can store and show the first message that is sent in that repeating group the first question that is asked in the chat I will explain that this chat message field that we see here and this chat sender has also been preset up as part of the setup in the demo of my app you'll see that underneath this data types window I've created a chat data type and I've created these fields of message and sender now data type is essentially a category of data that we're going to store in our database and our data fields here are essentially the inputs or uh the responses that we get from the API or the actual pieces of data that we're going to use or save or send so the first thing that we're going to want to do is we are going to save this input message and save it under the user of sender so how do we do that uh in our workflow we're going to first create a new thing we're going to create a new chat so if I select chat from this drop down next to the type we are essentially going to create a new entry and chat in our database if I quickly head across to our app data tab we can see that this database that bubble stores natively within uh the interface and we can see that with each click of the button we're hoping to save a message and save who it was sent by so if we scroll back to our workflow whenever the send message button is clicked we're going to create a new chat and we are going to say that the sender is the user because as if we quickly head back to our documentation we can see that the sender of the first question or the first piece of content is always the user and in our instance of course the workflow is always triggered by the user asking a question so the sender of our first step is going to be the user and the message that we are going to store is the value of the input message field so whatever value is in that input message element there will be saved to our database under the user so now that we stored that message the next step is to actually send that message to our open AI API so if I click on step two uh if you recall because we set that uh API call as an action we're able to actually find it within our uh workflow tabs so I type in the word open AI custom jpt it'll come up there however if I were to search plugins I can also find um find the prompt there so couple ways to add it in to our uh workflow so what you'll see when we click that step is that it brings up this uh dialogue box here which is where the dynamic value is added in this box that looks like this however like I said a few moments ago we don't want this to be static we want the user to be able to control what is put in this custom jpt box so essentially we want this value to be dynamic and we want to uh click on this insert Dynamic data box here and then we can start to uh make that a reality so if I click that it gives me this choice of options and essentially what we're wanting to do is we're wanting to use the dynamic value of the custom GPT as said by the current user in this workflow so first we need to actually build a way that we can save that custom GPT value to the current user and the way we'll do that is we'll head to our data Tab and I'm actually going to add another field underneath our user data type so if I create a new field and just call it custom GPT and I say the field type is text and I hit create now when I head back to my workflow tab I can actually say that we want to use the custom value of the current users custom GPT that's a way that we can use the data field bu within our workflow but the next step that we have to do is actually give the user a way to customize this so what we're going to do is we actually going to create a settings page so heading back to my design tab I'm going to head to this uh option in the top left of our screen and I'm going to add a new page and whenever we create a new page bubble gives us the option to create it from scratch or clone it from an existing page so let's call this our settings page and we're going to clone it from our index page that way the header menu stays the same The Styling of the page stays the same uh and it's just all kept consistent and just an easy way to create a page so I'm going to get rid of uh this um that header I'm going to also get rid of uh some of these um groups let's keep Group D I'm going to get rid of this repeating group uh hopefully with Group D we can make this a minimum height and we have something to work with so we give of 100 cool okay we have something something to work with here so what I'm going to do is I'm first going to add a multi-line input element going to give it some uh spacing just so it sits off and I'm going to set the I'm going to remove uh the minimum width so that it is as large or small as needs to be and what we want to display first and foremost as the initial content is the current users custom GPT so if we insert Dynamic value we say the current users custom jpt is what we want to display as our initial content whenever the user views this setting page they can already find what is set as their custom GPT if there's nothing then it'll display this uh type here placeholder however let's say after a few uses of the app they're going to jump in and just want to find out what their current custom GPT prompt is they can actually find it here and make edits if if they'd like so we're also going to add a button which will trigger our workflow um to save any edits that they make um so let's just type this as save we want to add just some margin we're going to go to the left and to the right and to the bottom not going to add it 20 cool and now let's add a workflow that whenever the button saved is clicked we're going to make changes to the current user we want the custom DPT field to be the multi-line inputs value so to show how this works I'm actually going to create a uh demo uh user and we're just going to see how that works so let's create Uh custom user.com let's create uh that user and add them to our database and then let's actually run a preview of their instance of our app so I'm just going to hit refresh sometimes when we create new user and we need to refresh our app I'm going to run a demo as uh this user and if we see in our settings menu here nothing is in uh this initial content nothing is displayed in this inline uh input because uh there's nothing stored to this custom jpt field however if we create a new uh assistant message uh what we saw earlier uh you are an assistant who likes to rhyme and hit save we can jump back into our database I'm going to hit refresh again just to see if that has worked and there we go we can see that our custom GPT prompt has been saved and now we can actually use this as our Dynamic value within our workflow so heading back to our workflow tab I'm actually just going to jump across back to our index because now we can see that we've created a new chat and the custom GPT prompt that is going to be used is going to be what the current users custom GPT is that we've just given the ability to customize now I want to head back to our notion checklist is just to see how we're tracking we've actually skipped uh this step but for good reason because I wanted to make sure that we uh built the settings workflow and add of the custom jpt field first we made a demo user uh we made the custom GP Dynamic we've added it to the workflow and we've made it editable and saved uh to the current user so the next step that we're going to do the next and final step that we're going to do is add the chat section of our workflow and there's a little bit of a a Nuance to this uh which I'll show shortly so um without testing let's just work out the rationale of this so essentially what we're going to do is we're going to create a new chat on our first step whenever the user submits uh their message we're going to send that to open AI using uh this custom GPT prompt that we have here and then we're going to receive a response that we're going to save uh to our database so let's create a new chat again create new thing we're going to create another chat this time we want the user we want the sender to be the assistant and we want the message to be what we receive back from open AI so to do that we are going to insert some Dynamic data we want the message to be the result of Step two's choices first item message content so if you recall when we did our uh initializing of the API call we received that uh raw body text back from open Ai and we saw that it was structured in a way that uh we had choices and then we had uh the message and then we have the content this just is a way to find that string of text within uh that raw that raw body field and uh just save that to our database we don't want to save all the rest of the code we only want to save that that line item so in theory uh this is essentially the workflow that we want to follow however it's not quite that simple if you recall what we haven't done is we haven't made this chat section Dynamic within our workflow so if we were to test this on the preview section of our app uh there's no way that we've actually added our input message into this section of our uh API C we haven't actually found a way to put that message in our open Ai call and to further explain what I mean let's head back to our documentation because I want to show a quick example of the chat functionality and the chat completion API call in this state because essentially what this shows is the chat aspect of a chat completions API what we have here is we have this system message which says your helpful assistant we have a message from the role as user saying who won the World Series in 2020 we have a response back from the assistant saying the Los Angeles Dodgers and then we have this message from the user again that says where was it played now the interesting thing about a chat if ever you've had a a an online chat with a with a bot or with a person whenever this message is sent where was it played it's actually referring it to a previous message so if you were to just ask the question of where was it it played it wouldn't have the context of the previous messages uh to go off so what we essentially have to do when we have this where was it played message put into our workflow we have to also send the previous messages so that when we ask it when we ask about it it knows what we're talking about so what we have to do whenever we do a submit message to send uh to the API call we actually have to send the entire conversation so how we'll do that is we're actually going to head back to our workflow Tab and instead of just making this section Dynamic we're actually going to make this whole section Dynamic so that when it comes time to send uh to the API something like this we can actually send uh the whole Json code as one Dynamic field so let's head back to our bubble editor and what I'm going to do is in between uh these brackets here I'm actually going to create a dynamic value and just call this chat I'm going to click away and then I'm going to add in that Json code AS the dynamic value I'm just going to head back and I'm going to uh copy this code as an example let's scroll back across I'm going to paste this value here and hopefully the way that it will be sent to the API call is in a way that's able to be read so if I hit reinitialize call I'm going to scroll down and show raw data and we have a response we don't have an error which is the key bit of information for now so I'm going to hit save and what we're actually going to have to essentially do here is we're going to to recreate this string of Json text in our workflow tab so to do that I'm actually just going to quickly check on private we're going to head back to our data Tab and the reason we're going to do that is because we actually have to create a new field and if you recall we are sending the Json text to the open Ai call so we're going to add a data type called Json it is just going to be a text field for now that is fine let's hit create and then when we head to our workflow tab underneath our first step we can see that we're actually given the option to save this Json text to our database whenever we save uh this first message as well so uh what are we going to put here that's the that's the million dollar question basically I'm just going to click this code as a starting point uh a quick note that the Json code is very sensitive so I'm just going to get rid of these space marks as well just so that there's no errors uh going to put a space there and what we're going to want to do is we're not going to save or send uh the question of who won the World Series in 2020 we're actually going to save and send the input messages value so I'm going to replace these uh sorry this text here with a dynamic value being the input messages value now a quick note as well whenever bubble uses a value it actually already puts it in quotation marks so I'm going to replace I'm going to remove these quotation marks just because we don't want it to be double quotation marked otherwise like I said uh the Json uh code is very sensitive so uh if we were to send that it would cause an error the next thing that we're going to do is we're actually going to add that as the step two in our open Ai call so the body chat that we are going to send with our initial message with our question to Professor GPT is again uh Dynamic data we're going to send the results of steps ones Json so now as you'll see whenever we send uh this Json code as well as the custom GPT to our plugin it starts to form a readable and usable set of code uh that will give us a positive response but a quick note that I've just realized is that like I said the Json uh code is very sensitive and what happens sometimes is uh if our user or some other mechanism adds something like a punctuation mark or a new line or something like that it will actually cause an error because like I said Json sensitive is very code Json code is very sensitive so what we can actually do is save this Json code AS Json safe formatted as Json safe so this means that anytime a bit of punctuation or a new line is added to that message it actually uh bubble adds a backslash which just makes it Json safe which makes it readable uh to open AI a bit of a a bit of a Nuance but um it's just what we have to do uh to make it work uh so while I'm doing all this work with the uh adding the Json code and adding the Json save I'm actually going to save it in our third step as well so uh we are going to save the Json message that we received back uh from our assistant uh let's scroll back to our documentation I'm actually just going to uh save this here going to send it across and we are going to paste we're going to replace this here uh we are saving the result of Step two's choices first items message content in this example we do have to put quotation marks um because this isn't a value that bubble is uh automatically adding the quotation marks to so a bit fidgety I'm going to get rid of these uh spaces and then we can start to see that this works so what I'm actually going to do now is I'm going to test this workflow just to make sure that it all works and make sure that when we're sending our first message it's saved uh in both a human readable message field and then also the Json message field we're actually going to check that it sends to open AI uh with that custom GPT and uh the custom message uh inputs to the dynamic data and then we receive uh that message from the assistant um that's saved again in a read aable format but then also in the Json format so let's head across Ross uh to our preview I'm just going to refresh the page so that all the updates are saved and we're going to ask the question that we asked at the start of this demo who ruled Greece in I think it was 450 4500 BC let's take a look hit send so it looks like in 450 PC Peres Pericles uh had the power and we've actually received a response at Rhymes that's great now if I were to ask a follow-up question like where was he born I think I'm asking a question that where I refer to he as Pericles and if I hit send uh I'm not going to get a response that takes into consideration the whole conversation because I haven't uh added that functionality which I showed a couple moments ago so although it does give an answer it's not relative to Pericles because uh we haven't sent the whole conversation we've only sent this message to show that a bit clearer let's head back to our data Tab and you can see that uh we've got all these four bits of Json uh which is essentially what we're going to want to send uh as our message in our workflow so in this tab we actually want to send uh the entire chat rather than just the chat in step one uh so to do that we're actually going to get rid of what we put here and to send multiple Bas of data what we're going to do is we're going to do a search for chats uh and we're just going to set the uh sort by creat date descending as no because we want to send them uh the first question and then the first answer and then the second question in that order so that it makes sense to the to the API uh and then we're going to join these chats going to search for each items Json and we're going to join these with a comma and a space the reason we do that is because if we head back to our documentation we can see that we have the message from our user as Json code followed by a comma we have our message from our assistant as Json code followed by a comma and then we have our next bit of Json code as the follow-up question from the user so if we want to test that this works let's get rid of all our data we're just going to test this again we're going to hit delete so now we have a clear set of data to work with if I head back to uh our preview app and I ask uh it a question that we just asked who ruled Greece in 450 BC submit it'll give us a response uh it's Pericles I'm going to ask uh where was he born he being Pericles let's see if it works I do have an error let's jump back uh and see sort of why that is uh all right so I it might be so there was a new line uh added here so I just remember that we didn't add o we didn't add uh the Json safe formatting uh to this response and I've actually also just seen that I've put a uh rounded bracket instead of a curly bracket here so this does this does show uh that uh it is very sensitive as I mentioned the Json safe so um good practice just added all added into every single uh section where we use Json code so made those changes let's quickly go back and uh delete these entries we'll try it one more time I'm going to hit refresh uh this time let's ask who ruled Greece in 450 ad just to change it up we can see that the ruler was the Byzantine Empire ocius the second uh if we were to ask where was he born we get a response so it has worked uh one final bit of UI thing UI changes that you might want to make is we want to uh remove this text uh that uh we inputed once the message is sent so that it clears out to do that let's head back to our workflow tab we're going to reset relevant inputs after we send and uh after we hit submit after we send that first message that just means that whenever we um click Send this will clear out uh so yeah jumping back let's take a look at what we've done we've uh created our new chat whenever the first message is sent we've also saved the Json um code uh We've then reset the relevant inputs we've sent that Json code as well as any other Json code in that conversation uh one by one with this with this comma um afterwards using the custom jpt that we've said and we've also received a response from the assistant uh as this message that's human readable but then also as this Json code we've also got this uh settings tab where we can save um and make changes to the custom GPT prompt according to what's in the multi-line inputs value so to wrap up let's head to our uh bubble let's head to our notion checklist uh we've built the workflow we've added the data type uh We've stored the message in the sender we've sent uh all the Json code joined with uh the uh comma we stored the responses and we've reset the relevant inputs as one final test let's just head back uh to our preview app I'm going to hit refresh um going to remove all of the uh data that we've added in and I just want to test this custom prompt uh workflow so uh let's hit refresh and I'm going to actually head to my settings uh tab we can see that there's our custom prompt let's change this back to the professor GPT prompt that we set uh in our demo so uh you are an ancient history Professor provide responses using academic language we'll hit save we're going to head back to our uh Professor GPT page and now let's ask a question hopefully it gives us the response as Professor jbt so who ruled uh let's say this time let's say Rome in uh 1200 ad we get this response uh it's a lot more academic in its wording it's a subject matter expert which looks great it doesn't rhyme um so we can see that the changes that we've made uh have worked um the Holy Roman Empire led by Emperor AO IV let's see where was he born if we hit send he being Emperor Otto i 4 gives us a response like that so we can see that our app has been built successfully all our API calls and all our workflows work um so there you go hopefully you're able to use this uh tutorial for your use case and build an awesome app and just like that you now have your very very own custom GPT model that you can run inside of your bubble app as you can see although we did have to interpret a few small Snippets of code it wasn't anything that we couldn't handle throughout the process if you are ever interested in learning how to connect any additional open AI services to your bubble app I'd recommend you check out my full open aai course look inside that course it explains how you can integrate absolutely every open AI API service this covers everything like image audio and text genertion right through to other things like being able to edit images translate languages and of course even create custom AI assistance if you were ever interested you can check this full course out through the description in this video in the meantime though I just wanted to say a massive thank you for taking the time to watch this specific tutorial and I wish you all of the best on your own no code Journey [Music] a

Channel: Building With Bubble

Views: 2,680

Keywords: Bubble, bubble.io, no-code, no code, no-code development, visual programming, buildcamp, coaching no-code apps, makerpad, adalo, webflow, zapier, no-code tools, app development, minimum viable product, MVP, Bubble no-code, software development, OpenAI, ChatGPT, AI, artificial intelligence, Completions API, GPT, Custom GPT

Id: TDfqGvtTbuk

Length: 51min 58sec (3118 seconds)

Published: Tue May 21 2024