Build a No Code SearchGPT with Bubble.io

The Power of AI-Powered Search

This is why rank based AI search is going to take over keyword search. Stick around if you want to learn how to build a quick tweet find like this, which will outperform any keyword search, tweets, app finder that you could find or make. And let me explain why before we launch into the how. So if I have a search term like positive psychology, I have got back from the ExA AI search endpoint, I've got back five tweets. Now, none of these tweets have got the keyword term positive psychology, but all of them are about positive psychology.

Understanding AI-Powered Search Results

Because where the rag and the AI come in, they know that positive psychology is far more than a specific two word statement. So we've got a tweet here about positivity. We've got a second tweet here, which I happen to know is a tweet from psychology today. So it just mentions happiness and it is from psychology today. And so it therefore knows that it is a tweet about positive psychology, even though positive psychology is not actually mentioned in the text.

Building with Bubble.io

Now, before we launch into the how to, if you're building an app with Bubble, if you've got a business idea and you want to learn how to build it and accelerate and launch it, then click the link down in the description and join Planet No Code today. But here we go on with the video. Let's learn how we can use the Xenore search API to basically build our own AI powered search engine that outperforms keyword based search.

Using the ExA AI Playground

The ExA playground gives us everything that we need to easily copy and paste the JSON code here to make an API connection between our Bubble app, which we're building with no code through to ExA, and their amazing rag AI search engine tool. So I've got an example here.

Setting Up the API Connection

I'm saying positive psychology and I've got number of results. I'm then filtering it by date and that's it. And I get these results here. And these are the results that I'm going to be passing into my Bubble app. So let's connect it all together in Bubble.

Configuring the API Connector in Bubble

We need to go to plugins, which is here on the side, and go to the API connector. If you don't see it, you can add it through the plugin directory and then you can see all of the different services that I've done Bubble tutorial videos on before. And we'll go right down to the bottom and I'll add in ExA AI. And right now we just got to flick between the ExA playground and Bubble in order to work out what we need to pass between the two. So we are making a post request.

Setting Up the API Request

It says post here to the ExA AI API. So I'm going to add this in here and I'll say search for tweets, paste in the endpoint. Remember it's post, change it to action because I want to run this from within a workflow and Bubble. Let's go back to the documentation and then we see in the header we have to authenticate to the call. That way it knows who to bill.

Handling Authentication

Going to go back into Bubble and it's really important that your API key or your authentication key, you do not want to be sharing that with your users most of the time. You should consider anything that happens in the front end. Workflow should not is accessible to your users. But in Bubble we can say private key and header. And that way we are indicating to our Bubble app that this is data that should not be shared with our users.

Configuring API Parameters

Now as of a few months ago at least, content type application JSON was set as a default value. So I'm not going to add that. I'm not sure about accept, but if we get an error that's the first place I'm going to look. And so then we can paste in the API key into there and then we got to take the data section. So that's everything within the single quote mark, speech mark there, copy that, paste it in.

Making the Query Dynamic

So we want to make our query dynamic. And so Bubble gives us the instructions. We use triangle brackets so we'll say query and you could name this anything you like. Notice that I'm removing the speech marks. That's because I'm going to make it JSON safe.

Testing the API Call

I'll explain that when we get to it. I've also unticked private because this is not something we want to hide from our user. In fact it wouldn't work if we did because we want our user. This is our user's query that we're searching for. So in order to initialize the call, which is effectively the way of testing what I've entered here, I'm going to add back in the speech marks there.

Analyzing the API Response

I'm then going to leave the rest of this exactly as it is. But you could of course go through and make any part of this as dynamic as you like. And so now I'm going to click initialize call and see if I've made any mistakes. Normally you get an error quite quickly. If you do, this is going to take longer than a keyword search, of course, because it has got that AI component.

Understanding the API Response Structure

But look, this is lovely. This has worked. We get back a list of results, we get back a score that's going to be great for ordering them. And we get back a load of additional information, including the tweet. If you want to see what that looks like, it comes back just like this, which if we go back into the playground will look remarkably similar to this.

Saving the API Response Format

Whoops, I've just clicked on one of those. Let's go back. So I'm going to click save because that is teaching Bubble what format the response is coming in. And I want to pay particular attention to how Bubble has labeled this because I'm going to want to list through my results. And Bubble has called them search for tweets results and I think it's called them that because I've labeled this search for tweets and then it's adding on the results because that's the list name that ExA AI is providing back for that, that part of the JSON response.

Designing the User Interface

This is perfect. So let's go back onto design and all I've got here is some text, an input and a button. So I'm going to add in a repeating group because I want to be able to show my results.

Setting Up the Repeating Group

So let's have this as layout. Make it width 100%.

I'm going to say min height zero. So the content is not something that's already in my database. The content is the data type, a source of data type associated with the AI response that was detected when I initialized. So actually I will just do search for, search for tweets results. Okay.

Configuring the Repeating Group

And then I'm going to leave it blank because I'm going to try doing this without custom states. Basically I'm going to take the results and try and display them straight in my repeating group. And I'm not actually 100% sure if that will work. I'm going to untick number of rows Max there and then I'm just going to throw a text label in so we can see the results coming back. I'm going to just say text because then we're going to get a list of all of our tweets.

Adding Dynamic Links to Results

In fact, let's do something else a little bit more dynamic here. I'm going to put in a link and I'll say read more. It is external URL. And does the URL data come back? Yes, it does.

Setting Up the Workflow

There we go. Okay, this is looking really good. Let's connect up our workflow. So we want when the button is clicked to send our query over to the ExA AI search endpoint which we set up in the Bubble API connector and then we want to show the results on the page. So let's add in a workflow.

Configuring the Workflow

And so first thing we'll do is wrong key because I initialized it and I set it as an action. I'm going to see it in this list here. Now this is a really big list because I've got a load of plugins and other API connecting things set up, but I can either find it by typing in the search there or I can just do it's going to be on the ExA search for tweets.

Setting Up the API Call in the Workflow

So I'm going to go down to e ExA AI search for tweets. I'm then going to put my input in here, which I've called enter URL here. Oh, but it's not URL that's from a different demo. It's going to be enter query. Notice how by changing the placeholder it changes the internal labeling.

Handling JSON Safe Input

That's not going to break the connection between say a workflow and this input. It just means it's really handy when it comes to relabeling it. So I'll say enter queries value. And remember this is where I make it JSON safe. If you want to learn more about JSON safe, we've got our own videos on that, but effectively what it's doing is wrapping the whole thing in speech marks.

Displaying Results in the Repeating Group

We need that in order to not get an error with the JSON code that is being sent and being brought together in the API connector. But it also ensures that any pesky bits of punctuation that could be mistaken for code are made safe when they're sent across. Basically I've got in the habit of doing everything JSON safe and I'm sending it in JSON because it avoids a load of headaches later on. So now I want to display data and so I'm going to say display list in repeating group and my data source is what comes out of the API caller. Step one, results.

Testing the Application

Cool, that's gone blue. That means that there is a match between the data that it's expecting and the data that it wants to display. And I'm getting that. And this is very easy to get confused on because I'm saying here, search for tweets results, not search for tweet, search for tweets results. Okay, because I'm going straight to the point in the data that I get back.

Refining the Results Display

I'm going straight to the point where I get the results. Cool. Let's go ahead and preview and see how well this runs. So let's give it another test. I'm going to put in my query here and click run.

We're querying now the ExA search endpoint and we get back our data just like this. Now, it's not as clean as I'd like it to be, but thankfully they use these lines. If anyone knows what they're technically called. Please leave a comment below to split the content. So what I'm going to do is go back into display here and I'm going to use split by.

Improving Result Formatting

So I'm going to say split by, then place one of those lines and then say first item. Okay, remember, nothing is actually being saved to the database. Each time I'm running this, I'm having to run that small cost of actually querying the API. So we'll click run again.

Final Testing and Demonstration

There we go. That's looking much more tidy. Now there is of course the interesting thing with the character here. Not going to cover that in this video, but we get back our list of results and of course I could click through on here and I could go and view the original tweet for each one. It's going to work.

Yeah, there we go. We get back the original tweet from psychology today. So there you have it. That is how you can build an AI tool that finds tweets that I believe outperforms. Anything you could do with keyword search and therefore the Twitter x API.

Conclusion and Further Learning

And if you want to learn more about building applications with no code, building them with Bubble, then click the link down in the description and join Planet No Code today.