Build Your Own Voice-Activated AI with No Code in Bubble.io

Introduction to Voice-Activated AI in Bubble.io

In this no code tutorial, I'll be teaching you how you can make a voice powered AI just like this one in Bubble.io. I'm an assistant that you can talk to like a person. So how's your day going? Yeah, my day's going very well. Can you ask me a question about my schedule? Sure thing.

Building a Voice-Activated AI Assistant

What do you need help with in your schedule? Are you trying to plan something fun or are you just scheduling? Let's build that in Bubble. But before we get started, if you're watching this video, it's because you have an idea and you're trying to build it with no code in Bubble. Well, if that's you, and I think it is, click the link down in the description and head over to our website, planetnocode.com.

Setting Up a VaPI Account

Because we've got hundreds of resources for people just like you. First thing we're going to do is set up a VaPI account. You can do that for free and we get an assistant builder. So let's build an assistant here. Let's call it planethood no code demo.

And then I'm actually going to start with a blank template and say create assistant.

Understanding VaPI's AI Features

Because what VaPI does is combine several AI features. There's the AI model, so that's what's generating your text. Then there's what's transcribing what you or your users say. Then there's what's generating the voice to read back the reply from the AI. And you can do functions and there's analysis.

Exploring VaPI's Capabilities

There's so much you can do with VaPI. I've been following them now since the start of the year. Seriously exciting what happens when you bring together all of these latest AI technologies. So let's just write a really simple system prompt here saying, you are a helpful assistant, but you speak like a pirate. Okay, we can then literally pick from all of the most popular AI LLM models available, but we're just gonna use 3.5 turbo.

Understanding VaPI Costs

Now, what you have to be aware of is the cost here. You've got your standard VaPI cost, that's their platform fee. And then they say that they pass on the cost of the other providers that you use at cost value, but do just be aware of how that adds up. So we've got the cost of GPT four turbo and then we've got the text to speech. So let's go ahead here.

Configuring VaPI Settings

We'll use Deepgram voice. Yeah, we'll just use this one here. And you can do so, so much with VaPI. So let's go back to model and just say that the first message will be hello, how are you? And then we can hit publish and we can test that out right away in VaPI.

Testing the VaPI Assistant

So I'm going to click talk to assistant. Hello, how are you? Yes, I'm very good, thank you. Can you tell me a bit about your role? Er, me roll be helpin ye with any questions or tasks ye be having.

Just let me know how I can be assistin ye matey. Okay, so there we go. That's a dead simple example. But just imagine if you've spent the last few years prompt engineering like I have, what you could insert into the system prompt to go beyond a helpful assistant that speaks like a pirate. Basically the possibilities are endless.

Integrating VaPI with Bubble.io

So how do we add this into Bubble? Well, let's head over to our Bubble editor and I've just got a blank page here. And to do this I'm going to install a plugin. And this plugin has literally only been out a week. Here we go.

Installing the VaPI Plugin in Bubble

VaPI speech AI by Martech Studios and in fact I've already got it installed because I've been playing with it the last few days. So we then go back into our editor and we search for VaPI and we drag the element onto the page. And this is really common for working with plugins that add features into page. We're actually asking it to do quite a complex thing. We aren't just exchanging text between two servers, we're exchanging audio between Bubble server and the VaPI server.

Configuring the VaPI Element in Bubble

And so by adding the VaPI element to the page we're loading in all of the scripts that the plugin developer has written. In order for that to work I'm just going to increase this to say 400 and I'm going to say visualization. Let's just go VaPI default. And then I go back into my VaPI account and I copied the assistant id.

Adding API Keys to the VaPI Plugin

Okay. And paste that in. So there's one final step which would be you need to add your API keys into the VaPI plugin area. That's all fairly so I'm not going to show you that because API keys should be guarded like passwords, but you need that to authenticate the service. So you need to go into plugins and then across to the VaPI plugin and you'll need to insert the API keys that you find in your VaPI account.

Setting Up Buttons for VaPI Interaction

But I think we're about ready to test it. So I'm going to click preview. Actually we're not ready to test it because we've not got any buttons. So let's drag a button on, and I'll simply say start call, and we add in a workflow. And now, because we've got that element on the page, if I search for VaPI, we can use workflow actions that are presented by that element.

So we'll say initialize call, and I'm just going to copy and paste the plugin the button, and I'll say end call, and then we'll say VaPI and. Cool.

Final Testing of the VaPI Integration

So remember, it is the configuration that I have in my VaPI dashboard that is dictating what this call is going to be like. So let's click start. Cool. Ahoy. What be ye needin help with today, matey?

I'd like you to compose a short haiku. Aye, I'll give it a try. Golden sun sets low ocean waves crash on the shore. Peaceful night arrives. There we go.

Ends. Cool. Okay, so that is how you can create a voice assistant voice activated AI in your Bubble app using the amazingly powerful VaPI AI and the immensely helpful plugin.