Build Your Own No-Code Custom GPT

Creating a Custom GPT with No Code

You can create your own custom GPT with No Code in just 20 minutes and I'm going to show you every step of the way in this video. What you will end up with is a chat like this. So I can say what is your role and click send. And now I'm waiting for a response from OpenAI and I get back as a marketing expert at Planet No Code blah blah blah. That is because I've created my own custom GPT to act as a marketing expert for my business, Planet No Code. I'm going to show you how to do that in this video and we're going to dive right into a new app in the Bubble editor.

Setting Up the Bubble App

Here is our blank canvas for our Bubble app. And if you watch this video through to the end, you'll see just how powerful Bubble is as a web app creation tool completely with no code. For example, you can design, you can set up workflows, you can set up a database. We're going to be using all of those things in this video.

Designing the Chat Interface

So I'm going to add a little bit of styling to this page. I'm going to change the background color to a gray. I'm going to set the layout to column. I'm not going to concentrate too much on styling things incredibly nicely or even giving much of an explanation about why I'm making a certain stylistic choices like container layout column. We've got other videos that cover that.

Setting Up the Repeating Group

So I'm going to add in my repeating group. A repeating group is how I'm going to list through all of the messages. I'm going to repeat through the data type messages in my database that's going to form my chat. So I'm going to change that also to a column and I'm going to add a bit of margin to the top and a background color.

Creating the Database Structure

Now let's dive into data. So I need to add in a new data type and so that will be message. And I'm going to add some fields as I go through this video, but right now I just need the message to contain content because that will be the text that the user types in and the OpenAI that your custom GPT replies with into your application.

Displaying Messages in the Repeating Group

That allows me to go to content type set as messages data source do a search for messages and then I can add in a text label into here and I can say current cell's message. I'm linking in with that data type and I'm simply saying display the content and so that will print the content of that message at the moment for sales for messages.

Adding User Input and Send Button

OK, so now let's add in a multi line input because that will be my have my user enters. Their half of the chat. So let's get that 20. I'm just going to send to that there. I think also I'll make the background color of this white as well. And while I'm now going to add in a button. I said send. Again, minimal padding. And center it so that's basically all of the core design aspects I need in order to present a custom GPT chat to a user in my app.

Considerations for Production Apps

Now there are other things you need to consider. This is what you need for an internal MVP, but if you're actually going to let users free on this, you'd want to set up user as well. You want to set up user accounts. You'd want to set up some way to protect your open API from being abused. You know, too many requests. You want to limit that some sort of token system, for example. But this is the basics. This is demonstrating how to get the internal MVP working for your custom GPT.

Setting Up the OpenAI API Connection

So now I need to go over into the OpenAI documentation because I have to take, I mean, I will put a link in the description, but I have to go to API references and create chat completion because I have to send this piece of code over to OpenAI in order to get the AI chat response back. So let me show you how to do that. I'm going to go back into Bubble and go into plugins and add in the API connector.

Using the API Connector in Bubble

Now in Bubble, there are OpenAI plugins available. None of them are official. They're created by the amazing community of plugin developers on Bubble. But that is a good shortcut, but I would say that in most cases they are a shortcut because there's nothing, there's a lot of what you can do with the plugins that link in with third party services like OpenAI. You can build yourself using the API connector and that's what I'm going to show you how to do here.

Configuring the API Call

So I'm going to add in a new API, call it OpenAI, and I prefer to do this method where I can because it gives me the most control over how I engage with the third party API. I'm going to authenticate in the header. How do I know that? Well, it's because authentication goes in the H section, H for header. And I need to add in another piece of header content, which is the content type application JSON.

Setting Up Shared Headers

So I'm going to add in a shared header here because I can set up multiple calls to OpenAI down here. This is one of them. But I know that each of them is going to share this structure. Now what we're dealing with here with the JSON and with the API call, if you get one bit punctuation wrong, if you get one miss type on a parameter name typo, it's going to fail. So it needs to be precise.

Creating the API Action

Then we'll add in our API call to send data and generate that OpenAI response. We'll say send message. I'm going to change this to action because I want it to be an action in a workflow. That's all going to be explained as it comes up. And then I need this to be post because I'm sending data to OpenAI.

Configuring OpenAI API Parameters

So let's go back into references and I'm going to copy everything here that's inside of the quote marks and paste it in. So there are some things that you can change here. You can change the model. So this is just going to use GP3, GPT 3.5 Turbo because it's quick and it's cheap. And what else do I need just to be able to test this for you? Let's go back into documentation. I need the end point. So I'm going to copy that. Paste it in there. And then I need my API key.

Adding the API Key

So I'll go into my OpenAI account and I create an API key. Copy that. I will be deleting this before publishing the video. And I paste it in here, but I write the word bearer in front so that it starts like that. And we check the references. Yes, bearer followed by the API key.

Promoting Planet No Code

Now before I go any further, if you're learning Bubble, then you should subscribe to our channel. You should like this video and you should check out our website planetno-code.com because we've got hundreds of Bubble tutorial videos just like this one. We are a channel all about no-codes, all about Bubble. And we've got hundreds of videos showing you just what you can build with the power of no-code using Bubble.io. So check out our website planetno-code.com to get started with that.

Testing the API Connection

Right. This is now a point where I can test it. So I'm going to initialize the call. This is me instructing Bubble to send this API request to OpenAI. So I'm going to initialize it and I get back a response that looks like this. If I get back an error, well, that means I've made a mistake and I have to try and work out what's gone wrong. But this is good because I can see that OpenAI has replied with this message here. Hello, how can I assist you today?

Setting Up the Workflow

So I'm going to click save because that's also the process that I'm training Bubble. What the reply looks like because I need to be able to extract out of that the message content and any other data that I want to use. So let's now go and set up a workflow. So when send this clicked, I want to plug in, send a OpenAI, send message.

Handling the API Response

And now that's not showing up for you. Then that will be because either you've written a different API name and a different API call name in there. Or you've got this set to data. I'm seeing that API action in workflows because I've got this set up just like this. So let's go back into workflows. Now if now the button is clicked, it's going to send that same message. And now I want to save the response.

Saving the AI Response

So I'm going to say create a new thing, message. And then the content is going to be. If I initialize the call again, I want to save this bit. And so I need to go into choices and now Bubble has detected that choices can be a list. That's because this particular OpenAI, API end point, you can request it to give you more than one version. Now if you're building a chat app, that's not really going to work. You only want them to send back one version, but it still treats as a list. So I need to go choices first item message content.

Structuring the Database

So I go results of step one, choices first item message content. And that's going to save the text of the AI reply into my app. Now I want to know, I want to be able to layout and have a bit more control over the structure in my database. So I'm going to add in, in fact, I'm going to go to data. I'm going to add in an option set.

Creating Option Sets for Message Roles

Now option sets are a brilliant way of storing fixed values across your app. There's a couple of things to be wary with with option set is that they are loaded in on every page. So don't create an option set with thousands of entries. Also option sets should never be used to store private information, but they're perfect for something like this, which is role, which are the different sides of the conversation.

Defining Message Roles

So if I go back into the OpenAI references here, we can see, yeah, we've got a role and then maybe I go back up to the chat here. Where do we see it? Messages. Where's, where's, where's, where, where, what am I looking for? Oh, here we go. Messages, right. So you can have a role as an assistant or as a user or as system. Okay. So when, well, let me add those in so we can have assistant, we can have user and we can have system.

Adding Role Field to Messages

Okay. Now what I'm going to do with that is back on workflows, I'm going to create a role field on my messages of the type option set role that I created. And that means that this inbound message, I can tag it as assistant. And that's going to be important because part of using the chat completion OpenAI, API endpoint is that I have to provide the whole history of the conversation with every single message.

Saving User Messages

This is all part of ensuring that you get that really amazing historical knowledge of the conversation coming through in OpenAI. So I set that as a system. Now, I actually want to save another message and I'm going to put that up here. I want to save the outbound message that my user has submitted. That's so that in my repeating group and in my database of messages, I've got both sides of the conversation.

Structuring the API Request

So content is going to be multi-line input A's value and then role is going to be user. So now I'm saving two messages when the button is clicked, but what I'm missing is actually passing those messages into OpenAI because I'm just using their dummy content here of these two messages. So I'm going to go back into plugins and I'm going to make this dynamic.

Formatting Messages for OpenAI

So everything in messages needs to follow this exact structure. I'm going to show you how we can build that. So I'm creating like a merge field or a variable here and I don't want it private because I want to be able to access it in a workflow. And I now need to rebuild this structure here for each message. So in fact, I'm going to copy that. Notice that in JSON, the different entries are separated by a comma. That's going to be so important when we come to it.

Building the Message History

So I have to compose the message history here. Even though this might be the first message that's sent, I have to compose the message history here. So I'm going to say do a search for messages, sort by creator dates, descending no, because I want the oldest to come first and the newest message to appear at the bottom. And then I want to have format as text. And then I'm going to paste in the formatting from OpenAI.

Formatting JSON Safely

And now it's important here that by pasting it in, I've actually inserted a load of additional characters, for example, the spaces and the lines based on actually going to make sure that it's all on the same line because I don't want to get an error. Like that. And then the delimiter is what separates each of these. And so that is a comma out of the space. Now I need to make this bit dynamic. The role is this messages role. I'm searching through all my messages and then I'm saying for every one message format it like this.

Handling JSON Formatting

So for every one message, I want to have the roles display. Why is it display? Well, if I go back into option sets, we can see option sets have a default field called display. I prefer to call it label. Okay, but that is my different values here. Let's go back to format as text. And then I want my message content. Now here's another really important bit, which is that JSON is particularly sensitive. The JSON syntax, meaning the way the code behaves and what the code looks for, is particularly sensitive to certain punctuation.

Using JSON Safe Formatting

Like you can see that the code here is using curly brackets and speech marks. And I want to make sure that if a user enters curly brackets and speech marks into the multiline input, that that is not going to break my app. So I have to use a modifier called JSON safe. So I'm getting rid of everything, including the speech marks, and I'm saying this messages content JSON safe. That means it wraps all of the message content in the speech marks, and it takes any punctuation or basically any characters in the message content that could cause an error JSON. And it does a process known as escaping it, which is effectively to put a backslash in front of it. And that ensures that OpenAI knows that it is text content rather than code.

Adding the System Message

So I think we are now... Oh no, no, no. Really, really important bit. We are making a custom GPT, and that means we actually want to run with the system message. So I'm going to go back, plugins. I'm going to add in the system message here, making sure that we have a comma there, because the system message is message one, and then the messages is our list of messages that we've generated from within the app.

Crafting the Custom GPT Prompt

So this is the bit, 16 minutes in, this is the bit where you actually get to craft