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

Build a Claude 3 AI No Code App in 15 mins

Learn how to create a Claude 3 powered AI no-code app using Bubble.io in less than 15 minutes. Dive into this step-by-step guide on setting up a chat interface with Claude by Anthropic using the no-code platform.

Creating a Claude 3-powered AI No Code App with Bubble

You. Here's how you can create a Claude three powered AI no code app using bubble. And I think this is going to take us less than 15 minutes, but we'll see.

Setting Up the Bubble App

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.

Introducing Anthropic's Claude

Who are the providers behind Claude? And if you're unfamiliar, Claude is the equivalent of chat GPT or GPT 3.5 GPT four 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 three and it comes in three different flavors, Haiku, Sonnet and Opus.

Adding the Chat Interface

And there's some really impressive stats that go and check out an earlier 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 into a bubble app and we're going to be making a nice little chat interface with Claude. 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.

Sending Messages

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 multiline input and we also need a button. So you can click here and you can just search for button, add that into there and the button is going to say send.

Displaying Messages

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, a 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%.

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.

Data Structure and Set Up

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 it out. Now I have a messages data type in here already from a previous app. I'm just going to delete it.

Defining Fields

There we go. But I'll still say message with Claude. Now let's just set up our database structure. We need to save a few things when we send and receive a message.

Connecting to the API

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.

Using Option Sets

Now, I've already got this set up, but I'm going to explain it. Option 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 setup 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. We're 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.

Setting Up the UI

So I can leave this as it is. In fact, let me create it from scratch. Now that you've seen what it's meant to look like, let's get rid of role because option sets, I was messaging someone earlier this week who was getting confused of option sets. So we'll add in an option set for role. Now this is the confused bit.

Database Structure

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, any of these.

Layout and Design

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.

Connecting the UI Elements

So use them sparingly. But they are incredibly powerful. Let's go back to role. We need assistant and we need user. That's it.

Displaying Messages in the Repeating Group

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 to fill it 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 now. There's much more to unpack here.

Adding in the Chat Interface Design

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 and I'm going to add in a text field here. And the layout is going to be full width.

Displaying Message Content and Role

I'm actually going to put my repeating group into my group there. That way it nicely contains it, puts it in the middle of the page and let's add in a bottom margin of say 30. Perfect. So my text field, this is where I'm going to display the content.

So I'd say current sales message with Claude's content.

Okay. 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 sales message with Claude's role display.

Inline Styling with BB Code

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.

Testing the UI

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.

Avoiding Mistakes with Capitalization

Let's just smarten it up so we'll say capitalize 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 going to look something 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 here? Yeah, it's going to look something like that.

That's perfect. So we now actually need to get into the meat of the API, which is taking this and putting it in our bubble app.

Initializing the API Call

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, head over 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.

Tidying Up the API Connector

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 gonna just try that out. Not that one, this one.

Testing the API Connection

Yeah, it's important across. So let's just tidy things up. 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.

Preparing the API Key

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.

Optimizing Model Selection

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.

Customizing the Model

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 reinitialize the call. There we go, much quicker. So you want to experiment with that and you can experiment with that through the anthropic Claude developer dashboard, the anthropic console.

Finalizing the API Connection

You can just test to your heart's content, the prompts and the system prompts and different models, different temperature to get the result that you want. So let's just click save again. Now, last thing before I move this into the design tab and build the workflow is to say we got to change this to action because I want this to be an action in my workflow. Let's go ahead and do that.

Building the Workflow

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 multiline input. Okay. Then we want to actually send the message.

Sending the User Message

So I'm going to go into plugins and Claude send 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.

Handling JSON Safety

I'm going to get rid of the speech marks because we need to go through a process known as making something json safe. And you'll notice that in the JSON code we've got here, there's square brackets, commas, speech marks.

Implementing the AI Reply

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 reinitialize this again, I would need to put in speech marks, but I don't need to reinitialize it at this point. I'm confident it's going to work.

So let's go back to our workflow. Going to tidy this up one last bit, which is that these can both be private. There we go. Workflows. Yes. Here we go.

So now I take the, I can either refer to the multiline input or I'm going to refer to the previous step as content JSOn safe. Then I'm going to create another message because this is going to be the reply.

Creating the Assistant Message

So the role is assistant and the content is going to be the result. Step two, because step two is our API request and so we can go to content.

Displaying the Assistant Reply

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.

Testing the App

Right, let's give that a test. And we do that by clicking preview up the top. So let's try sending a message. We will ask, how are you today? Click send.

Verifying User and Assistant Messages

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.

Adding Historical Context

One final thing, and 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, 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.

Passing Previous Messages

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.

Adding Historical Messages

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.

Updating the Workflow

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, I'll do a search form.

Formatting Previous Messages

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.

Tweaking the JSON Format

Now I have to tidy this up a little bit because bubble is 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.

Testing the Conversational Context

Let's just rebuild this. So we make it dynamic, this messages role display that automatically inserts user or assistant into there. 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 it in speech marks automatically the delimiter. Well, that is what separates each one.

Conclusion and Next Steps

And 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, add in our comma. 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.

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. Let's try that.

Yeah, that's better. So now how we gonna, we're gonna test it to see whether it's aware that we're talking about London. So I'll say 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 request now we're passing all of the previous messages into it. So I'm going to wrap things up there.

Final Considerations

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.

Experimenting with 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 down below. And remember to like and subscribe to support our channel.

Latest videos

crossmenu