How to Create an AI Search Engine without Coding Using Bubble.io (2024)

AI Search Engine with No Code

AI search is beginning to surpass the power of traditional search engines, even the likes of Google. But what if you could build an AI search engine with no code and you could do it in, say, ten minutes? Well, that's what I'm going to demonstrate to you in this video. But before I get started, if you're learning Bubble and you want to get access to even more of our content than we have on YouTube, you can click the link down in the description where you can access hundreds of Bubble tutorial videos.

Introducing Exa AI Search API

To power an AI search engine no code application we need to have an AI search API. And for that I'm going to be using exa, which their approach to indexing the web is the same way that you would fine tune an AI model. and they boast all of these impressive abilities. And let me give you a really quick demonstration.

Demonstrating Exa AI Search

So I'm in the dashboard and I'm going to say what is the best no code web app builder and then I'm going to click run and this is going to give us a preview of what we can generate in the, in our Bubble app. And so we are getting results here back from Doric, drab code adolae. Yeah, here we go. We're getting some no code web app builders back.

Setting Up the Bubble App

So how do we put this into our Bubble app? Well let's go straight into Bubble. I've got a blank page here and let's just add in the essential bits. We need an input and I'm not going to focus on designing this. Well I'm not going to use the right layouts or anything like that. I'm just dropping components onto the page to make this nice and quick. And we shall label this search. And why not, let's make use of the new label and icons, because we should be able to find a search icon there. Look at that, looking good.

Connecting to the Exa API

Next we need to connect to the exa API in order to send queries and get responses back. So if I go into the playground, we can see that actually prepares everything we need to know and it is right here. Ready? Different AI tools. Different APIs have different playgrounds. This is nice because it just tells you everything you need upfront. So we need to translate all of this into our Bubble app. So let's go back into the editor and I'll go into plugins and then we need to go to the API connector.

Setting Up the API Connector

If you don't see the API connector, you add it through add plugins. It's free, it's made by Bubble and as you can see it allows you to connect to almost any service under the sun that has an API. We've got email, transactional, emails, we've got other AI tools, we've got weather, we've got other search tools, all of which I've demonstrated in previous videos. So let's add in a new API and I'll call this exa AI. Right now most APIs require some form, of authentication because effectively they need to know who to bill for, what's being used.

Configuring API Authentication

So we see that we have to authenticate with API key in header. So I'm going to copy that and then say private key in header. Now most use the key name authorization. They don't want that, they want x API key. Then let's go back into here and here's an API key. I will be deleting this before publishing this video. Pasting that into there. Then are there other shared headers we need? Well it says accept application JSON and content type application JSON. Now I know that in a recent change Bubble has made content type application JSON a default. I'm not sure about accept, so I'm going to try it. If it fails, this is where I'll come back to.

Setting Up the API Request

We now need to make a post request to this endpoint. So I'll copy the endpoint and we'll say AI search post, paste it in. I want to set this as an action because I want a button click to trigger this action in a workflow. So I say action. And then we just need to put in all of the body content that's required. So I'm going to copy all of the data section here, paste it in.

Testing the API Call

Okay. And now we should have enough to actually test it. So we're going to initialize the call and this is testing, but also it's a way of instructing Bubble what sort of format to expect in the response. So let's initialize and see what happens. That's good. You see it's very quick, very quick indeed. And we get back a list of JSON here. Okay. It's all of the content and actually we get back quite a bit of text about each item. That's perfect. Now I'm going to make special note of the results list is AI search results because I want to be able to display this on a page as soon as it comes in.

Customizing the API Request

So I'm going to click save. But we want to make some of this dynamic. We want to particularly make the query dynamic. So I'm going to delete everything there, including the speech marks. I'll explain why shortly. But this will be our search term. Doesn't matter what you label it, entirely up to you. Now if I tried to reinitialize the call now it would fail because this is empty and it's going to be a required field. So I'm just going to put my speech marks back in and say latest news in the UK, because one of the advantages of using a search AI API is that you should expect really recent news.

Testing with Real-Time News

I'm actually going to test this because the most recent large news in the UK is I think the, english team winning, the semi finals of the euros. So let's reinitialize and see what we get back. Where we get back, heatwave. This is interesting. We get back heatwave and it's published in 2022. We also get more data from 2022. Okay. It's all from 2022. Now they. I'm just, I'm going off script here, which is to say that we can select, the crawl range. So let's say the last seven days. I'm going to copy this in.

Refining Search Results

Okay, now let's try that. Okay, so now we do have something which yet, this was sad story, but this was published yesterday. Okay. Yeah, there we go. All very. Yeah, there we go. So we solved it. I solved it as we went through. We can just filter what results you get back based on the crawl date. I'm not actually going to use that. Just went a little bit off script there.

Displaying Results on the Page

So let's add this into our page. So we need to have a repeating group because we want to show a list of items returned. And the type of content is going to be, AI search results. And I'm going to leave that empty because I'm going to fill it when I get the results. I'm now going to add in some text labels so that we can see that the results have indeed worked. And I get back, I get access to all of these fields. How do I have these fields here? Well, if I go back into, the API connector, I can either re initialize the call. That's handy if you just want to, if it doesn't take too long. And also you don't mind about how much you're spending on the AI, on the API. But I can just view manual response here and I can see that in results we get score title, id, URL, etcetera.

Setting Up the Workflow

So I can just say title. Okay, right now let's connect up with a workflow. And yeah, this is going to come in another ten minutes. So we go into plugins. And this is a mess because this is a demo app that I've used so many times. In fact, I'm just going to search for it. I get exa aihdeende aisearch. It's labeled that because this is how I've labeled it in the API connector. You might see something different depending on how you've labeled it. I want to now connect this to my input.

Using JSON Safe for Input

Okay, now remember I said I removed the speech marks. That's because I want to make everything in the input JSON safe. We've got videos covering exactly what this does. But in a nutshell, JSON, is very sensitive to particular punctuation like speech marks, and like colons, because it's got to know is it part of the code or is it part of the text submitted in the code? So we use JSON safe to make any content in that input safe to send over JSON. But it also wraps everything in speech marks. So I'm not now double speech marking it because JSON safe puts those speech marks back in.

Displaying Results in a Repeating Group

I'm then going to say display, list in a repeating group. It selected the only repeating group on the page by default. And the list I want to show is the results of the AI API call. Now this only works. It's only gone blue. Saying that it's accepted it because there is an exact match. A mistake that I could easily, have made is to say, oh, I want to choose this one. No, yeah, I want to choose this one. No, I want to choose the results because it's the results that is the right level within the JSON that goes straight to the list of results as they come back.

Testing the Final Product

So let's test it. I've clicked preview. Here's my page in my dev version, and so I'll ask again, what is the, what are, the best no code, web app, builders? And I'm going to click search. So my API request is going ahead and I get back my search results and they're displayed in my repeating group.

Conclusion

So there you go, coming in at less than ten minutes. That is how you can build an AI search engine with no code, using Bubble.io, using the exa, AI API. That's how you can build it.