Connect ChatGPT's API to Bubble w/ Example - Bubble.io Tutorial

welcome to this video about combining the power of chiat GTP and the no code toolbubble.io what are you going to learn in this video well number one you'll see how to connect open ai's API to Bubble so that you can access chat gtp's question and answer or prompt and response model in your bubble app and number two you'll see the API being used in action to build a simple question and answer app so the first thing you're going to want to do is head over to openai.com and then you see here in the upper right hand corner the API button uh this might change you know as websites do from time to time and then click on get started and then you'll be prompted to log into either an account that you already have or you'll need to go ahead and create one now upon creating one you'll be taken to this screen and chat GTP or actually open AI they'll give you 18 worth of free credits that you can start off with and just kind of get going uh to play around and start building and speaking of playing around what you'll want to do is head over to this playground area so this playground area what you see in this box here is basically the same thing you're probably used to with this question and response area except uh it's all inside of here so let's just take a look at how that works and then we'll take a look at getting the API keys so you type in a prompt you have the model it's set to uh we're using the mode for okay May violate oh no because they're trying to save the world or something uh or the theme of it who knows um but so you'll that's that's a great thing to have pop up here that you'll make one uh you'll make sure and we'll do this in a different video um that you have something that moderates what people can put into your AI model because you're sending it over to chat GTP and they will moderate that as well and you don't want your account to get penalized um and so basically now what we're going to do for the remainder of the course is we're going to look at a prompt that we're going to use to build out the stuff over in bubble to build our UI to have a prompt that's a little bit Dynamic that gives back values that are then shown from GTP over in our bubble lab so let's take a look at what the prompt is that we're going to be working with Okay so let's take a look at this prompt and we'll see it actually time out here in a second which I've set up here on this maximum length thing so I just wanted to show that to point out that you'll want to play with this to make it work for whatever use case of the uh what you're intending to get back so uh now I'm actually going to change this I'm going to say from the Below movie and I'll say movie and I'll say Spaceballs and I'll delete this and let me just do the four or three just so it's a little bit quicker but okay so we can see that is happening there so we've got our prompt here and the next thing we're going to do is we're going to go over to bubble and we're going to set up the API call so what we want to have happen there is that we want to click add another API make sure that your uh the bubble the API connector is installed um obviously if you're looking for this video it's probably pretty advanced in the world of bubble uh but for anyone new and so what we're going to do is we click add an API and this is going to be our openai API and what we're going to select here for authentication is private key and header our authorization is these for this is for the live this is for the dev you're going to need to fill both of these in so over on your openai account what you're going to want to do is head over to your API Keys area you're going to click create a new secret key head back over here into bubble and then type in this word Bearer space and then type in your or paste in your key after that so what this is doing is it's just setting up the API so that we can authenticate with it and then we're going to add this here and what this is going to see it say here is content type application Json and then so we're pretty good to go there on this part and then the next thing we're going to want to do is we're going to want to add an API call for what it is that we're doing over here and so what we're doing is we're getting we're making an API call for movie oops and we're going to be doing this as an action and we're going to use post here and then enter in this URL here so you can just read it off the screen and type it in in order to have this go to the endpoint as we are using this over here we're using our mode is complete so with that set up what we want to do down here for this is head back to our playground and then yep so we can see that we're doing pretty good here uh we went ahead over to view code make sure this is selected to Json it might be python as uh as default and then grab and paste this paste this in here and then come and look for this value so for this movie what we're going to do uh for the value of it here is we're going to enter in this for dynamic values and we'll say movie title and then here we'll say Spaceballs and then be sure to uncheck this private so that it works because we want our users to interacting with this to be able to access that okay so basically let's just take one last check over everything post action yup yup yup uh and so this top header part for this API we're making if we collapses we can see we have a call here so we're making a call here to chat TTP just for this particular stuff we could potentially have more calls in here this is just a simple tutorial where we're only showing the example or I'm only showing showing the example of one at this time but you could potentially have a few and you could also be tying into the to the dolly image API as well so let's go ahead and initialize this call okay and so we came back here and one of the main things we want to see is that this text is a text field indeed and over here on the raw data we can see that um this text that it came back with is these three uh quotes oh and pay attention to this part here for choices we can see that this choices holds this text so that when we go in our workflow and access this we're going to go through choices and then text and it's going to be like a list of an item of one so make sure you hit save here and that's going to initialize your call if it says red something red here you're going to want to rework it but you should be good to go this is pretty pretty simple and plain and I actually realized I initialized this with uh three I'm going to go ahead and re-initialize just so that we get something closer to what I'd like to show up something substantial in our results list so as it's doing that it'll come with this we can see that there's much more text here and we can save that and so we're good here that eight that could be something that's changed but we're not going to worry about that for now next up let's take a look at the UI that we have for this so over in the UI I've kind of got something that's already set up and I'm basically I'm just going to show you the teardown um what we have here is a couple different things um and basically this container holds three things this image just an image hanging out there we have a group that is a search box which contains three things it is a row that it just has two of those things or icons and then one is a styled input that we're calling input search movie title and um and then below that we have a simple button a group that's uh that's styled as a button for this giggle search and so for our funny movie um app powered by AI let's go ahead and let's see what we can do to get things going with in the world of workflows um and I'm just going to show off quick so this thing here what we want to have happen we want to have it close out that when something is typed in there so uh to do that we're just going to say in order to reset inputs this actually resets inputs that were used so we have to just find a way to use those inputs so we're going to set the state on the search box I already have a search value and we'll just say it's this inputs value and then that way we have this nice thing that will clear it out for us okay but we don't have anything yet set up to actually run the workflows from and call our caller API and get some data so let's go and do that on this search button what we're going to do is we type in open we have this open API movie quotes and basically what it's looking for here is the dynamic data that we're going to pull from whatever's in this input value and then it's going to give us a response back I think I'm just going to store that into a state just say on the uh we'll add a new custom State on the page itself and we'll just say uh this is the um GTP response and that's just some text and then what we'll do is We'll add a group and maybe give that uh and let's see what we're dealing with here okay so let's go ahead and add some text into there and this text what we're going to do for its value here is we're going to grab the response which uh we actually need to set that up for the value so it's a result of step one so this thing went out and it got we sent it this and then what it's giving us back is under choices like I mentioned a little bit ago and then we're going to go with the first items text and so basically this closes the loop for us to see that we've got um let's go ahead and make this perhaps a column okay so let's go and type in some movies it's going out communicating with the API and then here it's come back and we can see that we've got some UI work to do here at the bottom but basically we have a working a working model that communicates with chat GTP we'll do this one last time and we can see that we've successfully written a prompt connected our API to chat GTP send it out received a response and then displayed that for our users over here in our fun app called giggle now we could do some additional styling things and fancy stuff here but that's outside of the scope of this video If you like this video subscribe to the channel for more great tips about bubble and thanks for watching

Channel: No Code Academy

Views: 21,735

Keywords:

Id: kck4ji97lEs

Length: 12min 1sec (721 seconds)

Published: Mon Feb 06 2023