Build a no-code AI Question & Answer bot

Introduction to Bubble.io and AI Integration

In this Bubble tutorial video, I'm going to create an AI question and answer app using the perplexity AI API. We're going to do all of this with no code. 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 complexity 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 at PlanetNoCode.com.

Setting Up the Page Layout

So let's get started with this. I've created a new page. 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 the border radius of say 12 and then padding of say 24 and I'd like it to be a little wider.

Creating the Question and Answer Widget

Okay, so what do we need for a question and answer AI widget? Well, we need an 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". 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.

Adding Essential Elements

Let me demonstrate that. So we'll go through and just 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. I'm just going to use a custom state and the custom state is a good way of temporarily storing data.

Setting Up Custom States

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 put that down there, min height zero. And let's add in some gap spacing to make it look nice. There we go.

Integrating Perplexity AI API

Right, now we dive into the perplexity AI Documentation. So I've gone over here. Here's the documentation and I'm just gonna copy this. I'm gonna go now into my Bubble app and go to plugins and then I need to be in the API Connector because I'm making up 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 gonna copy it in and click import and perplexity.

Configuring the API Connection

Well, Bubble actually goes through and inserts everything that I need. So this is not needed because it's blank and empty. So this is called "my ask AI a question". Then my API name is Perplexity. I've learned 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'm going to fetch my API key. So my API key is now in there.

Setting Up the API Action

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. And then here's where I put my question. Now everything that goes into it 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.

Testing the API Connection

So I'm gonna just write in here and say this is where my question goes 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. And so this is partly teaching Bubble what to expect in the response, the format and structure. But we can see here that we get a distance. Excellent.

Creating the Workflow

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. 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 gonna say my multi-line input's 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 box. So I shouldn't get a JSON error.

Displaying the API Response

And then need to display this somehow and like I explained I'm gonna do this in a custom state. My custom state is on my page and then I say the results of step one. Choices now it gives choices because then it could be a list, but I've only asked for one answer. So I'm gonna say the first answer message content and save it into there.

Testing the AI Question and Answer App

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. 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, what, the 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 DALL-E and uses large language models. We've got it. Perfect. It's working now.

Conclusion and Call to Action

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.