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

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

In less than 10 minutes, learn how to easily build an app using no-code platform like Bubble.io to integrate Tavily AI API and provide users with a question and answer feature. Discover the power of no-code development for creating interactive applications.

AI and Ed Tech

AI has had a powerful impact on ed tech. 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 chat GBT 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.

Building an App with No Code

But I also get back sources. I've got Wikipedia, I've even got Emmanuel's LinkedIn page. 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 less than ten minutes how you can build an app that does just this using the tablet AI API.

Creating a Bubble App

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. So I'm in my bubble app and I'm going to create a new page and I'll call it Q and a march.

Form for Asking a Question

So what do I need in order to present my user with a form to ask a question? Well, I could just take a multiline 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. 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.

Using Custom State

And if you go and check out some of our Chat GPT clone videos, you'll see exactly how they work because we save each message as it 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.

API Integration

And it's temporary with a custom state. If a user refreshes the page, the data is lost. So I can call this answer and then it is of type text. And then here I have to look to that bucket. So I go to my page answer, right?

Tavily AI API

So anything that I save in the custom state on my page is going to be displayed in this text. 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 Tavoli 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.

Setting Up API Call

But right now I'm just going to go here and then say, so this is Tavoli 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.

Parameters and Formatting

Now I change 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. So I'm just going to copy this and 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.

Sending API Key

We need an API key and I'm going to say include answer. Let's just go back to the documentation and see exactly what this means.

Testing the API Call

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

Displaying the Result

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 tablet account and add the API key into this field here. Right?

Securing the API Key

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.

Workflow and Button Integration

So we're going to initialize the call. This is looking good. There's no error, there's a short wait. Tably does say that they're really quick and we can see here that we get back our answer. That looks correct to me.

Finalizing the Design

And we get back our results. 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.

Running the App

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 Tavoli. If you don't see Tavoli there, it's because you haven't initialized the call in the previous step. Now let's put in the query. So I'm going to say multiline input, ask your questions value.

Handling Special Characters

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 like to cause an error, but we can get around that by using a text modifier in bubble called JSON safe. So I'm actually going to get rid of the speech marks here and go back. And then if I wanted to reinitialize and make sure it still works, I need to add in the speech marks because here I'm adding in formatted as JSON safe.

Displaying the Answer

So that's going to make sure that any special characters, 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 mark. 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?

Testing the App

It comes from the result of step one answer. But also notice that I get access to everything else in here, such as the results. And so then I could say, first items, results, title, that would print like the bubble about page. But we just want a single thing which is the answer. Let's preview that.

Conclusion

So let's say who is the founder of Bubble.io ask question. Okay, that's interesting, because then if we say, who are the founders? And run it. Okay, yeah, we get Emmanuel and Josh. 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.

Latest videos

lockcrossmenu