OpenAI GPT-4o Beginners Guide for No Coders

Introduction to GPT-4o in Bubble

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, O standing for Omni and it generates text twice as fast and 50% cheaper than previous GPT4 models. 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. But before I launch into that if you're wanting to learn Bubble and join a no-code community then click the link down below because we've got tons going on at nocode.com.

Setting Up the Bubble App

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

Creating the Message Data Type

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 get distracted here is it writes this rule in place so if this message is creator is current user then they can access it. Basically if you make in the app or you take an action to generate content you'd be able to view that content but other people can't. Right so what forms a message well we need to have the content which is going to be type text and because we're going to be using the open AI 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 here's an example so 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.

Setting Up 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 so we'll have 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.

Connecting to OpenAI API

Cool perfect right now let's actually dive into sending some data between our Bubble app and the OpenAI API so go into plugins and I go add plugins and I'm going to be using the Bubble 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 API's have got tens maybe even hundreds of different endpoints different parameters that can be sent across and if we search for say OpenAI in here we'll find a lot of 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 API Authentication

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. 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 possible to your account and you know they could just rack up a huge bill on your OpenAI account.

Configuring the API Call

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. Right then we need to set up our send message 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 how do I know that doesn't actually make it clear you'll just have to take my word at least in this documentation you have to take my word for that and then I'm gonna 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 gonna paste it into here now I did say that a model we'd be using is GPT-40 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 a model and I'm gonna just clean this up 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 like 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 so here I'm going to trim it all the way back to here notice I remove 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 so I'm going to get rid of the system prompt you can leave the system prompt in but we don't 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 would also testing that the everything that I've written here is correct and that there are no issues so let's try it okay very quick response and it's wrong I can tell you that that is not October 17th so this is something interesting to point out because I believe if you dress in this into chat GPT you will you will have got today's date there is additional prompt engineering behind the scenes going on that can make the ChatGPT you know when you just go to the website outperform what you can achieve with with with the OpenAI API so just bear that in mind so I'm going to click Save and by clicking Save I'm I'm defining and affirming all of these categorizations that take in place here so let's hit save I'm going to make a few changes here I'm going to call this one sends 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 and that's how we're moving right now but before we can add in a workflow let's add some UI.

Creating the User Interface

So I'm going to add in a repeating group and I will because I go on about how to lay out content when I'm Bubble I am actually going to do do that here 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 but if that would cause issues if I was wanting to make it kind of smudge down it went into mobile but that's fine for what I'm downloading here then let's add in some padding around it and I'm going to change the background color just so it stands out that I'll change the background color of the page to a nice gray kid this 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 on the inside of an element okay 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 but 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 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 capitalized words and then well that's what I'm 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 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 sends it and then the content each time perfect and layout and yeah that's all fine that's gonna do fine for a demo right now we need to be able to send the message so I'm going to use a multi-line input so 30 pixels above there I'll say message content chat with an AI dot dot dot and I'm going to add in a button because we need to be able to send make it last say 12 pixels about perfect 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.

Creating the Workflow

So we now move on to workflows 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 message content is going to be my multi-line input and roll 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 multi-line input will become empty 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 connectors perfectly set up for sending one message and getting one response back but it isn't set up for a conversation 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 fields 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 now if I was to try and run this and reinitialize 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 wish to reinitialize it now it's going to give you an error but we don't need to worry about that 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 so I need to put all of the messages in my conversation into this space here to fill that merge field but also I can't remember what I was going to say there we need oh 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 codes 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 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 they separated well they're separated with a comma so in the delimiter I put comma and a space 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 a an enter so I actually need to tidy this up otherwise it's going to treat it as rich text now let's make some of it dynamic so if I click on that 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 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 mark because it's already wrapped in speech marks that's what Jason safe is doing if I was to wrap it in speech marks I'd be double wrapping it and I'd get an error these are all the things you learn by just playing around in Bubble and and facing errors and trying to troubleshoot it 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 roll well we know that's going to be the assistant perfect then content and I can take out of step 3 all of the data that is sent back from the 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 now OpenAI calls it choices because there is a 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 there is it so we know there's only one response so we'll say take first item and then its message content okay I think we should give that a test so I shall say what would you recommend I do in London this weekend there's the 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 marked out which is quite interesting so that's something that you can resolve with your system prompt that I'm going to show you how to do that and also tidy up the fact that I'm overflowing out of the box 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 is parent which is body is going to define its width height I'm going to leave that as fixed and but I'm going to say number of rows remove them in value and then you 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 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.

Adding a System Prompt

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 yeah okay yeah 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 so I'm basically going to say that my my conversation with OpenAI is always going to have this message at the start and so I'm going to say you are a helpful assistant responds without any formatting