Perplexity AI no-code app with Bubble.io

Introduction to Perplexity AI

Perplexity AI is a fantastic AI tool for organizing, accessing and taking a deep dive into knowledge even into like scientific papers and a real depth of academic literature. Here's an example I just did in the previous video looking at a question about a concept in psychology and you can see that not only does it return the sort of text that you'd expect back from OpenAI but it actually includes sources or citations and then you can click through onto each of those. Now the perplexity API seems to be a little bit behind what you can get through the web interface here because it doesn't give you sources but there was, someone did ask that question 20 days ago on one of their forums or it might be in the subreddit and it sounds like sources are on the way.

Integrating Perplexity AI into Bubble

So in this Bubble's tutorial video I'm going to demonstrate to you how you can add in the amazing knowledge based AI tool or perplexity AI and how you can add that into your Bubble app. But before I do that if you're learning Bubble there is no better way to do that than heading to planetnocode.com where you can get access to our exclusive no code members community and you get access to hundreds of Bubble tutorial videos just like this one. You can't find them all on our YouTube channel if you want to keep learning you have to go to planetnocode.com but let's go ahead and dive in.

Setting Up the API Connector

So yeah here we go this is the API documentation and in this video I will be showing you each step of the way of adding this into your Bubble app to get that simple question and answer dialogue going in your Bubble app. So let's go into my app and I'm going to go to the API connector and if you've not got the API connector you can add it in plugins it's an official plugin by Bubble and as you can see here other apps assembly AI or anthropic or lemon squeezy browser bear ChatGPT open AI this is how you integrate in with all of these other amazing services in your Bubble app.

Configuring the API Call

So I'm going to start here with perplexity and I'm going to keep guessing that spelling that wrong that's embarrassing. I can't see what's wrong with that anymore I'm gonna move on so we'll say perplexity AI you're going to be screaming in the comments about the mistake I've made there spelling is not like forte. So we add in the all the fields that are required so what we can do is copy this CURR example here and we can go into our Bubble app and we can say import another call and we can paste it in and click import and then Bubble mostly does an amazing job at learning exactly where everything has to go in the API connector.

Setting Up the Workflow Action

I'm actually going to delete this one so that we're left with the one that Bubble has generated I'm going to say ask AI a question and I'm going to change it into action because I want this to be accessible as a workflow action and then I'm going to leave these as they are I think nowadays Bubble you don't need to declare content type application JSON I think it does it by default but it's not going to do any harm by leaving it in there and then we've got system and user so this is very similar to how you interact with the OpenAI chat text generation they do in fact they advise you that you should be this is not really going to work for a conversation it's more of you ask a question and you get a response back.

Configuring the API Key

I'm going to take this bit here because this is where my question is going to go and notice that I've deleted the speech marks because I need to make whatever the user enters into this JSON safe which means I need to control over the sort of punctuation that goes into it I need to mark this is not private because I need to be able to access it within a workflow and you know the user supplied the question how hot is the Sun that doesn't need to be kept private things I need to keep private are my API key which is marked as private because I'm saying authentication private key in header so I need to put my speech marks back in here and we can say how hot is is the Sun and now I need my API key just give me a moment to grab that.

Testing the API Call

I've added in my API key with bearer written in front of it and let's then initialize the call and see if this works for us brilliant here we go and we've got a response back this is all of the details tons of extra information that we don't need to worry about but mainly to just see that we have got here back a message from the assistant explaining how hot the Sun is so I'm gonna click save that's our API cool done we've got no errors if you've got any errors do have a look at the error message it could be to do with your API key or it could be to do with you not quite exactly following the way I've done punctuation here with regards to making it JSON safe.

Creating the User Interface

Let's add this into a page I'm going to create a new page and call this one ask an AI a question and alright I'm not going to pay much attention to design here so I'm just gonna have an input I'm going to use fixed layout even though that will cause loads of nightmares if I did that in in an actual production app and we will have a button and then we'll have some text because I just need to be able to show the reply.

Setting Up Custom States

I need a way of storing the data that comes back from perplexity AI and one way I can do that is with a custom state and custom states are a great way of temporarily storing data if you refresh the page the data is gone it's not saved to the database it's temporary storage and so I can add a custom state to my page and I'll say answer and then that's going to be of type text and then I want my text here to display the answer so where's my custom state works on my page answer that's it and I'll say ask that's the button let's set up our workflow.

Creating the Workflow

First thing we need to do is go into plugins and have a look for perplexity AI ask AI question now the labeling there is exactly what I've labeled it in the Bubble API connector so I'm going to click on that and then in question I need to add in my input value and then make it JSON safe so that takes care of any pesky punctuation or special characters in the input field but also it wraps the whole thing in speech marks that means that I shouldn't get an error we're trying to send that data within the bundle of JSON code that I'm sending over to the perplexity AI API.

Saving and Displaying the Response

So then I need to set my state because after step one Bubble will wait to get a response back from the perplexity AI and then I need to save it so where am I saving it I'm saving it to the custom state which is here and then the value is the result of step one and I need to just be able to dive into the different hierarchies the different levels of the API response and find what I need and I'm going to assume it's very similar to OpenAI which is choices first item message content. Brilliant let's try that.

Testing the Application

So we could say let's just go something basic again how hot is the Sun and I would just underline here that I'm asking you very basic questions you could probably get a very similar response with OpenAI but just remember that perplexity allows you to ask questions based on much recent data because some of their models are online models meaning that I think they have a much more up-to-date context information in the large language model their LLM and also I think that it gives you much more academic answers if that is indeed what you're looking for so let's run it and hopefully there we go we get a response back is approximately 15 million degrees Celsius isn't that hot.

Conclusion

So there you go that is perplexity AI and that's how you can add in perplexity into Bubble app let's remember this isn't great for conversations it probably is going to be better for academic context and I really hope that they bring the sources and some of that extra data that you get around and you get a lot of extra data around it when you ask some questions such as the sources and maybe follow-up questions because that would be amazing to add into Bubble app so any questions anything that you'd like to see perplexity AI or you would like to see us demonstrate with AI models please leave a question down below.