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

OpenAI GPT-4o Beginners Guide for No Coders

Learn how to add OpenAI GPT-4o to your Bubble.io app with this beginner's guide to integrating AI using no-code development.

How to Add GPT-4o to Your Bubble.io App

This is how you can add GPT-4o to your Bubble app. It's a beginner's guide looking at Bubble and AI, including the very latest model from OpenAI, which is GPT-4o standing for Omni. And it generates text twice as fast and 50% cheaper than previous GPT-4 models.

Setting Up Your New Bubble.io App

So right now I'm going to dive into a blank canvas, a new Bubble app, and show you how you can build a no-code AI app with Bubble. And it's probably going to take us 15-20 minutes and that's it.

Creating the Basic Structure

Right, let's launch into our blank Bubble app, skip the assistant, and we're just going to build a simple chat interface. And I'm going to do it right here on index.

Setting Up Data Types for Chat Messages

So first of all, I'm going to go into data and create the data types that I need to handle my chat. And primarily I just need messages or message. So create.

Implementing Privacy Rules

Now, I'm not going to cover things like privacy rules. You can click a link down below for details about those. Obviously, that is critical. If you launch your app and you have sensitive data on it, you want to make sure that only the right people view the right bits of data.

Ensuring Data Privacy

In actual fact, let's put a bit of best practice into here. Message and we'll say private by default. And what that does, again, distracted here is it writes this rule in place. So if this message's creator is the current user, then they can access it. Basically, if you make it in the app or you take an action to generate content, you'd be able to view that content, but other people can't.

Defining the Message Structure

Right, so what forms a message? Well, we need to have the content, which is going to be type text.

Adding Roles to Track Message Creators

And because we're going to be using the OpenAI API, we need to have something called roles that basically determines who the sender or creator of the message is. And if I go into the documentation, I'm sure we can find something about roles fairly quickly.

Example of Roles in Documentation

Here's an example. We have all these messages and each message contains a role. And again, that's just so we can keep track of who's who in the conversation with the AI.

Using Option Sets for Roles

So back in here, I'm going to use option sets for roles. And option sets are a great way of determining like a separate database or a fixed set of data that you want to be able to use throughout your app and use it dynamically. Option sets should not be used for anything private, but roles is a great example.

Adding Roles to the Data Type

So we'll have a role and then we don't want to add another attribute. That's like adding a field to the data type role. The option set role, we just want to add in user and assistant. Now if we go back to our message data type, we're going to add in a field for that role because every message needs to be assigned basically the role that created it. Cool, perfect.

Connecting to OpenAI API

Right now let's actually dive into sending some data between our Bubble app and the OpenAI API. So I go into plugins and I go add plugins and I'm going to be using the Bubble API connector.

Benefits of Using the API Connector

And I prefer using the API connector if I'm connecting to a third-party service because it gives me complete flexibility. Many APIs have got tens, maybe even hundreds of different endpoints, different parameters that can be sent across.

Searching for OpenAI Plugins

And if we search for, say, OpenAI in here, we'll find a lot of plugins that some wonderful people in the Bubble community have created. But if you want to have the ultimate flexibility and also kind of just have the knowledge of what exactly is going on, then we're going to do it ourselves.

Setting Up the API Connector

So there we go. And I'm going to add another API. And so the API name is OpenAI. You can name this anything you like. It's just simply the labels we're going to see later on in the app.

Securing Your API Key

Now we need to set authentication to private key in header. And a private key is like a password. You want to keep it secure. You want to make sure that your users don't get access to your OpenAI private key or secret key because that's basically a password to your account. And you know, they could just rack up a huge bill on your OpenAI account.

Configuring the Authorization Bearer

Now going back into the text generation text completion documentation, we can see that the header needs to contain authorization, bearer and then our API key. So I'm going to write in bearer and I'm going to paste my API key. I'm going to deactivate this key before publishing this video.

Setting Up the Send Message Call

Right then we need to set up our sendmessage call. So once more, we are basically having to translate this into the Bubble API connector. Now we don't need to include content type application JSON because Bubble now includes that by default unless you override it in some way. But we need to take this endpoint here, paste it in. Now we have to change, get to post.

Configuring the POST Request

How do I know that doesn't actually make it clear. You just have to take my word, at least in this documentation, you have to take my word for that. And then I'm going to copy everything here that's within the quote marks because D for data, but it's basically the body of what we're sending to OpenAI and I'm going to paste it into here.

Setting the GPT-4.o Model

Now, I did say that the model we'd be using is GPT-4.0. So if I go back here and then models, I'm just going to check how it's labeled. Here we go. They want it labeled like that. So what I do is swap it in the model and I'm going to just clean this up.

Sending a List of Messages

So this is a list of messages. And that's one thing to remember, is that when we are corresponding with the OpenAI API, we need to send the conversation, the history, every single time. So you may start by only sending one message, but then you'll get a message back. And now your conversation has got two messages. So then by the time your user sends a second message, there's actually three messages at play. And that's how you get the wonderful context, historical awareness that is so powerful with these LLM models like OpenAI because it knows what came earlier in the conversation because you provide it with what came earlier in the conversation. Using the chat completion endpoint does not have a memory. You have to provide all of the messages each time.

Tidying Up the JSON Body

So here I'm going to trim it all the way back to here. Notice I removed that comment at the end. If you make a mistake with the JSON syntax here, you're going to get an error. If you keep getting an error, copy it into like a free JSON syntax error checker, and that will probably point out a pesky bit of punctuation that's causing an issue.

Removing the System Prompt

So I'm going to get rid of the system prompt. You can leave the system prompt in, but we don't need it in this case. So the user is going to say, oh, let's test out something. Actually, with this new model, we'll say what day? What is today's date? Okay, now I'm going to initialize it. And this is my way of testing. And Bubble will also test that everything that I've written here is correct and that there are no issues. So let's try.

Testing the API Call

Okay, very quick response. And it's wrong. I can tell you that it is not October 17. So this is something interesting to point out, because I believe if you'd written this into ChatGPT, you will have got today's date. There is additional prompt engineering behind the scenes going on that can make the ChatGPT when you just go to the website, outperform what you can achieve with the OpenAI API. So just bear that in mind.

Saving the API Configuration

So I'm going to click save. And by clicking save I'm defining and affirming all of these categorizations that have taken place here. So let's hit save.

Creating the Send Message Action

I'm going to make a few changes here. I'm going to call this one send message and I'm going to change this to action. That means that it's going to become a workflow action that I can run in a workflow.

Designing the User Interface

And that's how we're moving right now. But before we can add in a workflow, let's add some UI. So I'm going to add in a repeating group and I will because I go on about how to layout content well in Bubble. I am actually going to do that here.

Organizing the Layout

So I'm going to right click on this and say group in a group in a column. I'm then going to make change this, which is the page to a column. Take my group, I'm going to call this body, don't have to call it body, center it. Yeah, I can leave the width as fixed width. That would cause issues if I was wanting to make it kind of smudged down into mobile. But that's fine for what I'm demoing here.

Setting Up Padding and Colors

Then let's add in some padding around it. And I'm going to change the background color just so it stands out. I'll change the background color of the page to a nice gray. Give this a bit of roundness and. Yeah, there we go. Now I'm going to add some margin to the top. So margin is applied on the outside, padding is applied, applied on the inside of an element. Okay.

Adding Message Content to the Repeating Group

And so this is going to be a list of my messages. And where do I get those? Well, I'm just going to search my database for all messages that are created. Now, privacy rules come before this search, so you should set up your privacy rules to ensure that only the right users can access the right data. And because of that, I don't need to have created by equals current user. In fact, that can give me a false sense of security because my privacy rules may be misconfigured and it may appear that I'm only seeing what I should see as a user. But leave it out because then just easier to detect if something has gone wrong.

Sorting Messages

I don't want to sort them by created date. Yeah, cool. Right now what's going to be part of each message? So I'm going to add in a text box and I'm going to say current message, role, display. And then I'm actually going to say capitalize words. And then it's all gone wrong. Current message, role, display, capitalized words. That's because it's going to print user in there. But I want it to give user a capital. And I'm going to make this bold.

Displaying Message Content

And I can do this with BB code, but I could also do it down here, but that would then apply to this whole block. Then under that I'm going to insert the message content. So we're going to see who sent it and then the content each time. Perfect.

Finalizing Layout

And layout. Yeah, that's all fine. That's going to do fine for a demo. Right now we need to be able to send the message. So I'm going to use a multiline input, say 30 pixels above there. I'll say message content, chat with an AI. And I'm going to add in a button because we need to be able to send, make it last, say twelve pixels above. Perfect.

Adding a Send Button

Right. So this is going to be our send. Okay, so that's the basic UI we need in order to chat with the AI. So we now move on to workflows.

Creating Workflows for Message Sending

And I can do that by having clicked on my button saying add workflow. And that takes us into the tab here for workflows. And so when the button is clicked, well, the first thing I want to do is to create a message because I want to keep a record of all messages in my Bubble app. So I'm going to say create a new thing.

Creating a New Message

Message content is going to be my multiline input and role is going to be user because my user will start the conversation. That's the first message. I'm then going to reset the inputs and that just means that the multiline input will become empty.

Making the API Call

And now I need to make my call to OpenAI. But before that, we just need to revisit the documentation text generation because remember I need to send a list of messages. So I have to actually change what I've done in the API connector. The API connector is perfectly set up for sending one message and getting one response back, but it isn't set up for a conversation.

Adjusting the API Configuration

So if I go back into the API connector, I'm now going to cut this. So I'm going to put it on my clipboard and in here, write messages that creates a merge field basically, or dynamic data that I can insert into it. And I don't want it to be private because I need to access it in the workflow, which means that it's not private to my user. So I wouldn't put like an API key in here. I have to put my API key up here because otherwise Bubble doesn't know to keep it private.

Handling JSON Syntax

Now if I was to try and run this and reinitialize it, it's going to fail because it needs to have that complete JSON structure in there to actually function and I don't need to reinitialize it because everything's working and I'm confident what I'm going to do next is still going to work. So yeah, if you reinitialize it now, it's going to give you an error, but we don't need to worry about that.

Adding the API to the Workflow

So now my workflow, I go into plugins and here is my OpenAI send message. If you don't see it exactly like that, it's for one of two reasons. Either you've named it something different OpenAI send message, or you haven't changed this to action, or actually a third reason, you didn't initialize it to begin with.

Structuring the Request Properly

So I need to put all of the messages in my conversation into this space here to fill that merge field. But also we need it structured, we need it structured in a very particular way. So I could do a search for messages, that's fine. But because we're trying to develop in a really lean manner, it's a good principle, even with no code. I'm just going to say look at the repeating group and get the list of messages. And then, and this is the really important and clever bit going, going to say format as text. And that allows me to define how each individual message is structured within this space of text and also how they're separated. So let's do the easy bit first. How are they separated? Well, they're separated with a comma. So in the delimiter I put comma and a space.

Adding Dynamic Data

Then I'm going to paste from my clipboard. This is what each message needs to look like. Now by pasting it into this space here where Bubble gives me the prompt that I can also edit it in a rich text editor. Bubble has inserted a lot of invisible characters here, including space and enter. So I actually need to tidy this up. Otherwise, it's going to treat it as rich text.

Formatting Message Data

Now let's make some of it dynamic. So if I click on here and replace it with dynamic data. I can say this, messages role display and now on content, I'm going to do it slightly differently. I'm going to highlight everything, including the speech marks and say this, messages content, JSON safe.

Ensuring JSON Safety

Now we have got a couple of videos demonstrating exactly what this does, but in brief, it's going to wrap everything in the message, in your speech marks. But it's also going to ensure that any punctuation in the message which would cause an issue with the JSON syntax, is made safe. So I'm not wrapping it in speech marks because it's already wrapped in speech marks. That's what JSON safe is doing. If I was to wrap it in speech marks, I'd be double wrapping it and I'd get an error. So these are all the things you learn by just playing around in Bubble and facing errors and trying to troubleshoot it.

Saving the Assistant's Response

So there we go. Now this is going to get a response just like we saw in the API connector when we first initialized it. So we want to save that response. So we say message role. Well, we know that's going to be the assistant perfect then content. And I can take out of step three all of the data that is sent back from the API. Now if you're not seeing this, you need to go ahead and initialize it. But this is basically what we saw when we first made that call to OpenAI. And I just know out of habit that it's going to be in choices.

Handling Multiple Choices

Now OpenAI calls it choices because there is an n parameter that you can send which would be say I've sent OpenAI message, give me three different responses. That's not really how a chat works. So we know there's only one response. So we'll say take first item and then it's message content. Okay, I think we should give that a test.

Testing the Chat Interface

So I shall say, what would you recommend I do in London this weekend? There's user and we're now waiting on OpenAI to respond. And we get back, interestingly, we get back with some formatting and it's formatted it as Markdown, which is quite interesting. So that's something that you can resolve with your system prompt. I'm going to show you how to do that and also tidy up the fact that I'm overflowing out of the box.

Fixing UI Issues

So let's fix the UI issue first. Can't believe I didn't notice that. Let's make this repeating group a bit more attractive. So width is going to be 100%. That just means that its parent, which is body, is going to define its width, height. I'm going to leave that as fixed, but I'm going to say number of rows, remove the min value and then you can't set a gap between items in the repeating group, but you can set the separator. So let's make this 20. But then we have a nasty gray line in between each one. Well, here's a trick. Just set the opacity to zero.

Adding a System Prompt

We should already see the difference that that has made. And we can scroll it because I've got that fixed height on the repeating group. Perfect. So let's add in a system prompt. Well, we go back into plugins and I think I've still got the formatting on in my clipboard. Yeah, there we go. So tabs, spaces, enters, don't make the same difference in here as it would have done in the rich text editor that we saw earlier.

Latest videos

crossmenu