Explain like I am 5 AI text generator built with Bubble.io using OpenAI
In this Bubble.io 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.
Unlock AI-powered text generation: Learn how to create an "Explain Like I'm 5" tool using OpenAI and Bubble!
Transform complex ideas into simple language: Discover the power of API connectors to build an AI-driven explanation generator.
Master the art of prompt engineering: Create engaging, child-friendly explanations with this step-by-step Bubble tutorial.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.