We Taught Bubble to Listen: Build Voice-Enabled Apps (No Joke)

I think I want to start today's episode talking about how I spent, I think it was 50 bucks for a lifetime deal of something, a nifty little app called Voice Notes. And so the premise behind the app was that you can essentially just record into your phone or record into your computer and Voice Notes takes your voice recording. And it uses AI. I would imagine that they use ChatGPT to then reformat your voice note into either a blog post or it can do like a professional email, it can do a Twitter thread, it can do all sorts of different things. And we have sort of replicated that same behavior for bubble applications, which I think is pretty cool. That means that, well, I don't have to cancel my Voice Notes subscription because it was a lifetime deal, but how cool is that?

You know, I think it is really cool that you can now make your bubble applications pop by letting them actually listen to your users as they speak.

I think that one of the main reasons, I mean, Voice Notes obviously today doesn't allow anyone else to opt in into a lifetime deal because it's become quite a popular app, which I totally get. I mean, it's a really cool app. It saves people a lot of time by not having to actually do the typing. I can just speak into your microphone and it does this whole magic thing by making your voice recording be useful. There's real value in not having to type things out.

Oh, definitely. Yeah, there's value because a lot of times people struggle to sit down and type words in that, you know, they have to stop and think about their ideas and you know what they're trying to get across.

Translating their ideas into text is to difficult sometimes.

Sometimes. And it's really easy just to hit a button and just start rambling and let the AI figure it out afterwards.

Now, on our YouTube channel, at some point we're going to post a tutorial. Dennis here is getting pretty good at recording a tutorial. So we'll probably share at some point how we're doing this so that, you know, if you're a technical bubbler and you want to just do this yourself, go ahead. We'll share the knowledge. But I think it's worth just explaining to people how we've done this.

Well, before we do that, let's stop a minute and show them what it looks like.

Sure.

So roll the video. Let's check out our new voice input reusable element. We can come here and start recording.

Hey, I think that voice input reusable elements are awesome.

If you're tuning in on Spotify or Apple Podcast, then you're probably not going to be able to see this. But if you're on YouTube then you're probably looking at the video right now.

And, and seeing the.

It's quite a. It's pretty close.

They can't hear me say things that the AI is going to actually transcribe. Okay.

We're still trying to get a little bit used to the B roll and the A roll thing, but so somewhere in there people have seen what that looks like.

Yeah. So now that you've seen it, you kicked your ass, impressed with how cool it looks. Yeah. Let's talk a little bit about how we put it together. And the way we did this was to build a reusable element in bubble so that you can put it in any page that you want.

And make it know, substitute just a normal multi line or single line text element.

So the way we've done this is for a particular customer of ours. She had a lead generation tool that obviously prompted people to type in a lot of different input fields. Like, you know, what is your business about? What's the name of your business? Is there a particular niche that you're going at? So for that. So on a bunch of different fields and our customer said.

Yeah.

She was like, it's really cool, but I don't know that people are putting in the right information. They're really, you know, typing it enough to make it worth it worth it. And so yeah, that made the old wizard start to think.

Start to think. And we go back to the idea of, okay, the lead generation tool that we're building for people is only going to be as valuable as the output. Right. I mean, if the, if whatever we're spitting out is good, then it's worth, it's worth people's time. But if people are not putting in enough time into making the lead generation process worth it, then yeah, if you.

Don'T know what to put into the field, then let's just put it into easy words.

Garbage in, garbage out.

That's right.

And by making it super easy for people to not have to spend all of that much time into filling out all of those input fields.

We reduce the amount of garbage that goes in. And all of a sudden by people being able to speak into the lead generation form, we start to reduce the amount of garbage that we're collecting.

And you're reducing friction and you're reducing.

A lot of friction.

We also built this in a way that if you notice that each field has its own help text. So they can click help button and it will show them an example of what a good answer looks like. So they can just look at that and then just adapt it to their own situation. And we've kind of guided them through the process without having to face that writer's block.

And what's really cool too is that let's just say that, hey, you spend a minute talking into the microphone to fill out an input field about, you know, what your business is about. If by the end of that recording there's something that you want to add, or you forgot to mention this one thing, you can still go in and type in whatever you want to add, which is pretty nifty.

Yeah, yeah, it's really versatile and I think it is one way to make your bubble applications stand out. I mean, when we built this for this customer and I started showing it to other customers, it was like, oh, I want that. Where can we put that? Yeah, let's put that in our app too. Because it really is, you know, it's a simple little thing that makes a big difference. And I think that's something that's important for people to start thinking about that. You know, when we talk about using AI in your bubble applications, it doesn't mean that you have to build a super complex NASA ready AI functionality to make it worthwhile. I mean, sometimes it's something as simple as just making it listen to your customers and, and letting. Letting them say what they have to say.

I love that sentence. It's just as simple as making it listen to your customers. Nice little sentence.

That'll make a short.

I'll make it short. So good time for us to actually talk about how we built this.

Sure. So what we did was we incorporated into this reusable element we recorded. We used a plugin for recording audio files. So there's a lot of them out there. And we'll put in our resource center a link to the one that we're using so that if you want to copy what we built, then you can just do that.

Link to the resource center is in.

The show notes and it's also yes, in on ratio.dev website.

So we put that in as the recorder and then what we do is we take the URL from that file that the recorder has created and we send it to a backend workflow that we created with relevance. AI that just uses, in this case, ChatGPT to transcribe the audio file and return the text. As simple as that. You can use multiple different LLMs to transcribe text, that's up to you. You could swap them around in case, you know, if you're trying to generate long form content. Well, maybe you want to use deep grammar. You know, there's, there's a lot of alternatives, but the process is seamless for the user. It's just talk into the microphone, hit stop and keep going.

Let me summarize it for non technical users. So you've got this bubble plugin that essentially takes the user's voice input. We send that over to relevance AI. Relevance AI takes the audio file, it transcribes it using ChatGPT, it sends it back to our bubble application and we.

Just put it into the text field.

How long does that take?

A couple seconds. Couple seconds? Yeah, it's pretty fast. I mean, it depends also on how long you talk.

If you're recording. Yeah. Romeo and Juliet, then, then it'll take longer. Yeah.

And it'll probably break.

But you never know, maybe it won't. We haven't had problems with it. So, I mean, normally you're not.

I mean, I've, I've tested it out and I, to be honest, I was expecting it to be a little slow and I was surprised by how fast it is.

Yeah, it works pretty well.

Yeah, you did. Did a good job there. So just, I mean, this is going to be a little bit of a shorter episode and maybe it's good for us to actually sit down and even if, if it means sitting down for a shorter period of time, just talking use cases around how bubblers need to be thinking about building.

Yeah, I think that that is really the key of this, is that it's not always about just building your bubble applications like you've already always built them. Okay. We have so many new opportunities, so many new tools, so many new things to integrate with, and the smallest little things that you do can make you stand out. You know, it's like, you know, boxing in the heavyweights, you know, against a heavyweight, when you're a lightweight, it's a real advantage to be able to say, oh yeah, oh yeah, we built this, you know, whatever it is. But oh, and by the way, you can talk to it now. Suddenly it's like, oh, I can talk to it. Well, now you've got a curiosity thing there as well. I want to see that. And look, let's face it, you can't talk to a WordPress website, you can't talk to a webflow website. You know, it's. People are probably getting tired of chatting with chatbots. I know I am. And Sometimes, you know, you just don't know. You sit there and you say, okay, now I've got to write this great response so the AI will understand me. And it takes time. It takes time and it takes effort and you get stuck and you maybe just go away and don't complete the task.

Or.

Whereas if you can just hit a button and say, okay, look, this is my business problem. I've got a, you know, a pizza shop that needs to serve more pepperoni and I'm living in this. My pizza shop is set up in a vegan neighborhood. How do I solve this problem? And you know, you already know your problem. So you just tell the AI that and then it can come back and either give you a great response or it can give you a shitty response. You never know. But, but what is clear is that you've made it easier for your users. And if you've made the experience more engaging, more fun for your user, that's going to make you stand out and.

It'S going to make it easier for them to come back as well.

Yep.

They're going to leave with a positive note of you.

That's right, that's right. And especially if it's something that they have to do more than once. So they have, you know, there's a, in the case of Maria's tool that we built, there was a long series of different information that she needed to get in order to provide a great result at the end. And, and it was sort of a uphill climb. And so by being able to talk to it, it really does make it a lot more friendly.

Yeah, I don't know that I have a whole lot more to add. Just on a random note, I don't know if you saw this, but. OpenAI acquired. What is it?

Windsurf.

Windsurf?

Yeah.

Oh. What do you think about that?

Probably something, you know, who knows what'll happen tomorrow. I mean, that means that they're recognizing the need for, you know, non technical.

Users to be able to build things.

Yeah. You know, maybe they should have bought Bubble.

I keep. Well, maybe not. I mean, maybe not. Maybe not. Maybe not.

We're happy with Bubble the way we are. We are happy.

They're doing a good job.

But it does make me wonder, okay, the big guys out there are recognizing this problem, which is that non technical users want to be able to build, but the problem is we keep coming back to this problem, is that you're going to work, man, it ain't going to work. I mean, you're going to end up with a Frankenstein app.

Yeah. That you're not going to be able to maintain and you can't understand what's happening under the covers.

Maybe these guys have a secret something under their belts that's going to make tremendous magic.

Yeah, maybe they will. But we have a no code wizard.

We have a no code wizard. That's a good way to wrap up the episode, I think. All right, thank you, man.

Thanks.