> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rime.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Replit

> Use Rime TTS inside Replit projects.

export const IntegrationHeader = ({partnerLogo, partnerAlt = "Partner logo", rimeLogo = "/images/rime_logo_new.svg", rimeAlt = "Rime logo", rimeHeight = "40px", partnerHeight = "40px"}) => <div style={{
  width: "100%",
  display: "flex",
  flexDirection: "row",
  alignItems: "center",
  justifyContent: "center",
  gap: "12px",
  flexWrap: "nowrap",
  marginBottom: "24px"
}}>
    <img src={rimeLogo} style={{
  height: rimeHeight,
  display: "inline-block"
}} alt={rimeAlt} />
    <span style={{
  fontSize: "24px",
  color: "#666",
  display: "inline-block"
}}>
      +
    </span>
    <img src={partnerLogo} style={{
  height: partnerHeight,
  display: "inline-block"
}} alt={partnerAlt} />
  </div>;

<IntegrationHeader partnerLogo="/images/replit.png" partnerAlt="Replit logo" rimeHeight="30px" partnerHeight="40px" />

Build a [Replit](https://replit.com/) voiceover application that sends text to Rime and plays the returned audio. The Replit agent generates the application from the prompt below; keep the Rime API key in Replit Secrets so it never reaches browser code.

<video controls loop playsInline className="w-full aspect-video" src="https://mintcdn.com/rimelabs/at1aaorOXkhrPQDH/images/replit-demo-app.mp4?fit=max&auto=format&n=at1aaorOXkhrPQDH&q=85&s=12ae3298b5f57ede0476f4f6839dea1b" alt="Replit voiceover application using Rime text to speech" data-path="images/replit-demo-app.mp4" />

The generated application handles the server-side API request and audio playback while Rime generates the speech.

## Prerequisites

To follow this guide, you need:

* A [Replit account](https://replit.com/signup)
* A Rime API key from [API Tokens](https://app.rime.ai/tokens/) page

## Step 1: Create your app

Paste the following prompt in Replit to build a voiceover studio app. It uses [Coda](/docs/models#coda), Rime's current model, to generate speech. You can modify this prompt to build your own app idea.

```
Build an Instant Voiceover Studio, a single-page app where users paste text,
pick a voice, and generate professional audio using Rime TTS.

For: Content creators who need quick voiceovers for YouTube, podcasts, and apps.

Design: Rime design language with near-black background (#0D0D0D, #161616),
orange-to-red gradient accents (#FF9300 to #B10000), grey surfaces (#333, #1A1A1A),
Inter font. Clean and premium.

Layout (two-column on desktop, stacked on mobile):

Left Panel:
1. Text input area with character count (1000 max)
2. Voice picker with a grid of 16 Coda voice cards (luna, astra, sirius, estelle,
   lyra, vespera, masonry, eliphas, arcade, atrium, eucalyptus, fern, stucco, transom,
   oculus, moss) with gradient avatars
3. "Generate Voiceover" button following Rime design language
4. Audio controls with play and pause, progress bar, and download wav options.

Right Panel:
5. Three.js particle sphere with a small orb of over 500+ particles, centered in the
   right panel. It slowly rotates when idle with a dim orange tint. When audio plays:
   particles expand outward and glow bright orange (#FF9300) to red (#B10000),
   pulsing with the voice.

Use Rime TTS
API: POST https://users.rime.ai/v1/rime-tts
Header: Authorization: Bearer RIME_API_KEY (stored in Secrets)
modelId: coda
Docs: https://docs.rime.ai/api-reference/coda/http
```

The Replit agent generates code that reads the `RIME_API_KEY` from your **Secrets** and uses it to authenticate the app with the Rime API.

## Step 2: Add your API key

Once Replit has created your app, add your Rime API key as a **Secret**:

1. On the Replit dashboard, press `Cmd + K` (Mac) or `Ctrl + K` (Windows and Linux) to open the command palette.
2. Search for **Secrets** and select it.
3. Select **New configuration**.
4. Enter `RIME_API_KEY` as the key and paste your API key from [app.rime.ai/tokens](https://app.rime.ai/tokens/) as the value.

Replit stores the value as a Secret so it doesn't appear in your code or version history.

## Learn more

* [Replit: Getting Started](https://docs.replit.com/getting-started/intro-replit)
* [Replit: Agent Integrations](https://docs.replit.com/replitai/integrations)
* [Replit: Secrets Management](https://docs.replit.com/replit-workspace/workspace-features/secrets)
* [Rime: Voices](/docs/voices)