Build a No Code AI Bedtime Story App with Text to Speech by ElevenLabs

Creating a No Code AI Bedtime Story Generator

Here's how you can create a no code AI bedtime story generator, which generates AI text using Anthropic Claude AI and then uses ElevenLabs text to speech. So you get an mp3 file of your story being read just like this one. Sunny morning, Matt's grandfather surprised him with a small wooden sailboat painted in this tutorial, we'll be using Bubble as our No Code platform and combining it with Anthropic's API. And with the ElevenLabs API, let's dive into it. But before I do, if you're building a Bubble app and you want to get access to more videos just like this one, click the link down in the description where you can find out how our members have access to a library of over 360 Bubble tutorial videos.

Setting Up the Basic Interface

So we're starting here with just our blank page. I'm not even going to design this properly. I'm just going to make it super quick as we're doing a proof of concept. I'm not even going to be using rows and columns, although that is best practice if you want to make your Bubble app responsive. So to start with, I'm going to drag in some text and just make this h1 and I'll call this one AI story generator.

That said, the AI bedtime story generator. Bedtime story generator. Okay, cool. Right. So I'm going to demonstrate how we can take multiple inputs.

So I'm going to say one input is going to be a brief story description.

And then what's rather cool about this is if you were making it for your own kids, you could insert their name as the main character. So we'll say main character name.

And then I'm going to add in a button because this button is going to take the data from both these fields, run it through Anthropic Claude AI. We'll get some text back and then we'll pass that text on to ElevenLabs for the text, the speech. So I'll say generate story and audio. Perfect. Right now we need to get to grips with the APIs and we're going to start by using the Anthropic console.

Setting Up the Anthropic API

So if you've got an Anthropic dev account, this is different. If you're just using Claude through the web interface, do be aware of that. So we'll just say you are a children's bedtime story authorization. And then in here I'm simply going to say write a story about, we'll say sailing boats, main character. We'll say Matt.

Okay, and then I'm going to go through and adjust the model. Yeah, we'll use Sonnet so we get half decent responses. If I wanted it to be really cheap, I'd be using Haiku Opus. If you were asking it to write like a sonnet, ironically, you know, something that had really strict writing rules or you wanted it to really excel in its ability to write English, you would use Opus. But we'll use Sonnet 3.5 for now.

And then temperature, I like using a temperature of kind of 0.7. I find that gets a good mix of creativity without it going too wild. And then we'll just say Max tokens to sample 1000 so it's not going to write too much. And I'll click run and I'm doing it in the console because I want to see that we get a decent output. And there we go, we're getting tons of output in fact.

Yeah, cool. Brilliant. So I can now say get code. So we have to be able to translate this into the right structure for an API call sent from our Bubble app to Claude so we can get back the same response and work with it in our Bubble app. And to do that, we go into Bubble and we go into plugins and we say API connector.

Configuring the API Connector in Bubble

If you don't see the API connector, it's add plugins up there and you can install it. Now these are all of the different APIs that I've worked with in the past. In fact, Anthropic's probably going to be in there, but I'm going to set it up again and we'll call this Anthropic Claude. Okay. And just that of habit, I know that I got to authenticate with a private key in header and then we're going to name this generate generate story.

Okay, so I now need to fill in the other fields in the API connector. Precisely. Otherwise I'm going to get JSON syntax errors. So let's go back into Claude and in fact, I'm just going to say few docs and go on to API referencing messages. Create message here, right here, this is actually more helpful.

So I have to supply my API key in the header.

So it's not authorization. They want that. Then they also want other headers. So let's go back to cons. No, here we go.

So I have to supply the version, I'm going to copy both these onto my clipboard so I can copy them across really quickly.

Okay, now the other one, content type JSON. I don't have to supply it because Bubble has that built in, unless you choose to override it. So I've got to make a post request. How do I know that? Well, because here and then I have to supply some essential required fields, including the model that I'm using, how many tokens, and then my message.

So let's do that.

I'm in. Post paste it in. I appear to have missed some bits there. Not that one. This one here.

Right. So it's everything within the quote marks under data.

That's better. And what's the end point? I keep thinking back to that one. The endpoint is here.

Okay. And then I also need to put my API key and there's no bearer in this case, so it's just the API key. And I get that from my Anthropic account. But I've got that also on my clipboard and I will be deleting it before I publish this video and I change this to action. That way it can be actioned within a workflow.

Testing the API Connection

And I'm going to initialize even though it only says hello world because I want to make sure that I've not made any mistakes. So let's click initialize. Yeah. And I get back a text response here. It's a bit clearer.

I get back a hello. The AI is working, so I'm going to click save and make two changes here. I'm going to add in my system prompt because that's describing the Persona I want the AI to take on. So I'm going to add it in here. Unlike when working with OpenAI, the system prompt actually goes in the kind of amongst the parameters of the rest of the JSON.

It doesn't go in as a user message, so it's just system. And then now I can go back to my copy code and I take this here.

Comnico is from a different video. Didn't mean to show that. Comnico is an amazing tool for generating complex workflows and function APIs. But that's a different video. So let's paste in my system prompt here and then let's go back and my text.

Okay, now notice it has an escaped character there because in JSON or this is in python, special characters such as line spaces and punctuation can cause a nightmare. So we'll troubleshoot that as we go through. But basically backslash n means new line. Right? Let's go back into here.

And I'm actually going to remove the speech marks. No, I'm not. And I'm going to use triangle brackets because I want to make this dynamic. I want to take what the user inserts into the multiline input of, and put it into here. So I'll say prompt, paste in here, add in the speech marks again, I don't want it private is saying, is this data shared with my users?

An example that I want to be private is my private key, and I've declared it as private up here. So let's re initialize. Cool. I get some errors, so I imagine that is because of I need to escape the punctuation of the colons.

Let's try that. No, I'm still getting a JSON error. Right. What mistake I made here. Let's just get rid of the colons.

Let's get rid of the line space as well, just to check it works. No, I'm still getting an error. Why is that? What have I done wrong? Ah, I've not put a comma at the end.

There you go. I told you getting the punctuation wrong is going to cause headaches. So now it should work. So we're waiting on the AI to give its response. Sonnet is in the middle between Haiku and Opus, and so it's going to take some time.

Also, Bubble doesn't support the streaming protocol, so it has to wait until everything returns back. But look, we get our story perfect. So now let's link this up into our workflow. So I go onto design and I say let's add in a workflow. And now I'm going to go into plugins, I'm going to find that action.

Setting Up the Workflow in Bubble

Now I've got all of these here because I've got a load of plugins installed. I've got different APIs set up, but I called it Anthropic and it's just there. If you don't see it, it's because you've not initialized it or you've named it something different here, or you need to set it as an action. So let's get back into our workflows. So here is where I've build up my prompt and I'm going to take some control away from my user of how they do this.

And I'm doing that because I've got my two inputs, I've got my description, and I've got my main character. So I'm going to use arbitrary text, and arbitrary text is a great way of grouping together more than one piece of text or kind of complex expression. It's really helpful for copying and pasting a complex expression of dynamic data around your Bubble app. But also it means that we can wrap everything in it in JSON safe JSON safe is going to ensure that if the user inserts any punctuation that could cause a JSON syntax error, such as line breaks, or if they were to put in colons, it makes them safe. It also wraps the whole thing in the speech marks.

That's why I've removed speech marks from that part in the API connector. So I'll say story description and it means I don't have to worry about punctuation because it is all being made JSON safe. So I don't need to worry about the punctuation in arbitrary text. So I'll say multi line inputs value and then I just put a line spacing and I'll say main character name.

Integrating ElevenLabs API for Text-to-Speech

Perfect. Okay, so I now know that I'm going to get the story back. Let's launch into changing the text into speech. So now it's time to dive into the ElevenLabs API. And hopefully it's going to feel more familiar now because the way we go about it is very similar to what we did did with Anthropic Claude.

So we're on text to speech and we've got some required fields. We have to have an API key, you'd get that from your account. We have to have a voice id and we can get that by going in and exploring the voices in ElevenLabs. I'm just picking a random one here, voice id, clicking that, going back into this composer window, pasting it in, and you can see that it inserts it part of the endpoint. We then need our text and this, I'm just doing the bare minimal here we have text data, so let's translate this into our Bubble app.

Notice that I'm on c curl, see URL here. So if I go into Bubble API connector, we add another API and we'll call this ElevenLabs same. It wants the private key in header. We're going to be making a post request because there's data in the body and so I'll call this one generate text to speech if you want to do speech to text. We've got a series of tutorials using the AssemblyAI API and also OpenAI's whisper.

But for now we're focusing on text to speech. So I change it into action and then let's go back to here, let me close that right, so we have our endpoint. So copy that.

We have our API key. So content type application, JSON Bubble delivers that by default so I can ignore it. And then we just need the key name and then I'm going to paste in my key and I will of course delete this before publishing this video. And then I need the body or the data section. So that's here.

Okay. And once more we're going to initialize it to make sure that there are no mistakes in it.

Okay. And we get back a response saying it doesn't get JSON back but it's not an error. So actually we need to probably change this to a file because we get a file back.

Okay. And there we go. Preview. Testing. Okay.

And I'm not sure if I've got system audio recording on or whether my mic will pick that up, but this is a very testing audio file that says testing. So we know that it has worked perfect. So in a similar way that we did with the Anthropic call, we have to make part of this dynamic because we want to insert our story into it. So let's take this and say, we'll just say text, that's fine, it's not private. And I've removed the speech marks because I'm going to make it JSON safe.

Putting It All Together

Let's put this all together. So we'll say text to speech. Remember if you don't see that, probably because you've not initialized it, set it as an action. And then we will insert in the text straight from the response from Claude. So I'll say content and it's going to be first item.

That's because you can get a like a number of variations. We've only asked for one and it's going to be text, I think that's right. And then we'll make that JSON safe.

Okay, so now we just need a way of displaying the or at least playback of the audio file. So what I'm going to do is just search for HTML audio player and I'm going to copy this back into our Bubble app. Now you could find the plugin if you wanted more advanced features with an audio player you could probably find a way to do that. But I'm just going to add in some HTML, paste it in and then I think we're working with an mp3. To be fair, I've not actually checked that.

That's what we're getting back, right. I just need a way of recalling the last file that we get back from ElevenLabs. I could store that in the database but I'm going to use a custom state because a custom state is a great way of temporary storage. So I'm going to add a custom state and call this story, story audio. And then this is going to be of type file because I've set it so that the response I get back from the ElevenLabs API is a file.

And now in here, let's just make this slightly bigger. Here we go. I'm going to say the source.

Oh, we didn't mean to do that. The source, I'm going to make that dynamic. So where did I create the custom state? Well, I created it on the page. You can create a custom state any way you like.

So that's going to be bedtime story because that's the page story audio URL. Okay. Because the HTML audio player expects to get back a URL and I'm actually going to preemptively do something which I think is, is going to stop an error from occurring, which is that when you