Build a GenAI Text-to-Speech App in TypeScript

Try your hand at AI app development with this Encore for TypeScript example app, implementing an AI powered text-to-speech generator.

This fun app project lets you create your own text-to-speech app, powered by ElevenLabs' cutting-edge API for generative voice AI.

It's a great way to experiment with the latest in AI technology and enhance your developer skills.

In a few short minutes, you'll learn how to:

• Create apps with Encore
• Run your app locally
• Get your free ElevenLabs API key and store it using Encore's Secret manager
• Deploy your app to the cloud for free

Ready to bring your text to life?

💽 Install Encore

Install the Encore CLI to run your local environment:

• macOS: brew install encoredev/tap/encore
• Linux: curl -L https://encore.dev/install.sh | bash
• Windows: iwr https://encore.dev/install.ps1 | iex

Create your app

Create your Encore app and clone the start template with this command:

encore app create my-app --example=ts/elevenlabs

Get your API key and store it using Secrets

You will need an API key from ElevenLabs to use this package. You can get one by signing up for a free account at: https://elevenlabs.io/

Once you have the API key, set it as an Encore secret using the name ElevenLabsAPIKey, using this command:

encore secret set --type dev,prod,local,pr ElevenLabsAPIKey

This sets the secret for all types of Encore environments dev, prod, local, and pr (preview environments). If you prefer, you can later use different API keys in different environments.

Run your app locally

To start your app locally, you only need to run one command to start all your local infrastructure:

encore run

🕹 Try it out: While encore run is running, open http://localhost:4000/ to see the frontend.

💡You can also access Encore's local developer dashboard on http://localhost:9400/ to view traces, API documentation, and more.

🚀 Deploy to the cloud

It's super simple to deploy your app to the cloud using Encore, it automatically provisions all the necessary infrastructure in your AWS or GCP account.

You can also deploy your application to a staging environment in Encore's free development cloud by using git push encore:

git add -A .
git commit -m 'Commit message'
git push encore

Then head over to the Cloud Dashboard to monitor your deployment and find your cloud URL.

From there you can also connect your own AWS or GCP account to use for deployment.

🚀 Now you have a working GenAI app running in the cloud, great job!

Wrapping up

• ⭐️ Support the project by starring Encore on GitHub.
• If you have questions or want to share your work, join the developers hangout in Encore's community on Discord.
• Discover more fun app template in the open source Templates repo