Introducing OpenAI and GPT-3 in Bubble.io
With the ChatGPT API just around the corner, I wanted to demonstrate what we can do with what's existing, what's currently available with the OpenAI API using GPT-3. And so I wanted to show you how to create a very simple no-code tool in Bubble that allows you to input some, say, scientific text, unlike string theory, and then return the text as if it is explained to a five-year-old.
Setting Up the API Connector in Bubble
I've got this simple page created here, and I need to go into Plugins, and then the API connector, if I haven't got that already there, I can install it from Add Plugins, it's by Bubble. And then I add a new API, these are just other services that I've demonstrated in the past, so I can put OpenAI in here. And then let's go and have a look at the documentation.
Configuring the OpenAI API
I'm at beta.openai.com/example/default/summarize, and I have to change this C-A-U-R-L, or C-CURL request, into a format that Bubble accepts in the API connector. So I've got some header content here, so content type, and add it as shared headers. And that's application JSON. And then I've got to put the private key in the header, and that, I can see there, has got the label of Authorize, and then bearer, and then my API key.
Setting Up the API Call
So I go into my OpenAI account area, and I create a new secret key, and I will be deleting this as soon as I've recorded the video, so no one's getting any freebies. So I'm going to say, "Bearer," and then pasting my API key in there. Right, and then I start building up my call, so I'm going to say, "Generate text," and what else do I need in here? I can then copy and paste basically everything that's here, not including the quotes, because that's part of data. And I put, my call is a post, because I'm providing information, and then I paste it in here.
Configuring the API Request
So, prompt, I want to make this dynamic so that I can connect up to my multiline input. It's not private. I want to make my request an action so that I can run it in a workflow when a button is pushed. And now, oh, I've not got the URL, so here we go. I just copy this into post.
Testing the API Connection
And then, in order for Bubble to know that my API integration, my API connection works, I have to run it in the panel here before I can access it elsewhere in my app. So, I'm going to put in here, "explain to me like I am 5," and then we can get an idea of formatting. We can see here that new lines are communicated to the OpenAI API using /n. And then, I'm going to copy this piece of text from Wikipedia for string theory. Paste it after. Okay, and let's initialize the call and see what happens.
Analyzing the API Response
Okay, and you can see here that I get a response under choices, and I can view it here. There we go. It's explaining it in a way that, perhaps, again, this is a bit of a gimmick, but perhaps, using tiny particles and tiny rubber bands or strings, it sounds much more in the language that a 5-year-old might use. So, I can hit save, but how do I link this up to the bits of UI that I've got here?
Connecting the API to the User Interface
So, let's go to my button and let's clear out those from a different demo. Now, if I go to plugins, you can see I've got OpenAI generate text. That is a direct reference to the label I've applied here and the name that I've written up here. So, in here... Now, the secret to getting good results from GPT-3 is prompts. I mean, prompts are still very important with ChatGPT, but, yeah, you're not going to get anything if you just provide it... Oh, and anything that you're expecting to get if you just provide GPT-3 with the quote from Wikipedia.
Setting Up the Workflow
So, let me remove that, but I still want it to start with this prompt, "Explain to me like I am 5, then a 2 new lines, and now I can put in my multiline input A, and I need somewhere to save this." So, on this page, I've already set up a custom state on the page called "Response of type text". So, I can go into here and I can... "Element actions", "Set state", and go to my page, "Response", and then I have to save the result of the API call.
Handling the API Response
Where do I find it in here? So, I can check that by going back into plugin, and then going... I can either run the call again, but that will cost me tokens with OpenAI, so I can view the previous call and the results. And I can see that the bit that I want to display on the page is contained in "Choices", and then "Text". That's the value I want to show.
Displaying the Result
So, my workflow, I can get the result of step 1, "Choices". Now, "Choices" Bubble knows to interpret this as a list, because I can instruct OpenAI to return more than one variation, just in case it gives me a choice over which ones to work with. But in this instance, I just want one, so I go with first item, "Text". And then, I need a way of displaying this on the page, so I can go and add in a text label, and then refer to the custom state, "Call response", and then I can click "Preview".
Testing the Final Result
Okay, and then let's test it out. This time, I'm going to use "Quantum Mechanics", sticking with the physics theme, and I'll just take the first sentence, because that's going to prove whether it's working or not. Paste it in. Okay, now I've just noticed that I've kept the same button from a previous video, which was about creating an English to pirate translator, but you can see here, because the prompt is different, I have got some text back that follows the prompt that I gave it, which is "Explain like I'm 5". So it takes that, and OpenAI has generated this piece of text, AI generated text as a response to my prompt of, "Make this scientific language, and let's make it like I am 5", so I can understand it as a 5-year-old.