Build a Claude 3 AI No Code App in 15 mins

Creating a Claude 3 Powered AI No Code App Using Bubble

Here's how you can create a Claude 3 powered AI no code app using Bubble and I think this is going to take us less than 15 minutes but we'll see. So I'm in the Bubble app. This is one that I've recorded a lot of Bubble tutorials on and you can view all of those by clicking the link in the description. But we were just going to launch right into it and I've got a blank page here and we're going to be using the create a message endpoint from anthropic who are the providers behind Claude. And if you're unfamiliar Claude is the equivalent of ChatGPT or GPT 3.5, GPT 4 that's offered by OpenAI. Anthropic are a serious competitor and in the last few days they have brought out some new models that is Claude 3 and it comes in three different flavors. Haiku, Sonnet and Opus and there's some really impressive stats that go and check out in the video to find out more about that. But we're going to be taking what is written here and we're going to be adding that in to a Bubble app and we're going to be making a nice little chat interface with Claude.

Setting Up the Bubble App Layout

So let's dive in to the Bubble app and here's our blank page. First thing I'm going to do is change the layout to a column. When building in Bubble you really want to avoid using fixed, it's old fashioned, it's not a great way of laying out content on a page. So what do we want to do? Well we want to send a message. So how do we send a message? We need a multi-line input and we also need a button. So you can click here and you just search for button. Add that in to there and the button is going to say send. I'm just going to group these together. I've held shift and clicked on each one and now I'm right clicking and I'll group these into a column and then I'm going to give the column a fixed width, max width of let's just say 600 and I'm going to then center that on the page and center the button and let's make this width 100%.

Creating a Repeating Group for Messages

Okay, I then need somewhere to display my messages. So I'm going to add in a repeating group because I want to repeat through a list of data and that's going to be all of my messages. And now if I click on type of content, you're going to see loads of values in here that you won't see on yours. This is like I say because I've created hundreds of Bubble tutorials. So that we are both on the same page and I don't accidentally jump ahead. I'm going to go into data types and create a new message, a new data type and I'm going to call this one message with Claude. Okay, now appreciate, don't get confused. I'm pointing out now I have a messages data type in here already from a previous app. I'm just going to delete it. There we go. But I'll still say message with Claude.

Setting Up the Database Structure

Now let's just set up our database structure. We need to save a few things when we send and receive a message. So let's go back to the API documentation. We can see that the message has got at least two parameters. We've got role and we've got content. So let's copy that over into our Bubble app. Now I've already got this set up, but I'm going to explain it. Location sets are a great alternative to using a database for a set list of options. For example, colors. You can see I've got that example in here. Another example is currency. But I've also got role set up. And there's a nice kind of universality coming across, which is the fact that OpenAI and Claude have got a very similar API, which means that the roles are the same. So either going to be the user or it's going to be the assistant. That's going to be the two sides of the conversation.

Creating an Option Set for Roles

So I can leave this as it is. In fact, let me just let me create it from scratch now that you've seen one that's meant to look like let's get rid of role. Because option sets, you know, I was messaging someone earlier this week who was getting confused with option sets. So we'll add in an option set for role. Now I've seen this is the confused bit. People think, oh, I need to add in attributes. No, attributes are fields on the option set. So for example, on currency, that's not a good example. And it is... So for example, on color, if I wanted to have the HTML hex code for the color, I would add that as a text field as an attribute, which means that on black, I can then add in the hex code. And that just means that when I refer to black anywhere in my database, I can either get the display, which is like the label, or I can get the hex code. Option sets, really, really powerful. But do remember, don't store any private data in them and also don't make them too big because option sets get loaded in with every page. So use them sparingly, but they are incredibly powerful.

Setting Up the Message with Claude Data Type

Let's go back to role. We need assistant and we need user. That's it. Go back to our data types and our message with Claude. We will now add in that field of role, not text. We're going to make a dynamic link in our database between this field and our role option set. And I'm going to set a default here just in case I forget for the in later on. I'm not, but if the role field is empty, it's going to cause an error. So I'll just say the default role actually is user. And then what do we need? We need content. And the field type is not going to be content. The field type is going to be text. Perfect. So now if I go back to design, I can say the type of content is my messages with Claude. And what am I going to show? Well, I'm just going to show all of them.

Setting Up Privacy Rules

Now there's much more to unpack here when you move to launching a production app. You're going to want to have your privacy rules in place. You're probably going to want to ensure that your conversations are only seen by the user who created them. We've got other videos covering those topics, but right now we just want to get the basics in place, which is to show a list of the messages. I'm going to get rid of the row limit there. Let's make this at the top. Right. And then the cell container layout is going to be column. I'm going to add in a text field here and the layout is going to be full width. I'm actually going to put my repeating group into my group there. That way it nicely contains it. It puts it in the middle of the page and let's add in a bottom margin of say 30. Perfect.

Displaying Message Content

So my text field. This is where I'm going to display the content. So I'd say current cells message with Claude's content. And actually to really spell it out, I'm going to add in a second part here, but I'm going to put it in first. I'm going to say current cells message with Claude's role display. And then carefully clicking the middle, I'm going to put a colon in place and I'll even show off how we can inline some styling. I'm going to make that bold. This is using BB code, which is like old forum internet kind of HTML. Again, we've got another video on that you can check out, but that's just going to make the role. So is it assistant or not? In fact, we're going to make this even smarter because I've written assistant and user with lowercase that's just smart enough. So we'll say capitalized words. So it's going to look something like this. I'm going to use the canvas placeholder here as a way of cleaning up the design. What I'm seeing right here. So it's got some like user. What is the capital of France? Seems to be the question that I ask all AI models. It's going to look something. Can I put BB code in there? Yeah, it's going to look something like that. That's perfect.

Integrating the API with Bubble

So we now actually need to get into the meat of the API, which is taking this and putting it in our Bubble app. So I'm going to click copy down here because Bubble does a fairly good job of importing this in. So I'm going to go to my API connector and again, I see anything cool here. You want to learn? Hello to our website, search our YouTube channel. You can find out more, but this is going to be Claude. And then I'm going to import another call and paste this in and say, import. So what it's done is a bit of a mess, but it's going to save us some time, which is it's imported in anything that's in here and it has. Yeah, we're going to be. We'll just try that out. Not that one. This one. Yeah, it's important across. So let's just tell you things that first of all, we don't want this call above. And we'll say here, send message. Now we want to move some things around because our API key. We might want to create additional calls. So we'll say private key and header. There's the key name. Let's remove that. Oh, it's not letting me. It's a little bug there. Let's see if it's happy about that later on. We just want to get this initialized as quickly as possible now. So let me go ahead and get the API key and put it in up here and let's now test it out. So we'll say initialize call. And this is our way of teaching Bubble, what we expect to send and receive from the API.

Testing Different Claude Models

Okay, that took a little bit longer than I expected. Maybe it's because it's using Opus and Opus is the most powerful model. I'm going to click save. And just because I'm curious, I'm going to change that. So we're going to go and learn about the different models. So Opus is the most powerful, but it's also going to take the longest. And let's take Haiku because we would expect Haiku to be a lot quicker. So I'm just copying Haiku, pasting it in there. Let's re-initialize the call. There we go, much quicker. So you want to experiment with that. And you can experiment with that through the Anthropic clause, developer dashboard, the Anthropic console. You can just test to your heart's content, the prompts and the system prompts and different models, different temperature to get the results that you want. So let's just click save again.

Building the Workflow

Now last thing before I move this into the design tab and build the workflow is to say, we've got to change this to action because I want this to be an action in my workflow. Let's go ahead and do that. So when send is clicked, what do we want to do? Well, we want to create a new thing and that's going to be message with Claude because this is going to be our user message. And then the content is going to be our multi-line input. Okay. Then we want to actually send the message. So I'm going to go into plugins and Claude sends message. Okay. And it provides it like this. We want to make it a little bit clearer which bits are dynamic. So let's go back into plugins and take this and we'll put in here user message. And it's not private. And in fact, I'm going to do this better from the start. I'm going to get rid of the speech marks because we need to go through a process and then it's making something JSON safe. And you'll notice that in the JSON code we've got here, there's square brackets, commerce, speech marks. What if a user includes that content in the message that they send? Well, we need to declare that that is text content and not code content. So if I wanted to properly re-initialize this again, I would need to put in speech marks. But I don't need to re-initialize at this point. I'm confident it's going to work.

Finalizing the Workflow

So let's go back to our workflow. Going to tidy this up one last bit, which is that these can both be private. Right. There we go. Workflows. Yes, here we go. So now I take the, I can, well, I can either refer to the multi-line input or I'm going to refer to the previous step. It's content. JSON safe. Then I'm going to create another message because this is going to be the reply. So the role is assistant and the content is going to be the result of step two because step two is our API request. And so we can go to content. Now it's going to give us a list here because we could potentially ask for more than one version, but we'll just say first items text, I think. And then we'll reset the input. Right. Let's give that a test. And we do that by clicking preview up the top.

Testing the Chat Interface

So let's try sending a message. We will ask, how are you today? Click send. And so there we get our user message. And now we're waiting on a reply back and we get the assistance reply back saying, yeah, I'm doing well today. One final thing. I realize I've gone slightly over 15 minutes, but this is the really powerful bit. And what has got so many of us excited about these chat interfaces is that if I send another message now, open, not OpenAI, I'm using anthropic. Anthropic is only going to receive that message. We want anthropic and we want Claude's model to be aware of all of the steps in the previous conversation.

Providing Historical Context to Claude

So we need to make a small change, which is to go back into plugins and every message needs to follow this format. So I'm going to copy that to the clipboard or cut it rather. And in here, it's simply going to be messages because I need to supply Claude. With all of the previous messages in the conversation in order for it to have that historical context of what has been said in previous messages. So now in my workflow, and make that not private. So now in my workflow, I need to provide a list of messages. So I'm going to say, yeah, do a search for. So all of the messages, I want the oldest one first. And I need them expressed in that particular format that I cut out of the JSON code earlier. So I need to have it as format as text. I'm going to paste this back in. Now I have to tidy this up a bit because Bubble was going to insert formatting into it. Whereas really, it just needs to be separated by spaces and not line breaks. Otherwise, I think you'll get an error. Let's just rebuild this. So the we make it dynamic. This messages role display that automatically inserts user or assistant into that. And then the content is going to be this messages content. And we make it JSON safe. Notice that I'm not wrapping it in speech marks because JSON safe wraps in speech marks automatically. The delimiter, well, that is what separates each one. And we can go back to the, we can go back to the documentation to see how they want us to separate them. And it's going to be a comma because it's JSON. So let's go back into here and add in our comma.

Final Testing and Conclusion

Now let's go back and refresh our page. Okay. So let's ask a question. I don't know why I always do this, but we can say, what is the capital of the UK? Okay. So the capital of the UK is London. We're getting a weird sort on that. Let's just try and fix that. Sort by created date. Yeah, that's better. So now how we got it, we're going to test it to see whether it's aware that we're talking about London. So plan a five day trip there. Okay, there we go. It knows we're talking about London. It knows we're talking about the UK. That's because when we send the AI requests now, we're passing all of the previous messages into it. So I'm going to wrap things up there. Remember, you'll want to learn about privacy rules. That will be the next step here if you want to launch this as a production app and you'll want to really experiment in the Anthropic console with the different models. You've got Haiku, you've got Sonnet and you've got Opus. And there's some really exciting things that people are doing with Opus. But remember, it's going to take longer and it's going to cost you more. So if you've got any questions, leave a comment