Build No Code Voice-Activated AI in Bubble.io - Integrate VAPI.ai and Save Chat Transcripts

Integrating VAPI.ai with Bubble.io

Now we've got our AI voice powered pirate assistant working just like this. R Matey, ye be talkin like a proper pirate now. Keep up the good work and soon you'll be speaking like a salty sea dog on the open ocean. R how do we save what is said into our Bubble app? Well, let me show you in this quick Bubble tutorial video, but before I launch into it, if you're building an app with Bubble, it's because you've got a business idea and you're wanting to bring it to life with no code.

Accelerating Your No-Code Development Process

And if you want to accelerate that process, then click the link down in the description and head over to our website where we've got hundreds of resources for people just like you. But let's dive in here. We're using a plugin that allows us to connect to the Vapi API, and that's all been demoed in an earlier video, but we can take a certain amount of data out of that plugin. Now, this plugin was only released a week or so ago and it is already immensely powerful. But go and show the plugin developer some support on the forums, and also you can go ahead and request additional features.

Adding Transcript Functionality to Your Bubble App

So let's dive into it. We simply need to add in like a text label here, and then I just refer to the vapi element on the page and I can say transcript of the current call, or I can get either side of the conversation what the assistant said or what the user said. Let's just get everything. I'm going to give this a little bit of margin on the top and then go back into our demo so we can preview it. Can you help me speak like a pirate by teaching me some key pirate phrases?

Demonstrating the Pirate Voice Assistant

Aye, me hearty. I'd be happy to help you speak like a pirate. Let's start with some key phrases that instead of saying yes, ye can say I like a true buccaneer instead of you or your, ye can say ye and yer, and instead of hello, you can say ahoye. Give it a try, maybe. Perfect.

Saving Conversation Data in Bubble

So now let's end that call. You can see the data is coming in, so how do we save that? Well, we simply need to add a workflow action to our end call button. So I'm going to say create a new thing. Now, this is an app that I've done probably hundreds of demos with, so there's all of these existing data types in there.

Creating a Transcript Data Type

So I'm going to use a transcript data type. I've probably used that with an AssemblyAI demo in the past, but we'll use it for here because we'll simply say content text.

Saving the Transcript Before Ending the Call

And then I'm just taking the Vapis transcript from current call and I'm probably going to save that before I end the call. I'm going to just see how well that works. So let's go back, refresh it.

Testing the Pirate Voice Assistant

Can you teach me to speak more like a pirate? R matey? Ye be speaking like a landlubber here. Be how ye can talk like a true pirate. Instead of saying you, ye say ye.

Verifying Saved Transcript Data

Instead of saying I am. So I've clicked end call and let's go ahead and look in the database. So in my transcript database.

There you go. So that's from today. And you can see that I have the transcript from my conversation with the AI saved in my Bubble database.