Build Your Own AI Summarizer

Creating an AI No-Code SaaS App with Blazing-Fast Summaries

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 gonna build this in just 10 minutes and it's gonna perform just like this. Look how quick that is it is a summary of this video here and half a second less than half a second we get back all of this amazing data.

Setting Up the Bubble Editor

So let's dive into the Bubble editor where I've got a very simple web page together. 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 a paid search in fact.

Accessing Bubble Tutorial Videos

Oh 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 access to our community and even more Bubble tutorial videos.

Building a No-Code SaaS App with AI and Bubble

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 end point with these details in it to validate the request.

Using the API Connector in Bubble

So we go into Bubble and go into plugins 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 zapia I've got calendars I've got SEO tools all of which you can pull data in and out of your Bubble app with.

Setting Up the Kagi API

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 cool.

Configuring the API Request

So we'll say get summary 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 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 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.

Setting Up Dynamic URL Parameters

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 here there's no point hiding it.

Understanding API Authorization

Now this is different to authorization because I've said this is a private key I don't want my users accessing my private key technically in most cases when you run a front-end workflow 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.

Testing the API Call

So let's go ahead and get a URL let's copy that wrong one paste it in okay and the last bit is to get my API key or my app token so it's a 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 of teaching Bubble exactly what to send and what to expect in response so let's give it a go.

Troubleshooting API Issues

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 miss that second I've 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 it is very good but it still costs a whole dollar so I'm actually going to swap in Cecil.

Finalizing the API Setup

So go back into my Bubble app and swap in Cecil as the engine and now I'm going to try again so very initialize cool engine parameters I mistyped oh I put space in that's fine okay let's try that initialize cool 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 mural so I'm gonna 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.

Creating a Workflow for the Summary Feature

So let's go back into our app and 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 and now I insert my input which is my URL okay and then that's gonna make the API cool but I'm not displaying it in any way so I'm gonna use custom states to display it.

Setting Up Custom States for Data Display

So I'm gonna add in some text yeah okay and custom states are a way of temporarily say like storing data on the page nothing is saved to the database if the page is refreshed the data is lost 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 on the page so that I don't forget where I placed it and now I've got that custom state I can say this text shows summaries that's my page summary okay because that's my custom state.

Implementing the Summary Display Logic

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 customer state and now I say the results and I take the output remember this is all the data that we saw come back in the Bubble API connector and all I want to do is show you the output.

Testing the Completed Feature

So let's now test that in our app and to do that let's just grab another video yeah drag one of these right let's take this one copy URL preview pasting that 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.