Adding ChatGPT to Your Bubble App Without Plugins
You don't have to use a plugin to add the power of ChatGPT to your Bubble site. In fact, you might find that some of the plugins are lacking the full capabilities of the OpenAI API. So it can make sense to build your own integration with the Bubble API connector, and let me show you how.
Setting Up the API Connector
So I have the Bubble API connector installed. Yes, that's a plugin, 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 generateAI 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 connector in Bubble, and we can do it really quickly.
Configuring the API Call
First of all, I'm going to take content type, copy, and add 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. 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.
Customizing the API Request
I can then leave model as it is, but I'm going to change this to role user, and then content. Oh no, no, I 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 mean 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.
Finalizing the API Setup
One final step I need to add here, which is the end point, 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, and Bubble knows that it's all working.
Creating the User Interface
So, I've got a simple page here. I've got a text label, I've got a multi-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 say, tell this text label here to show the reply.
Building the Workflow
Okay, now let's build the workflow. It's going to be really quick. I go plugins, OpenAI, generate AI text. I change the message to my multi-line input, and then I'm going to reset my inputs, 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've 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.
Testing the Integration
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 confuse 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 sun and the moon, but it's important to remember that they're not always in the same place.
Conclusion and Further Resources
So there you have it. That is how to add OpenAI, add the power of chat GPT, begin to make your own chat GPT clone even in a Bubble app without having to use a third-party plugin. If you want to expand upon this, we've got many videos in our back catalogue about OpenAI, chat GPT, integrating it in with Bubble. You can really expand upon what I've just shown you here.
Additional Support and Services
If you require a little bit of extra help, you can reach out through our website plantno-code.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 chat GPT or adding it into Bubble, please leave a comment below. We love reading them and we read every single one.