Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

In this bubble tutorial video

In this bubble tutorial video, I'm going to create a AI question and answer app using the perplexity AI API. We're going to do all of this with no code and I'm going to try and make it come in at less than five minutes, definitely less than ten minutes. But before I launch into that, if you're learning bubble and you want to learn more about perplexity AI or OpenAI and how you add that into your bubble app, then we've got plenty of other videos just like this one. They're on our channel, but we've got many that are exclusive to our members only. And you can find those@planetnocode.com so let's get started with this.

Setting up the page

So I've created a new page and I'm going to change this to align to parent. And I'm going to set a background color because I am actually going to try and make this look quite nice. I'm then going to go ahead and get a group and put it in the middle of my page. This is where everything's going to go into my question box and my answers. So in layout we'll say that this is a column and let's give it a background color of white and a border radius of say twelve and then border radius of twelve and then yeah, padding, say 24.

Creating the input field

And I'd like it to be a little wider. Okay, so what do we need for a question and answer AI widget? Well, we need a input field, so let's go multi-line in fact. So I'm going to add that in there. I'll say, enter your question here.

Using perplexity AI

Oh, and did I mention that we are going to be using one of the online models from perplexity AI? That basically means that unlike OpenAI where you're restricted to when the training data was, which I believe is now the end of December 2023, at the time of recording, perplexity can fetch recent data like news that has just happened. So let me demonstrate that. So we'll go through add, just going to really add in the essentials here and then we'll have a button ask AI, and then we need somewhere to display the answer. Now, I'm not going to save anything into the database.

Using custom state

I'm just going to use a custom state. And a custom state is a good way of temporarily storing data. So I'm going to go onto my page and add in a custom state and say this is answer text. And then the text that I print is going to be my page, which I've called perplexity AI answer. I'm going to print that down there, min height zero and let's add in some gap spacing, make it look nice.

API integration

There we go. Right now we dive into the perplexity AI documentation. So I've gone over here, here's the documentation and I'm just going to copy this. I'm going to go now into my bubble app and go to plugins. And then I need to be in the API connector because I'm making my own custom integration with the perplexity AI.

And so I'll go ahead and click add another API and then I'm going to click import. Cool. And I'm going to copy it in and click import and perplexity. Well, bubble actually goes through and inserts everything that I need. So this is not needed because it's blank and empty.

Configuring the API

So this is called my ask aia question. Then my API name is perplexity. I've learnt to spell that since the last video and I need some form of authorization. And I just know by going back into here that the authorization needs to go in the header label authorization with bearer before it. So we say bearer.

And then I go and fetch my API key. So my API key is now in there and this is going to be an action because I want to action it from within a workflow. And everything else is basically looking good except I want to use an online model. So I'm going to pick this one here, I'm going to copy that and change the model.

Adding the question

And then here's where I put my question. Now everything that goes into here needs to be made suitable for sending over in JSon. That's the code block that we've got here. And JSON is very sensitive to special characters and punctuation. So I'm going to just write in here and say this is where my question goes.

Initializing the question

And this basically creates like a merge field that I can insert data into in the workflow. So I have to initialize it first. So I need the speech marks and I'll ask it a question of how far is London from Paris initialize? And all being well, we won't get an error and we'll get a response back from perplexity. Here we go.

Updating the design and workflow

And so this is partly teaching bubble what to expect in the response, the format and the structure. But we can see here that we get a distance. Excellent. So let's now dive back into our design and we'll add in our workflow. So we'll say that when the button is clicked we do perplexity ask AI question.

Using the API in the workflow

Why is that there? Well, because in plugins, perplexity ask AI question, those are the fields that I've entered into the API connector. That's how I've labeled it. And then in here I'm going to say my multiline inputs ask a question. JSON safe.

JSON safe takes care of any pesky punctuation characters or special characters, and it wraps it all in the speech marks. So I shouldn't get a JSON error. I then need to display this somehow. And like I explained, I'm going to do this in a custom state. My custom state is on my page.

Displaying the answer

And then I say the results of step one, choices. Now it gives choices because it could be a list, but I've only asked for one answer. So I'm going to say the first answer, message content and save it into there. Right now I'm ready to test it. So let's ask a question and it's going to be something topical to the news.

Testing the app

So for example, we could ask about OpenAI Sora. We could say tell me about the tech behind OpenAI Sora. Okay, now, Sora was only released, not even released, announced last week, not very long ago. So let's have a go. We'll say ask AI.

This is sending our request to perplexity AI and we're asking about OpenAI's Sora. And there we go, we get a response back saying Sora uses Dawley and uses large language models. We've got it perfect. It's working. Now, if there's anything else you'd like to see me demonstrate with AI or with bubble or building kind of mini widgets as part of your bubble apps, then please do leave a comment down below and like and subscribe this video.

Latest videos

lockmenu