Build a GenAI Text-to-Speech App in TypeScript
Tags: typescript, javascript, ai, programming
Published: 2024-06-07 13:45:58

Try your hand at AI app development with this [Encore for TypeScript](https://encore.dev) 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](https://elevenlabs.io/)' 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.

![GenAI App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9f744vfx92ee4yi9xbz.png)

**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:

```bash
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:

```bash
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:

```bash
encore run
```

**🕹 Try it out:** While encore run is running, open [http://localhost:4000/](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.

![encore local dev dash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7cawb0wu23bj6xxc30jv.png)


## 🚀 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`:

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

Then head over to the [Cloud Dashboard](https://app.encore.dev) 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](https://github.com/encoredev/encore).
- If you have questions or want to share your work, join the developers hangout in Encore's [community on Discord](https://encore.dev/discord).
- Discover more fun app template in the [open source Templates repo](https://github.com/encoredev/examples)