So it can make sense to build your own integration with the Bubble API connector, and let me show you how.

Bubble API Connector

So I have the Bubble API connector installed. Yes, that's a plug in, but I've added it in. And then I'm going to add a new API, and I'm going to call this OpenAI. And I'm going to authenticate in the header, and I'm going to add in my call here, which is going to be Generate AI Text. I'm changing this to an action so that I can access it as a block in the workflow. And then I need to go over to the OpenAI API documentation and basically translate this here into the API Connect in Bubble, and we can do it really quickly.

So first of all, I'm going to take content type, copy and add it as a shared header, and then application JSON. Then what else do I need? I need authorization. So I've already added that in. I need to add in Bearer and then go into my OpenAI account, create a new secret key. Copy that. And I will be deleting this key as soon as I've recorded this video and adding that in after Bearer. Okay.

Then the actual parameters for the call itself, the data, I need to just copy this within the quote marks. Copy that. Change this to a post request. Paste the JSON into the body. I can then leave model as it is, but I'm going to change this to role user and then content... Oh, no, no, no. Keep that system. I've just seen there are two here. There's basically, if I put a line space in there... No, no, I made a mistake. I made a line space here.

So system is defining, basically giving a character to OpenAI. And then content, this is the bit I'm going to change. And so I'd make this dynamic. So I would call this message. And then Bubble adds this field here. And by unticking private, I can access it in a workflow. One final step I need to add here, which is the endpoint, which we have here, api.openai.com/.../completions. Paste it in.

And I shall say, how far is the moon from Earth? And I will initialize my call. And you can see that OpenAI responds with all of this data here, including the message content, which is how far the moon is from Earth. And so I click Save. And it's important to initialize my API call because then I know that it's working above all those that it's all working. So I've got a simple page here. I've got a text label, I've got a mod line input, and I've got a button and I shall name this submit. And then I'm going to add in a custom state onto my page. And I should call this reply, make it text. I just need somewhere to be able to store the reply from OpenAI. And then I'm going to tell this text label here to show the reply.

Building a Workflow

Okay, now, let's build the workflow. It's going to be really quick. I go to plugins, OpenAI, generate AI text. I change the message to my multi line input. And then I'm going to reset my input, and then I'm going to set my state. And this is going to be the text reply from OpenAI. And this is, remember, we got all that data back. We're only looking for one particular part, which is within choices. The first item, because we're only getting one choice back, and then the message content. Let's preview that.

Let's ask it, how far is the sun from the... Well, let's see what it says. Sun from the moon. Maybe confused it. Let's see. I hit submit. Bubble is making the request, OpenAI in the background, and I get the response back.

Yeah, there's distance between the two of them, but it's important to remember that they're not always in the same place. So there you have it. That is how to add OpenAI, add the power of ChatGPT, begin to make your own ChatGPT clone even in a Bubble app without having to use a third party plug in. If you want to expand upon this, we've got many videos in our back catalog about OpenAI, ChatGPT, integrating it in with Bubble, using you can really expand upon what I've just shown you here. If you require a little bit of extra help, you can reach out to our website, planetnocode.com you can book a one to one session with me, and I can coach you in how to build your Bubble app and help you out live over a Zoom call. Yeah, that's basically it. If you've got any questions about OpenAI or ChatGPT or adding it into Bubble, please leave a comment below. We love reading them and we read every single one.