Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Explain like I am 5 AI text generator built with using OpenAI

In this tutorial we demonstrate how to use the OpenAI API with Bubble for no-code AI text generation to create a tool that takes text and then explains the content of the text in the language a 5 year old would understand. We show up to succesfully make an API request to OpenAI using the Bubble API Connector and show the returned text on a page using Custom States.

With the Chat GPT 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.

OpenAI Generated Text

So I wanted to show you how to create a very simple no-code tool in Bubble that allows you to input, put some, say, scientific text, something like string theory, and then return the text as if it is explained to a five year old.

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. Then I add a new API. These are just other services that I've demonstrated in the past.

Bubble API Connector

I can put OpenAI in here and then let's go and have a look at the documentation. So I'm at example default summarise, and I have to turn change this cURL or cURL request into a format that Bubble accepts in the API connector.

I've got some header content here, so content-type and add it as shared headers, that's application JSON. And then I've got to put the private key in the header. That I can see there has got the label of Authorize and then bearer and then my API key. 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. And then pasting my API key in there.

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 make my call is a POST because I'm providing information.

And then I paste it in here. 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 copied this into post. 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.

Formating AI prompts

I'm going to put in here, explain to me like I am five, 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, basic after, okay? And let's initialise the call and see what happens. Okay. And you can see here that I get a response under choices and I can do 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 five 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? So let's go to my button and 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 Chat GPT, but, yeah, you're not going to get anything if you just provided anything that you're expecting to get if you just provide GPT-3 with the quote from Wikipedia. So let me remove that. But I still want it to start with this prompt explained to me like I am five, then two 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. 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. So my workflow, I can get the result of step one, 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 called response and then I can click preview.

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, I now have just noticed that I've kept the same button from a previous video, which was about creating a English, the 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 explained like I'm five. 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 five so I can understand it as a five year old.


Latest videos