Build Your Own Voice-Activated AI with No Code in Bubble.io
Learn how Vapi.ai's Voice AI is empowering creators, streamlining workflows, and opening up new possibilities for storytellers and marketers alike.
Unlock the power of voice AI: Build your own Bubble assistant in minutes!
Create a ChatGPT-like experience with pirate flair - no coding required!
Harness OpenAI's capabilities to build a voice-powered AI that speaks like a scurvy dog!
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.