> ## 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" />

This guide demonstrates how to add Rime's text-to-speech (TTS) functionality to apps built with [Replit](https://replit.com/), an AI-powered platform that generates code from users' text descriptions. Rime is a TTS API that generates natural-sounding voice audio. When your Replit app needs to speak, it sends text to Rime's API and receives audio back.

<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" data-path="images/replit-demo-app.mp4" />

This approach works well if you want to prototype voice features quickly without writing integration code yourself. The Replit agent handles the API calls, authentication, 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 the [Arcana](/docs/models#arcana) model's voice library 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 (5000 max)
2. Voice picker with a grid of 16 Arcana voice cards (luna, astra, sirius, estelle,
   lyra, vespera, walnut, 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: Arcana
Docs: https://docs.rime.ai/api-reference/arcana/streaming-wav
```

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. Click **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

This keeps your key secure so that it never appears in your code or version history

## Learn more

Refer to the following documentation to learn more about using Replit and Rime:

* [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)