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

How to add AI text generation to a Bubble app - OpenAI

In this Bubble tutorial we demonstrate how to generate AI text from a prompt and display the generated text in your Bubble app. This video will show you how to use the OpenAI API without the need for a plugin using the Bubble API connector.

This video is about OpenAI and Bubble and I'm going to show you how to connect to the OpenAI API with your Bubble app. This should take no more, more than ten minutes. So it's very quick.

Bubble API Connector

First of all, we head into plugins and if you haven't already, you need to install the API connector. We're going to be making this connection ourselves rather than relying on a pre-built plugin in the Bubble plugin directory because it gives us more control and flexibility.

Creating a new API call

So I've created a new API here and rename it OpenAI. And if I go back to this examples page, this really tells you everything you need to get started. There is loads of documentation to go through to understand exactly how the models work, how to make the most of their API. But we can get going with just what's provided on this page and I'm going to use the essay outline because I think that would serve as a very good demonstration.

So in the API request, in order to connect it through with Bubble, change it from probably Python by default to curl or CURL. These are the details that we have to put into the right places in the Bubble API connector. So first of all, let's go for copying the URL, the endpoint. So we will call this Essay Generator or rather essay outline generator as an action in order to be able to use it in our workflow. Does it say whether it is POST or GET? I think... I guess that it is POST. So let's go post.

Then we've got some headers to fill out. So we have to declare the content-type. You can just copy and paste this between them. The headers are in fact say we're doing an essay outline generator now, but we might want to use a different feature of OpenAI by using the shared header we only need to enter this part once.

We also need authorization. Okay, I'm going to fill out the API key in a moment.

Let's do the rest of it first. So this is data. This is everything that goes into the data field. Here we go. And then we need to make some of this dynamic in order to input different text or different variables into our workflow. So we can call this prompt and then I'm going to leave the rest because that's provided with the example that they give using the Tesla. And you can read all about the difference that any of these make in the documentation. We untick private in order to be able to access this value in a workflow.

I'm just going to get my API key which I'm keeping private there and then I think we can run a test. So if we go back to the example, we can see the sort of prompt that works really well. So I'm going to copy all of that in prompt and then say, 'create an outline for an essay about the invention of the Internet'. And let's call.

Don't forget to use 'bearer'

Okay, so I'm getting an error about the API key, and that is because I have overlooked something which is quite common with authorization. You have to put the term 'bearer' and the space before your API key. So let me do that. Okay.

And now let's try that again. That's more promising. It's thinking about it. It's waiting for a response. Okay, brilliant.

So let's have a look at what we've got back here. Okay, so here we go. In choices, it's given us one back. No hasn't. It's separating them by a new line. Here we go. So it's basically saying zero one. There we go. Followed by a new line. The Internet is a global network of computers that allow us to exchange information. And then line space is zero two.

OpenAI and Bubble Workflows

Okay, so how do we put this into a Bubble API? Because we have the API integration working really nicely now. So if we go into design, I've created just rough what we need, and I finally need to add a place to display the response. So I'm going to create a custom states here called generated text.

And because my API connector is set not as data but as an action, I can retrieve it from my workflow builder here. I'm going to connect this to my multiline input. And then I will have to create a way to display the text that's returned. So I have my text response text, which has a custom state. And then this is the choices I think I need to let's go for each items text. It's because choices returned as a list, there are multiple options available. When you make a call to a service like OpenAI, you can set how many different kind of goes or attempts you want to return back. But just so I get everything, I'm going to get it to list out each item's text.

Okay, let's have a check. If I go back to plugins and then manual response, I just need to see what's returned. So it is text each items choice is text. I'm just going to reinitiates the call.

Yeah. Returns as text. Text field.

Yeah. So this is the field that I'm trying to get to. Okay, so each items text... let's go Choices first item text. Try that.

Okay. That accepts it. Maybe I need to display in a repeating group in order for the list. Anyway, I'm going to get the first result and that's the result that I want. And lastly, I need to tell this text field to basically display the custom states in it preview.

Okay. So I'm going to write an essay outline about the history of the Firefox web browser. Okay. So I click that and there will be this waiting period because it's waiting for a request to return back from OpenAI. But there we go.

Not sure if that's good or bad. I mean, yeah, Firefox how the rise and how the fall? Is it having a resurgence? How specific is that Firefox?


But you get the idea. We now have a working API connection between Bubble and OpenAI their API. And you can now basically customise by going back into plugins these parameters here, the model that's used the temperature tokens, et cetera. You can customise it you can really now dive into any of the examples here and build that into your Bubble app.


Latest videos