How to Make an AI No Code RAG App with Bubble.io

Building a No Code RAG App with Carbon AI, Claude, and Bubble.io

This is how you can build a no code RAG (retrieval augmented generation) app using Carbon AI, Claude, and Bubble.io so that you can do something just like this. We'll say Matt loves rock climbing and we'll save this to our knowledge base. And then we'll query. And this is where we combine the knowledge base with Claude and we'll say "Does Matt like outdoor activities?" Now of course, if I was to send that directly to Claude, he's got no idea who Matt is.

Combining Knowledge Base with AI

But we send our message. We combine the output from Carbon AI with Claude and we get: Matt does at least like one outdoor activity. Matt likes rock climbing, so let's dive into how we do that. But if you're watching this video, you probably have an idea, you've got a business idea and you're trying to build it with Bubble.

Getting Started with Bubble.io

Click the link down in the description, head over to planetnocode.com to really accelerate that journey and check out all of the amazing resources we've got for people just like you. To help us get started, I've created a very basic page here. The design's not amazing. I've used fixed layout, which obviously you shouldn't do. You should be using rows and columns, but I've got a multi-line input here, which I'm going to have a button that's going to save new knowledge to the knowledge base.

Setting Up the Page

And then this is where the magic happens behind this button here, because here's where we're going to be combining the response from Carbon AI with Claude. Or you could use OpenAI, it doesn't really matter in order to get a nice chat message back. So let's start by working out how do we add knowledge to our knowledge base? And I'm going to be using Carbon AI as the tool to do that. Because Carbon goes far beyond just being able to save text snippets to a knowledge base that you can then retrieve data from.

Using Carbon AI

You can upload files. I believe there's a range of formats in fact, including like PDFs, which can have optical character recognition, you can scrape web pages, you can get YouTube transcripts, you can do web searches. There's a load of connections such as S3, Gmail, Slack, Outlook. These are all possible sources that you can retrieve data from in order to use in your AI app that you're building a Bubble building of no code for.

Adding Content to Carbon AI

Now, we're just going to start with the simplest one, which is going to be upload text. And so this is the API, the API post command that we need to run the API request in order to add content, which is just text. So let's go back into our Bubble app and go into the API connector and add a new API. If you don't see the API connector, you can add it from new plugins. The API connector is immensely powerful.

Setting Up the API Connector

Just look at some of the services we've connected in the past, anything from weather to grok to emails to Adobe. But right now we're connecting to Carbon AI. Okay, and let's go back here. So what we need to send through is content type application JSON. We don't actually need to add that in Bubble anymore.

Authenticating with Carbon AI

That's now a default value unless you specify a different value. But we do need to authorize and authenticate our call. That's important because not only is that so Carbon knows that any actions taken by my users should be billed and run through my account, but it's also going to ensure that the data in my account is protected. So you should treat your API key like a password. But there's a couple of interesting things to realize with how to authenticate into Carbon.

Setting Up Authentication

You can either do it with an access token, which frankly is still a nightmare in Bubble. So we're not going to do that. We're instead going to provide an authorization bearer API key and then a customer id. And both of these need to be in the head of our call in the header. So if we go back to here, let's start building this.

Configuring the API Call

So I'm going to take the endpoint, add in an API call and we'll say save text file paste in its post. How do I know it's post? Because it says post up here, then the authorization and it says, and then in get started it says it needs to be bearer API key. Simply put, because they've got two methods of authorization. The documentation.

Setting Up the API Request

Yeah, it can't just display two types. But what I am also going to do is copy everything in here, which is all of that, and paste it in. Now I think there are, I'm going to try and keep things simple. Not the Claude, we're going to counter that, just the required field. So we have to authorize and then nothing else is required.

Simplifying the API Call

So we'll just use contents. And we'll use, yeah, we'll just use contents. So I can actually reduce this call all the way down to that. And then oh look, they use triangle brackets. Very handy for pasting into Bubble because I want to make it JSON safe.

Testing the API Call

I'm going to remove both of those and then so that I can test it, I'll simply say "Matt has a favorite food, it is pizza." Okay, so that's something that Claude is not going to know because it's not going to know who Matt is and it's not going to know that my favorite food is pizza. I'm taking private because I want to be able to dynamically swap a value in, in a workflow, replace that multi-line inputs will put that multi-line inputs value into this position in the API call. This needs to be changed to action because I want to run it as a workflow action. And then I need to authenticate so it says authorization.

Adding Authentication Headers

And then I'm going to paste in my API key, which I think is this one here. And of course I'll be deleting that before publishing this video. And then I need another shared header or not shared header. I need to have that customer id. If we go back and we go into get started, the customer id is the way that it silos or separates or divides the different data in here.

Using Customer ID for Data Separation

So this is my way of ensuring that if I was user A uploading data to the knowledge base within this no code app, that I'm not accidentally retrieving user B's data. So it says to use some sort of unique identifier. So you could use the Bubble unique id or you could use anything right now for testing. But we need to make it dynamic. And Bubble does not yet allow you to make the shared header calls dynamic, which is a bit annoying in this instance.

Making the Customer ID Dynamic

But the individual header calls can be. And so is that, does that need to be, doesn't need to be in speech marks. So I'll simply say test that. In fact we'll just say ABC 123. Okay, that's the unique id for this user at least to test it.

Initializing the API Call

And then everything else looks to be in order. So let's initialize the call. Perfect. We don't get an error. It says source raw text, it says queued for sync.

Processing Inbound Data

That's because it does take a moment to process inbound data. But seeing as this is quite small, it shouldn't have really, shouldn't really taken too much time. So what's next? Well, we need another API request to Carbon because this time we want to retrieve and so we have to use their search. So this is also a post, also authorized in the same way, but then it's got a number of different queries so we can go back into Bubble.

Setting Up the Search API Request

And I'm just going to right click and duplicate. So now we've got our duplicate request. So I'm going to say search, get the new endpoint and then customer id stays the same. But we have to update our queries down here. So let's just have a look at what the essential part is.

Configuring Search Parameters

So we need to have integer and we need to have query. They're our only required fields, not integer number of chunks to return. So sort of in a nutshell, the process here is that if I'd submitted a much bigger document, say copied and pasted some text from a full word document, then it's going to divide it up into sections and you can really kind of go down with the parameters of that. But we're saying how many, how many of those individual entries or chunks in the knowledge base we want returned. So that could be two or it could be 20.

Tuning Search Results

It really depends on the how much data you want to be putting into the AI. And it's something to kind of tune to get right. But we just need query and we need k for now. So I'm going to say query and we need k.

Setting Up the Search Query

And because k is an integer, you can just write in. I'm going to write in three. You could also, of course, make that a dynamic value if you wanted to. But now let's just try saying "Matt favorite food" and initialize the call.

Testing the Search Query

So we get back one document, because that's all that I've supplied. And we get back the one that I submitted only two minutes ago. Matt has a favorite food. It is pizza. This is working.

Combining with Claude

This is really good. So now we combine this in with a call to Claude in order to get that lovely kind of chatbot formatting, conversational tone. So let's head on to that. To do the LLM step or the AI step, we're going to be using Claude. You could be using OpenAI.

Setting Up Claude API

I'm a big fan of Claude at the moment, so we want to add another API. So I'm going to call this Claude. And I know through habit and having done this many, many times over the last weeks, months and years, we say authorization and we put the private key in the header. Here's the Claude documentation. We want to create a message and we need to authenticate that with our Anthropic key.

Authenticating with Anthropic

But the key name needs to be X-Api-Key, like that, without the speech mark. And then I'm going to paste in my Anthropic key. There we go. Of course, I'll be deleting that before publishing this video. And we'll say, here, send message.

Configuring Claude API Call

Okay, just like before, it needs to be an action in our workflow. It's going to be posts and we get access to the body or the data field and here's the structure that it has to follow. So I'm going to copy that.

Setting Up the API Endpoint

I'm going to get the endpoint and there's one other header value that Anthropic requires. So I'm also going to copy that. I'm on the Mac. I use paste to keep a history of my clipboard. So that's how I'm able to do this.

Adding Shared Headers

So header paste that in, make sure we separate them out.

Actually this would be a better example of where it can go in a shared header because all of the calls for Anthropic will be using that. And make sure I get rid of that space at the start. There we go. And then yes, the endpoint. Oh, I thought I had that on the clipboard.

Initializing the Claude API Call

Let's go back.

Copy.

Okay, so to initialize this, I simply want to be able to make this part here dynamic. So I'll say message. And remember I've removed the speech marks because I've just got in the habit of JSON safing everything as I go now. So we'll say hello and I'll say initialize. Okay, what we're using Sonnet 3.5.

Testing the Claude API

We get back a response there. So actually an application like this, Haiku is probably going to be just fine. Haiku is going to be quicker, going to be cheaper, but the default here is Sonnet 3.5. Really good thing to experiment with. Also, just while I'm talking about AI's, we did a video a few days ago looking at Helicon AI.

Integrating AI Monitoring

If you want a really quick easy to integrate dashboard for logging, monitoring, keeping track of costs, keeping track of what users do with AI's in your app, then I've literally fallen in love with this software in the last few days and adopted it into several of our internal projects. So good, do go and check out our video on it. But now what we're doing, we are just going to click save because that trains Bubble the response that we get back. So let's plug this all now into the design of our app. So first of all, we're going to set up a workflow on this button and this is going to be if we go plugins, Carbon save text file.

Setting Up the Workflow

And in fact, yeah, we'll run this as a user. So this is the way I do it. You can just simply say current user unique ID. This is preferable really instead of an email address because someone can change their email address in the Bubble app and then it's going to unlink them, disconnect them from that data. So we'll use current user unique id and then the string is going to be a multi-line input, write new knowledge base value here and this needs to be JSON safe.

Configuring the Workflow Steps

And then we'll reset the inputs for good measure.

And yeah, that's what we need to do for there. And then sendmessage is where we first of all search Carbon. And so once more we put in the unique id of our user and we put in the search query. This is just the question that they've typed in. So we'll say ask a question here, value JSON safe.

Querying the AI

And then we query the AI. So we say Claude. You can see this is straight from our video where we demoed header code with Claude. But we're just using the Claude API connection I set up only a few moments ago. And so we're going to use arbitrary text for this because arbitrary text is a great way for grouping together and applying JSON safe to a whole block of text.

Formatting the Query

It also just means it's easier to format because you can have a multi-line input here. So we're going to say something like query. And I'm using XML because that's basically what Claude Anthropic recommend in their documentation. XML is going to look like that. And so we'll put in the initial query.

Combining Knowledge Base and Query

So that's our multi-line input, ask a question and then we'll put in knowledge.

And what we'll do is get the results of step one documents. And then we could simply just say each item's content. Remember, we get back so much more data about the documents. It's sorted by relevancy. You can use tags.

Processing Search Results

I was on a call with one of the team at Carbon last week and they were saying that tags are a great way for you to separate data within a user's own storage of data. But right now, yeah, we just want each item's content. And so from Bubble's perspective, that would listen through just like almost comma-separated sentences of data that I've saved into the knowledge base on Carbon.

Displaying the Response

And then we need a way of showing the response. So I'm going to add in a text field and I'm going to use a custom state. I'm not going to save anything to the database. So custom state is a way of temporarily storing data. It's like putting it in a bucket on the page.

Using Custom States

If the page refreshes, the data is lost. But we'll just put a response.

So now the text label here, we want this to show that custom state's data. And so the custom state was on the page, which I've called rag response. That's going to show it. So now we go back into our workflow and we have to take the output of step two because that's what the AI has given us back. So we say set state and we set the state on the page and it's the result of Claude's content.

Finalizing the Workflow

Now this, could you, you can ask Claude to generate more than one version. We're not. So we just say first item text. Cool, that's it. And then we could even reset the input.

Yeah. So let me just double check this. We're taking the multi-line input, we're making JSON safe. We're inserting both the multiline input there and the result of the knowledge base query, the search and then we're setting it as a custom state. Cool.

Testing the Complete App

I think that's it. So let's go ahead and preview it now. Because we're using current users unique id as a way to differentiate between users in Carbon, we need to run this as a user. So I'm going to go into data and here are some users I've set up in previous demos. You could always just create a new one, but I'm going to go ahead and click run as for this user.

Running as a User

And so now as this page reloads, I'm now running as that user. And that user's unique id is going to be passed into all the necessary things for Carbon. So I'm going to add some more knowledge. But it's not the same knowledge as before being added into the same place because that was ABC 123 and this is going to be the unique id. So I'm once more going to say Matt's favorite food is pizza.

Adding Knowledge to the Base

We're going to save that. I'm going to say Matt prefers cats to dogs.

Matt does have a dog who is an exception to the rule.

Okay. Right. Let's really a little bit nervous. Let's really test this out. So I'm going to say, tell me about Matt.

Testing the RAG System

So this is going, retrieving the data, sending it off to Claude. And here we go. We get back data about Matt. We get back, but we get back Matt's food preferences, Matt's preference for cats and dogs, except he actually owns a dog. Yeah.

Refining the AI Response

Okay. So really the way that the AI responds, you can tune that, you can adjust that with a system prompt. You can slightly, you can really prompt engineer it. So let's just try one more. We'll say, what is Matt's favorite food?

So of course, if I just send that straight off to Claude, it's not going to know who Matt is.

Based on the provided knowledge, Matt's favorite food is pizza. Let's do one more tweak, which is we're going to put in a system prompt, or rather Anthropic doesn't have a system prompt. It has a system value.

Adding a System Prompt

Where is it? I can have a guess. System prompt. Here we go.

Oh, no, that's the actual system prompt that they place in. What I mean is, if we go into our API call. No, here's what I mean.

Anthropic want you to do it like this. It's not a message, unlike OpenAI. OpenAI wants like message number one. That can be a system prompt, but in here we'll say you are a helpful assistant. Right.

Conversationally and in a friendly manner to the user. Okay. Put a comma at the end of that, and I think we'll see that that makes a slight difference to the tone. So we'll say, what is Matt's favorite food?

Final Testing and Refinement

Okay. It's not really made that much difference. And it goes on to include stuff about a dog in a query about food. Once more, you can really refine perfect the prompt. You know, you could put paragraphs about the, the tone and the approach that the AI should be taking as it takes the data from Carbon and writes in a conversational manner.

Conclusion

So there you go. That's how you can create a RAG app with no code using Bubble and Carbon and Claude. And it's taken us, say, 30 minutes or so.

‍