How to build an AI-powered app with no-code tools: A step-by-step tutorial using Claude 3.5 Sonnet

Building an AI-powered No-code App with Claude 3.5 Sonnet

This is how you can build an AI powered no code app using the very latest AI model to be released, which as of today is Claude 3.5 sonnet. And it's taking the AI community by storm. You only got to go over and look on Twitter X to see how people are comparing it to OpenAI's GPT 4.0. And also alongside the current offering from anthropic, we're seeing that Claude 3.5 sonnet is the intelligence be wary, there's no numbers on the y axis, but it's saying that Claude 3.5 sonnet is more intelligent than Claude three opus. So let's dive right in and build ourselves a no code app.

Setting Up the Basic App Structure

And it's only going to take us 5-10 minutes to do so. So I'm using Bubble.io. That is my no code platform of choice. And let's start with a blank page here. So what do we need in order to create an AI tool?

Well, at the very least we need an input. So I'm going to say a multi line input and drag that in. Now this is not going to be a lesson about designing in Bubble. I'm going to do the design process very quick. It's not going to be responsive, meaning it's not going to adapt to different page sizes.

If you would wanted to do that, check out our videos on container layout, rows and columns. That's the way you should do it. But I'm going to do it nice and quick here. And then we just need a button, like I say, going to make this really rough. And then we need somewhere where our response comes back.

Integrating with the Anthropic API

So let's now actually dive into the AI part. So we need to go into the anthropic API reference and then go to messages, create message. And this gives us the template for how we need to lay out our data going from our Bubble app on no code platform to anthropic. And then we'll get that amazing AI response back. So make sure you've got curl or C curl selected up top here because first of all we need to know our endpoint.

This is where the data is being sent. So I'm going to copy that to my clipboard and then I go back into my Bubble app and I go to plugins. And this is an app that I've created loads of Bubble tutorials from in the past. So we just go on to API connector and if you don't have that installed, click add plugins at the top here. And so these are all services that I've integrated in with in the past.

Setting Up the API Call

And so I'm just going to say add another API and I'm going to call this claude. Then it needs to be authenticated because it's a paid product, it's very cheap. But I still need to know, I still need to instruct anthropic who to charge for the API calls that I make. And the way that we do that, if we go back to create message is in the header of our call. We need to send our API key.

So I'm going to copy that because this is our key label, go back in and then I say authenticate authentication, rather private key and header. Now most commonly for APIs the key name will be authorization, but anthropic want us to use X API key as the key name. I'm then going to fill in the key value, but I'm going to come back to that because that's you should treat as a password. So I'm going to fill that in and come back in this video. What else do we need to put in the header?

We need to put anthropic version.

So I'm going to say a shared header. And this is so that I can create multiple calls which all share the same headers. They share the same authorization and they share the same like mandatory parameters. So I've got to put this one here.

Okay. And then there is one more here, content type application JSON. Now actually because of a recent update, Bubble automatically includes that in. You can include it yourself, but this is the default unless you ever write it. Now the body of what we send is here or the data section.

Configuring the API Request Body

So I'm going to copy all of that inside of the quote marks and then expand here. And this is my API call. So this is an action that I can take in a Bubble workflow. So I'm going to say ask AI. Now, I said it's an action.

So I'm going to change this to action. That makes a node or like an element in the workflow builder. We're going to come right onto that in a moment. Then it needs to be post. How do I know that it's post?

Well, it sometimes would say there we go, it needs to be post just there. And then I'm going to paste in the body. Now I've jumped around a bit because the end point, which I'll take back here, needs to go into here. Okay, so let's just work out what's going on here. First of all, we've got the model and the model is automatically filled with Anthropic's.

Most impressive model by their own standards, their most intelligent one, which is Claude 3.5 sonnet. Then we've got Max tokens. This is saying how large should the response be? And this can go all the way up to, if you look through the documentation, it's all laid out, Max tokens. Okay, different models have got different Max tokens.

Customizing the API Request

You can go and investigate that, but we'll leave that as 1024. And then we've got the messages section. So this is the bit that I'm most interested in, because this is where we actually send a message to the AI and we're just going to do something really simple like ask the AI question. So I want to make this a field that is dynamic and I can fill in a workflow because at the moment all of this is static. So how do I do that?

Well, Bubble tells me here that I can use triangle brackets to add in dynamic values. So I'm simply going to say, question. Notice that I delete the speech marks. Now JSON syntax. JSON syntax is unforgiving.

You'll get an error if you put a piece of punctuation in the wrong place. So I'm going to return the speech marks back in here and I'll say what is the most powerful LLM? Okay, notice I have the speech marks at the end. Now this isn't going to be private because it isn't private data that I, as the app creator, I'm supplying to anthropic. It is actually data that the user provides.

So it isn't private from my users. What I do want to ensure is private is my API key. And by marking it as private key and header, I'm doing that. So before I can run this and test it, I just need to fill in my API key. I filled in my key.

Testing the API Connection

I got that from my anthropic account. And so now I can test it and I need to initialize it because I need to teach Bubble what to expect in return, so that I can know the structure of that data and use it and display it on the page. So let's initialize our call now we're waiting and it's middle of the road model in terms of speed. That was very quick. And we get back some data here.

I just popped open more of the expression here. As an AI system, I don't actually have up to date data. Yep, that's fine. That's what we'd expect to get back. So I'm going to click save because this is teaching Bubble of the structure of what comes back.

Setting Up the Workflow

So let's click save there. Now I can go back to design because we're going to play plug the connection we've made in the Bubble API connector into this page in our Bubble app. So let's say rename this and we'll say ask AI. And then let's add in a workflow. So I'm on the button and I click add workflow and then I find in plugins the workflow that I just created so I can search for Claude and it says ask AI.

Now if you're seeing something different, that's because I've named this API connection clause and I've named this particular action as Askai. So whatever you named it, you'd find it in that menu as long as you successfully initialized the call. Let's go back to workflows and I now need to insert the data from my multi line input value. And notice that I've commented about the speech marks. So the speech marks have to be there in order for the JSON syntax to be correct and so that you don't get an error.

Handling JSON Formatting

Now I've removed the let's go back a step, let's go back a step.

Okay, it's expecting it in this format with the speech marks around it. So by selecting the multi line input, get that back again. Okay, there are no speech marks there unless I type the speech marks into the input. That's not great for user experience. So I'm going to add a text modifier here called formatted as JSON safe.

And we've got whole videos covering this topic, but effectively at the very start that puts the speech marks back around it, making it JSON safe. But it also means that it accounts for any additional punctuation. If we look back at our JSON object here, we've got speech marks, we've got colons, we've got square brackets, we've got curly brackets. All of that is part of the code of. But when we send text that might include similar punctuation, we need to declare, and the coding term is escape that punctuation to declare that it's actually part of text and not part of code.

Displaying the AI Response

Well, thankfully Bubble has this formatted as JSON safe, so that's just going to make everything safe and wrap it in the speech marks. Now our next step is that we want to display it because this is when Bubble sends our question and we're now at this point here waiting for an answer. So I'm on the display here. Now there are many ways that you can approach this. I'm going to use something called custom states, which is like temporary storage.

If the user was refreshed, the webpage, the data is gone. But it's perfect for this demo. So you can add a custom state to any element in Bubble. I've just got in the habit of adding it to page because then I don't lose where I've placed it. So I'm going to say AI response, you could name it anything you like and it's going to be of type text and click create.

And then I want to refer to that here. So I go to my page which I've labeled Claude 35, and there is my custom state. Ok, so now this text box is going to show any text that I set in that custom state. So the only thing left to do now is to set state and find our state. Okay, and now find the data returns from the AI.

Finalizing the App Setup

Now we can go back to the API connector, reinitialize it to really check where it comes in, basically within the structure. We just need that one particular bit that's actually got the reply. But I have done this many, many times. Just know that it's in content. Now the content could contain a list of different options as a reply.

That's the n value, the parameter which you'd see in the API, in the Claude API reference page. We're not asking it to generate three possible responses, we're just asking for one. Because we've not set n defaults to one, we've not set n to be a higher number than that. So we just say first item. It only returns one item, but it knows that it's a list.

We just say first item and then we say text. And that's what's come back. So now we are ready to test it. So here's my blank page, here's my input. So let's ask a question it might well know the answer to.

Testing the Completed App

Let's say where are the next lim pick spell that wrong? But AI is quite forgiving in that sense. Games being held hit loads of typos in there. So I've clicked the button and Bubble is now waiting for a response. And here they come back.

So we get this amazing AI response saying that the next Summer Olympics is going to be held in Paris and it's only a month or so away. So there you go. That is how you can add in an AI. AI. You can build, in fact, an AI powered no code app.

And if you've made it this far and you want to learn more about building apps with Bubble, which is an amazing AI and no code tool, click the link down in the description to find out more and to join our no code builder community and access all of our previous video content.