In just 10 minutes, you can build your own AI summarizer app using Bubble.io with this step-by-step guide. This no-code SaaS app will provide fast summaries of web pages, PDFs, and YouTube videos, making it a powerful tool for content curation.

Introduction to Creating an AI No Code SaaS App


I'll teach you step by step how to create an AI no code SaaS app that gives blazing fast summaries of web pages, PDFs, and even YouTube videos. And we're going to build this in just ten minutes and it's going to perform just like this. Look how quick that is. It is a summary of this video here and in half a second, less than half a second, we get back all of this amazing data. So let's dive into the Bubble editor where I've got a very simple web page together.

Setting Up the Basic Web Page Elements in Bubble


I've got just a text label, an input field, and a button. Nothing else is going on. And so we need to look at the Kagi Universal API. That's the service we'll be using. If you're not aware of Kagi, it's a privacy first search engine, paid search, in fact.

Accessing Valuable Bubble Tutorial Resources


But before I go into that, if you are learning Bubble, then click the link down in the description right now because that will give you access to hundreds of Bubble tutorial videos. And if you become a paid member, you get access to our community and even more Bubble tutorial videos. But before I go on, if you're building a no code SaaS app and you're using AI and you're using Bubble, then it's well worth your time to click the link down in the description because we've got hundreds of Bubble tutorial videos and a no code community exclusive to our members.

Exploring the Universal Summarizer Documentation


So let's dive into this app. If we go into the Universal Summarizer documentation.

Here we go. We can see we need to make a GET request to this endpoint with these details in it to validate the request. So we go into Bubble and go into
and then the API connector. And the API connector is immensely powerful because it will allow you to connect with all sorts of services. I've got emails here, I've got other AIs, I've got Make, I've got Zapier, I've got calendars, I've got SEO tools, all of which you can pull data in and out of your Bubble app with.

Adding Kagi to the API Connector


So let's add in KAgi for now and authorization private key in header. And I know that because in the header I have to put my token or my API key. So I also know that I have to prefix that with Bot. Right, let's make the rest of the API call. So we'll say get summary.

Configuring the GET Request URL


Now I know that it's a GET request, but I need to know where to make that GET request. So it is this URL here now copy that. Paste it in. Now let's look at the different parts of this URL. We've got a parameter here called engine.

And we've got a parameter here called URL. I need to make the URL bit dynamic or a merge field. So I can do that by using square brackets. And Bubble tells us how. Just, just here.

Creating Dynamic URL Fields in Bubble


So I can say, insert URL here, close. And then if I click out, Bubble creates that as a field. And I need it to not be private, not because I want necessarily all the data to be completely publicly accessible, but I'm not hiding this data from my user. In fact, because my user is supplying this data, I want to, there's no point hiding it now. This is different to authorization because I've said this is a private key.

Preventing User Access to the Private Key


I don't want my users accessing my private key. Technically, in most cases, when you run a front end
, everything is accessible to the user unless you exclude it, which I'm doing here, by putting the private key or the secret key in the, declaring it at the top here. So let's go ahead and get a URL. Let's copy that. Wrong one.

Initializing the API Call in Bubble


Paste it in. Okay. And the last bit is to get my API key or my app token. So generate token, copy token, and insert it in here. Right.

Now let's scroll down. And we have to initialize our call. And this is our way of testing it and also teaching Bubble exactly what to send and what to expect in response. So let's give it a go. Right.

Key Learnings and Adjustments


You may have noticed a cut in the video there. That's because I've just learned a few things. First of all, Bot needs to have a capital B. I'd missed that. Second, I got an error saying that my account needed topping up.

That's true. I hadn't topped up. Now I have. Third is that there are a number of different engines. Here we go.

That you can use. At the moment, it's Muriel, and Muriel costs $1 every time you use it now is very good, but it still costs a whole dollar. So I'm actually going to swap in Cecil. So go back into my Bubble app and swap in Cecil as the engine. And now I'm going to try again.

Retrying API Initialization


So re-initialize call engine parameters. I mistyped it. Oh, I put a space in. That's fine. Okay, let's try that.

Initialize. Cool.

Testing the API Call and Response


Okay. And I get this response back about the video, and I can see that that's cost me far less than if I was using Muriel. So I'm going to click save and let's now add this into our Bubble app. I need to also change this to Action. That's because I want it to be an action in a workflow.

So when the button is clicked, this happens. So let's go back into our app, add in the workflow. So we'll go add workflow and then plugins. And then I find my Kagi. Basically by using the API connector I've effectively created my own plugin.

Creating Input and Display Logic


And now I insert my input, which is my URL. Okay. And then that's going to make the API call, but I'm not displaying it in any way. So I'm going to use custom states to display it. So I'm going to add in some text.

Yeah. Okay. And custom states are a way of temporarily storing data on the page. Nothing is saved to the
. If the page is refreshed, the data is lost.

Creating Custom States in Bubble


But I'll just say summary. And I'm creating a custom state on the page itself. You can create a custom state on any part of the page, on any element. I just like to do it on the page so that I don't forget where I paste it. And now I've got that custom state.

I can say that this text shows summaries. That's my page summary, okay, because that's my custom state. So now on the workflow I can say set state. So I'm saving but not saving, just somewhere to display it onto summaries, into the summary custom state. And now I say the results and I take the output.

Setting the Workflow State to Display Summaries


Remember, this is all the data that we saw come back in the Bubble API connector. And all I want to do is show the output. So let's now test that in our app. And to do that, let's just grab another video, right? Let's take this one copy URL, preview, paste in that YouTube URL.

Testing the Final App with a YouTube URL


Remember, this will work for web pages, PDFs, PowerPoint, but it just needs to be publicly accessible on the web. And I'll say get summary. So now Bubble is making that API request to Kagi and we're waiting on a response to come back. There we go. And so I did pick up from the title that the video is about Android.

And so we get this wonderful summary back.