Ask a question
In this Bubble tutorial video, I'm going to demonstrate how to use OpenAI and the OpenAI API and link that in with your Bubble app in order to create a pirate translator. We're going to use this demonstration to create a single page app in Bubble that's takes text and converts that text into pirate speak like you get from the very cheesy movies. So I've created a simple page here with a multiline text input and the button.
Guide to Bubble API Connector
First thing I need to do is set up the API connection to OpenAI. So I go over into my plugins and I go to the API connector, or I install it from Add plugins if I haven't already got it, and then I add a new API.
This is basically for each different service I want to integrate in with. So this one will be OpenAI, and then I go over to the OpenAI documentation, and this is where I begin to interpret what they've written here as part of the API request. And I have to interpret it into a format that fits in with the Bubble API connector UI so I can see that I need some header content of Type, content-type, so I can have the shared header of Content Type and that's application/json. And then I can see I also need to put an Authorization. And I can do that either by adding another shared header here, or I can add it as a private key here.
Authorization & OpenAI API Key
So that is authorization and it needs to begin with Bearer, followed by my API key. I found my API key in my OpenAI account, so I generate a new key and I will be deleting this as soon as I've recorded the video, paste it into there.
Then let's go back to the documentation. This is my data section so I can copy what they've got here between the quotes. And let's call this generate text. And then it's a post and my JSON body goes in here. I'm just going to put in some line breaks so that it's a little bit clearer what's going on here. And then I need a URL to send the request to. So here we go.
And so the text model, yeah, I use DaVinci prompt. Now these are all parameters apart from the prompt, but in fact, even the prompt you can play around with in the OpenAI playground to make sure you get the right settings. But we just want to test this. So I'm going to call this prompt because that allows me to put dynamic data into this workflow. And in fact, I change it to Action so that it shows up in my workflow menu.
Writing an OpenAI prompt
And then I'm going to test it. So I'm going to flesh this out a bit in the moment, but I'm going to go with something like write the following in pirate speak and a little bit fun. I'm going to take the first sentence of the Star Wars title crawl from A New Hope, paste it in and let's see what happens. Okay, so I've not received an error and I've got a response.
And yeah, that's the text I've got back tis a time. So I'm going to hit save because I've got a response back. It's not a great response, but the API integration is working. So actually what I'm going to do is I'm going to check in because I was testing this before recording the video, going to the playground. Just check that I've got similar settings here because this is the sort of result that I was expecting and maybe my character length, maximum length is probably way too short. We've got max tokens there. Is that the parameter? Let's go back into here. Let's just increase the tokens and and try that.
Okay, there we go. I needed to increase the tokens in order to get a longer apply back. And bear in mind that the more tokens you use, the more it will increase your bill with OpenAI. So I can hit save there. And that is working.
Creating a front end form
Now, how do I build that into my form? So I need somewhere to display my results. I'm going to add in a text field and I'm going to use a custom state to save the response from the API. So I'm going to call this response, I'm putting it on the page just because that makes sense, keep it nice and tidy. And then my text is going to be my pages response.
Now let's set up our workflow. So first of all, I'm going to set this to input should not be empty. And then let's tap this into the API. Cool, we set up. So OpenAI > Generate text. There's the dummy default data that I had.
OpenAI text generation is all about the prompt. So if I was just to say, copying Star Wars New Hope, it is a period of civil war, et cetera. OpenAI doesn't know what to do with that.
So I have to include a prompt. So write this as pirate speak, delete that. And then after here, I can put in the input of my multiline and I'm just going to increase this. Let's double it so that I make sure I get the full response back. It's not limiting it by the number of tokens. And then let's preview this one final thing.
Saving the OpenAI generated text response
I generate the API call here, but I'm not saving the result anywhere. So set state of my page response to which one is if I go back to my API, I am looking for choices and I'm looking for the first entry of choices text choices, first item text. And just FYI, the reason it's doing that is because you can put in parameters so that it generates more than one variation. But I'm just having to say first item because I'm telling it to only generate one.
So let's go and let's try a different bit in here. Let's copy that into that. Translate to pirate. Okay, so Bubble is sending the API request. And there we go. We get during the battle rebel scanny wags demonstrate a secret.
Excellent. So we can see that OpenAI has done something very creative there. Obviously, this is a silly example, but I just wanted to demonstrate in another way the power of what you can do with OpenAI and Bubble.