Ge din AI en röst på 5 minuter

Vad du bygger

En liten "Spela upp"-knapp i din Lovable-app som tar AI:ns textsvar och läser upp det med en naturlig svensk röst via ElevenLabs. Perfekt för assistenter, sagor för barn, tillgänglighet eller bara för att din app ska kännas levande.

Innan du börjar

Ett Lovable-projekt med en enkel AI-chat (räcker med useChat eller en egen serverfunktion).
Ett ElevenLabs-konto — skapa gratis via CTA:n "Kom igång med ElevenLabs" här bredvid (din affiliatelänk följer med automatiskt).
Ca 5 minuter.

Steg för steg

1. Välj din röst

Logga in på ElevenLabs → Voice Library. Filtrera på Swedish eller välj en av standardrösterna (Sarah EXAVITQu4vr4xnSDxMaL funkar utmärkt på svenska med eleven_multilingual_v2). Kopiera Voice ID.

2. Koppla ElevenLabs-connectorn i Lovable

I chatten skriver du "koppla ElevenLabs". Lovable öppnar connector-kortet — logga in och godkänn. Nyckeln syncas som ELEVENLABS_API_KEY i din server-runtime, du behöver aldrig hantera den själv.

3. Skapa en TTS-serverfunktion

Be Lovable: "Lägg till en serverfunktion speakText(text) som anropar ElevenLabs och returnerar mp3-bytes." Den ska se ut ungefär så här:

import { createServerFn } from "@tanstack/react-start";

export const speakText = createServerFn({ method: "POST" })
  .inputValidator((d: { text: string }) => d)
  .handler(async ({ data }) => {
    const res = await fetch(
      `https://api.elevenlabs.io/v1/text-to-speech/EXAVITQu4vr4xnSDxMaL?output_format=mp3_44100_128`,
      {
        method: "POST",
        headers: {
          "xi-api-key": process.env.ELEVENLABS_API_KEY!,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          text: data.text,
          model_id: "eleven_multilingual_v2",
        }),
      }
    );
    const buf = await res.arrayBuffer();
    return { audio: Buffer.from(buf).toString("base64") };
  });

4. Spela upp i klienten

Lägg till en knapp i chatten som ropar på funktionen och spelar upp ljudet:

const { audio } = await speakText({ data: { text: senasteSvar } });
new Audio(`data:audio/mpeg;base64,${audio}`).play();

Klart! Testa. Du ska höra din AI prata.

Tips

Behöver du snabbare svar? Byt model_id till eleven_turbo_v2_5 — nästan halva latensen med bibehållen kvalitet.
Cacha vanliga fraser ("Hej!", "Ett ögonblick…") i en tabell så du inte betalar för samma generering två gånger.
För långa texter, dela upp vid punkter och skicka previous_text/next_text för smidiga övergångar.

Vanliga fel

"Invalid output_format" — output_format måste ligga som query parameter i URL:en, inte i body. Vanligaste misstaget.
Skrapande / brusigt ljud i klienten — du har försökt atob() binärdata. Använd data:audio/mpeg;base64,... direkt (som ovan) eller response.blob() om servern returnerar bytes.
401 från ElevenLabs — connectorn är inte kopplad ännu. Kör "koppla ElevenLabs" en gång till.