Build a Q&A bot in 10 mins with Tavily.ai using Bubble

The Impact of AI on EdTech

AI has had a powerful impact on edtech. Just look at this example here. I can ask the question of Tavily AI, and I can say, who are the founders of Bubble.io? And it gives me more than if I had asked OpenAI or a ChatGPT the same question, because I get back an answer and the answer is very concise and the answer is also written, it's not just kind of factual names, it is a sentence, but I also get back sources. I've got Wikipedia, I've even got a manual, I've got a LinkedIn page.

Building a Q&A App with Bubble.io

So how can I take this and put it into an app that I'm building with no code or technically low code because we're dealing with JSON here. But yeah, I'm going to show you in like less than 10 minutes how you can build an app that does just this using the Tavily AI API. And to do that, we're going to sign up and create a Bubble app. And if you want to build a web app without any code and doing it with a visual builder, then click the link down below because we've got hundreds of Bubble tutorial videos and this video is just going to give you a glimpse of what is possible with Bubble.

Setting Up the Bubble App

So I'm in my Bubble app and I'm going to create a new page and I'll call it a Q and A March. March. So what do I need in order to present my user with a form to ask a question? Well, I could just take a multi-line input and I can take a button. So I can say type your question here. And I'll say ask AI. All right, and then I need somewhere to display the result.

Using Custom States for Temporary Data Storage

Now in this video, I'm just going to do this in a temporary way. Bubble has an amazing built-in database set of features. And if you go and check out some of our ChatGPT clone videos, you'll see exactly how they work 'cause we save each messages and comes back. But right now, we're just interested in displaying what comes back. And so in order to display data without saving it to the database, I need to use a custom state. So I'm on the page and I'm going to create a custom state. It's just basically a bucket to store information in my app and it's temporary. If a, with a custom state, if a user refreshes the page, the data is lost.

Setting Up the API Connector

Now let's dive into the API, which looks like this. And most API documentation is very similar and we want to look for the REST API because that's the easiest way that we can link our Bubble application in with a third party app like Tavily AI. So we've got a base URL here. I'm going to start by copying that and then going into plugins and going to the API connector. If you don't see the API connector, you can create, or you can add the API connector using the add plugins button at the top.

Configuring the API Call

But right now, I'm just going to go here and then say, so this is Tavily and my API call, I'll say, ask a question. It's post and that's the destination. Well, no, it's not quite the destination. It's post and I need to add search to the end of it. Now I changed this to action because I want to be able to run this step in a workflow. And then I've got a series of parameters and actually it gives me an example here, which is really helpful.

Adding Dynamic Parameters

So I'm just going to copy this. Paste it in. Now I'm going to make these dynamic. So I can insert data into them. So we'll say query. And I know the format Bubble wants me to use because it says up here in the JSON object, use triangle brackets for dynamic values. We need an API key. And I'm going to say include answer. Let's just go back to the documentation, see exactly what this means. Yeah, we want to include the answer. Yeah, let's go back. I think we can work this out. So include answer is going to be true. Include images, no. Include raw content, no.

Finalizing the API Configuration

Then get rid of those as well. And because it's JSON, you only have a comma between different parts of the JSON. So make sure you don't leave a comma in there. Now the query isn't going to be private because it's not private. I'm not protecting that from the user, they've written it. So I can say who are the founders of Bubble. And then I need the API key. And so I'm going to go into my tab of the account and add the API key into this field here.

Testing the API Call

Right, I've added my API key into this field and I do want this to be private because the API key in so many cases, it acts like a password, especially if I'm paying for the service. I don't want other people to be running up my bill. So that's why I'm hiding it from the screen recording and that's why I'm leaving that as private. Right, I think now we're at an exciting point where we can test it. So we're going to initialize the call. This is looking good, there's no error, there's a short wait. Tavily does say that they're really quick and we can see here that we get back our answer. That looks correct to me and we get back our results.

Setting Up the Workflow

Amazing, so I'm going to click save and go into design and let's link this all up using a workflow. First of all, I'm going to say this shouldn't be empty and then let's add in a workflow on our button. So when the button is clicked, we need to run the API call. Now these are all of the other services that I've done demo videos on and so I'm looking for Tavily. If you don't see Tavily there, it's because you haven't initialized the call in the previous step.

Handling Special Characters in User Input

Now let's put in the query. So I'm going to say multi-line input, ask your questions, value. Now I'm actually going to cover something which doesn't feel like it's essential but could easily cause issues, which is well, if we look at the JSON code here, we can see that JSON is separated using curly brackets, speech marks, colons. So what would happen if a user put curly brackets, any special characters like that into the question? Well, it's likely to, it's likely to cause an error but we can get around that by using a text modifier in Bubble called JSON safe.

Displaying the Results

So I'm actually going to get rid of the speech marks here and go back and then if I wanted to re-initialize and make sure it still works, I need to add in the speech marks because here I'm adding in formatted as JSON safe. So that's going to make sure that any special characters are, the term is escaped, it means that they are declared as text rather than code. And it's going to wrap it all in its own speech marks. So that's why I've removed speech marks from the API call because otherwise I'm going to end up double speech marking. Now we need to display the text. So I'm going to say set state and go to the place where I've created my custom state. And then I can say, well, where's the data come from? It comes from the results of step one, answer. But also notice that I get access to everything else in here such as the results. And so then I can say first items results, title, that would print like the Bubble about page. But we just want a single thing, which is the answer.

Testing the Finished App

Let's preview that. So let's say who is the founder of Bubble.io. Ask question. Okay, that's interesting. 'Cause then if we say who are the founders and run it again, okay. Yeah, we get a manual and job. Now that's just interesting. That's going to be something that comes through in playing around with the AI model and seeing how well it works. But there you go. That's how you can add in a question and answer.