Bubble pirate translator with OpenAI

Setting Up the OpenAI API Connection

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 takes text and converts that text into quote-unquote pirate speak like you get from the very cheesy movies. So I've created a simple page here with a multi-line text input and a button. The first thing I need to do is set up the API connection to OpenAI.

Configuring the API Connector

So I go over into my plugins and I go to the API connector or I install it from our 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.

Setting Up API Headers and Authorization

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 there 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. 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.

Configuring the API Request

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 I need a URL to send the request to. So here we go. And so the text model, yeah, I used DaVinci prompt. These are all parameters apart from the prompt. Well, in fact, even the prompt you can play around with in the OpenAI playground to make sure you get the right settings.

Testing the API Connection

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'll change this to action so that it shows up in my workflow menu. And then I'm going to test it. So I'm going to flesh this out a bit in a 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 crew from a new hope, paste it in and let's see what happens.

Adjusting API Parameters

Okay, so I've not received an error and I've got a response. 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, go into 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 try that.

Finalizing the API Setup

Okay, there we go. I needed to increase the tokens in order to get a longer reply 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. Now, how do I build that into my form?

Creating the User Interface

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 neat and tidy. And then my text is going to be my page's response.

Setting Up the Workflow

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. OpenAI generate text. There's the dummy default data that I had. And OpenAI text generation is all about the prompt. So if I was just to say, copy in 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.

Finalizing and Testing the App

So write this as pirate speak. That and then after here, I can put in the input of my multi line. And I'm just going to increase this up. Let's double it. So, 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 up. One final thing. I generate the API code here, but I'm not saving the result anywhere. So set state of my page response to. Ah, which one, which one is it? 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.

Final Test and Conclusion

So let's go. And let's try a different bit in here. Let's copy that. Translate to pirate. Okay, so Bubble is sending the API request. And there we go. We get during the battle rebel scallywags demonstrate a secret plan. Excellent. So we can see that open their eyes. That's 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. Thanks for watching.