> ## 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.

# Lovable

> Build voice apps in Lovable using Rime's TTS.

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/lovable.png" partnerAlt="Lovable logo" rimeHeight="50px" partnerHeight="32px" />

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

Build a Lovable application that calls Rime TTS from an Edge Function. Store the Rime API key in Lovable Cloud so it never reaches browser code.

## Prerequisites

* A [Lovable](https://lovable.dev/) account
* A Rime [API key](https://app.rime.ai/tokens)

## Step 1: Prompt Lovable to use Rime

In your Lovable prompt, explicitly tell it to use Rime as the TTS provider. Include the API details, so Lovable knows exactly how to wire things up:

```
Use Rime TTS
**API:** POST https://users.rime.ai/v1/rime-tts
- Header: Authorization: Bearer {API_KEY}
- Docs: https://docs.rime.ai/api-reference/arcana/streaming-wav
Store the API key in Lovable Cloud.
```

## Step 2: Add your Rime API key

Since the Rime API requires authentication, Lovable will prompt you to enable [Lovable Cloud](https://docs.lovable.dev/integrations/cloud) and add your Rime API key under **Cloud → Secrets**.

Lovable saves the key as a secret and accesses Rime through Edge Functions, keeping the credential out of frontend code.

For a deeper understanding of how Lovable manages authenticated APIs, check out the [Integrations](https://docs.lovable.dev/integrations/introduction#authenticated-apis-requires-secrets) docs.

## Try it yourself

Here's a real prompt you can paste into Lovable to build a voiceover studio app:

```
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
4. Audio controls with play/pause, progress bar, download wav

**Right Panel:**
5. Three.js particle sphere with a small orb of 500+ particles, centered in the 
   right panel. Slowly rotates when idle with 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 {API_KEY}
- Docs: https://docs.rime.ai/api-reference/arcana/streaming-wav
Store the API key in Lovable Cloud.
```

The prompt can change the design or voice lineup, but it must retain the Rime endpoint and Lovable Cloud secret instructions.

**Test the app built by this prompt:** Visit [rime.lovable.app](https://rime.lovable.app).

## Tips for better results

Follow these recommendations to improve your results:

* Be specific about what you want. Lovable works best with clear, detailed prompts.
* Always include the full API details (the endpoint, headers, and docs link) so Lovable can implement the integration correctly.
* Explicitly mention storing the API key in Lovable Cloud for security.
* Check out Lovable's [prompting best practices](https://docs.lovable.dev/prompting/prompting-one) for more tips on crafting effective prompts.