Create an AI Voice Generator App in 5 minutes with Encore 🧠✨
Tags: ai, programming, go, api
Published: 2023-10-17 13:16:21

## TL;DR

This guide shows you how to build a web app in Go that uses [ElevenLabs](https://elevenlabs.io/) generative voice AI to create lifelike speech from text. You can then deploy it to the cloud using [Encore](https://encore.dev)'s free development cloud.

**🚀 What we're doing:**
- Install Encore & create an empty app
- Download the ElevenLabs Encore package
- Run the backend locally
- Create a simple frontend
- Deploy to the cloud

## 💽 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 a new Encore application with this command and select the `Empty app` starter:

```bash
encore app create
```

## 💾 Download the ElevenLabs package

1. Download the `elevenlabs` package from `https://github.com/encoredev/examples/tree/main/bits/elevenlabs` ([link](https://github.com/encoredev/examples/tree/main/bits/elevenlabs)) and add it to the app directory you just created.
2. Sync your project dependencies by running `go mod tidy`. (Note: This requires that you have Go 1.21, or later, [installed](https://go.dev/doc/install).)

### Get your ElevenLabs API Key

You'll need an [API key from ElevenLabs](https://docs.elevenlabs.io/api-reference/quick-start/authentication) 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, save it as a secret using Encore's secret manager with the name `ElevenLabsAPIKey`, by running:

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

## 🏁 Run your app locally
Start your application locally by running:

```bash
encore run
```

You can now open Encore's local development dashboard at <http://localhost:9400> to see your app's API documentation, call the API using the API explorer and view traces, and more.

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

### 🧐 Try out the API

Now let's play around a bit with our shiny new API!

From the API Explorer in the local development dashboard, try calling the `elevenlabs.DownloadAudio` endpoint with the text input of your choice in the request body.

![API Explorer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qk6vzf9m4fdidozyd3h.png)

This will use the API to generate an MP3 audio file and download it to your app root folder: `speech.mp3`.

### API Endpoints

Now that we know it works, let's review the API endpoints in the `elevenlabs` package.

- **elevenlabs.ServeAudio:** ServeAudio generates audio from text and serves it as mpeg to the client.
- **elevenlabs.StreamAudio:** StreamAudio generates audio from text and streams it as mpeg to the client.
- **elevenlabs.DownloadAudio:** DownloadAudio generates audio from text and saves the audio file as mp3 to disk.

## 🖼 Create a simple frontend

Now let's make our app more user-friendly by adding a simple frontend.

- Create a subfolder in your app root called `frontend`.
- Inside `/frontend`, create `frontend.go` and paste the following code into it:
```go
package frontend

import (
	"embed"
	"net/http"
)

var (
	//go:embed index.html
	dist embed.FS

	handler = http.StripPrefix("/frontend/", http.FileServer(http.FS(dist)))
)

// Serve serves the frontend for development.
// For production use we recommend deploying the frontend
// using Vercel, Netlify, or similar.
//
//encore:api public raw path=/frontend/*path
func Serve(w http.ResponseWriter, req *http.Request) {
	handler.ServeHTTP(w, req)
}
```
- Inside `/frontend`, create `index.html` and paste the following code into it:

```html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>AI Speech Generator</title>
  <style>
    textarea {
      font-size: 18px;
    }

    button {
      display: block;
      border: 1px solid black;
      background: transparent;
      font-size: 20px;
      border-radius: 3px;
      margin-top: 10px;
      padding: 5px 10px;
    }
  </style>
</head>
<body>
<h1>Encore + ElevenLabs AI Speech Generator</h1>

<textarea id="text-to-speech" cols="40" rows="5">Hello dear, this is your computer speaking.</textarea>

<button id="speak-button">Say it!</button>

<script>
  const onSpeak = () => {
    const text = document.getElementById('text-to-speech').value;

    fetch('/speech/serve', {
      method: 'POST',
      body: JSON.stringify({text})
    })
    .then(res => res.blob())
    .then(data => {
      const url = window.URL.createObjectURL(data);
      const audio = new Audio();
      audio.src = url;
      audio.play();
    })
  }

  const button = document.getElementById('speak-button');
  button.addEventListener('click', onSpeak);
</script>
</body>
</html>
```
- Now restart your app by running `encore run` and open your new frontend at <http://127.0.0.1:4000/frontend>.

You should see this:

![Local Running App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sb5egmwnsino87215bzo.png)

— Congratulations, you now have a working AI Voice Generator! 🎉

## 🚀 Deploy to the cloud

Deploy your app to a free cloud environment in Encore's development cloud by running:

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

👉 Then head over to the [Cloud Dashboard](https://app.encore.dev) to monitor your deployment and find your production URL by going the overview page for the environment you just created. It will be something like: `https://staging-[APP-ID].encr.app`.

![Environment overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69ay5wocab7mh54d98sd.png)

Once you have your root API address and the deploy is complete, open your app in your browser: `https://staging-[APP-ID].encr.app/frontend`.

### 🎉 Great job - you're done!

Great job! You now have an AI-powered app running in the cloud.

Keep building with Encore using these Open Source [App Templates](https://encore.dev/templates). 👈

If you have questions or want to share your work, join the developer hangout in [Encore's community Slack](https://encore.dev/slack). 👈

## Learn More

- [Encore Documentation](https://encore.dev/docs)
- [ElevenLabs Documentation](https://docs.elevenlabs.io/welcome/introduction)