Building Voice AI Apps with ElevenLabs and Antigravity — A Practical Development Guide

# Backend
pip install elevenlabs fastapi uvicorn python-dotenv
 
# Frontend (Next.js)
npm install

# backend/main.py
from fastapi import FastAPI
from fastapi.responses import StreamingResponse
from fastapi.middleware.cors import CORSMiddleware
from elevenlabs.client import ElevenLabs
from pydantic import BaseModel
import os
from dotenv import load_dotenv
 
load_dotenv()
 
app = FastAPI()
 
# CORS setup for local development
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_methods=["*"],
    allow_headers=["*"],
)
 
client = ElevenLabs(api_key=os.getenv("ELEVENLABS_API_KEY"))
 
class TTSRequest(BaseModel):
    text: str
    voice_id: str = "JBFqnCBsd6RMkjVDRZzb"  # "George" - default voice
 
@app.post("/api/tts")
async def text_to_speech(request: TTSRequest):
    """
    Streams audio chunks from ElevenLabs to the client.
    The frontend plays the audio using the Web Audio API.
    """
    def audio_stream():
        # generate() returns a generator; audio arrives in chunks
        audio_generator = client.generate(
            text=request.text,
            voice=request.voice_id,
            model="eleven_turbo_v2_5",  # Low-latency model — ideal for indie apps
            stream=True,
        )
        for chunk in audio_generator:
            if chunk:
                yield chunk
 
    return StreamingResponse(
        audio_stream(),
        media_type="audio/mpeg",
        headers={"Transfer-Encoding": "chunked"},
    )

uvicorn main:app --reload
# → Starts at http://localhost:8000
 
# Test with curl
curl -X POST http://localhost:8000/api/tts \
  -H "Content-Type: application/json" \
  -d '{"text": "Hello from Antigravity Lab"}' \
  --output test.mp3
 
# Play test.mp3 — you should hear a natural-sounding voice

// app/page.tsx
"use client";
 
import { useState } from "react";
 
export default function VoiceApp() {
  const [text, setText] = useState("");
  const [isPlaying, setIsPlaying] = useState(false);
  const [error, setError] = useState<string | null>(null);
 
  const handlePlay = async () => {
    if (!text.trim()) return;
    setIsPlaying(true);
    setError(null);
 
    try {
      const response = await fetch("/api/tts", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ text }),
      });
 
      if (!response.ok) {
        throw new Error(`API error: ${response.status}`);
      }
 
      // Stream → ArrayBuffer → Blob → Audio object
      const audioData = await response.arrayBuffer();
      const audioBlob = new Blob([audioData], { type: "audio/mpeg" });
      const audioUrl = URL.createObjectURL(audioBlob);
 
      const audio = new Audio(audioUrl);
      audio.play();
      audio.onended = () => {
        setIsPlaying(false);
        URL.revokeObjectURL(audioUrl); // Important: free the memory
      };
    } catch (err) {
      setError(err instanceof Error ? err.message : "Something went wrong");
      setIsPlaying(false);
    }
  };
 
  return (
    <main className="max-w-xl mx-auto p-8">
      <h1 className="text-2xl font-bold mb-4">Voice AI Demo</h1>
      <textarea
        className="w-full border rounded p-2 mb-4 h-32"
        placeholder="Enter text to read aloud..."
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button
        onClick={handlePlay}
        disabled={isPlaying}
        className="bg-blue-600 text-white px-6 py-2 rounded disabled:opacity-50"
      >
        {isPlaying ? "Playing..." : "▶ Play Audio"}
      </button>
      {error && <p className="text-red-500 mt-2">{error}</p>}
    </main>
  );
}

# Add to backend/main.py
from fastapi import UploadFile, File
import tempfile
import os
 
@app.post("/api/stt")
async def speech_to_text(audio: UploadFile = File(...)):
    """
    Accepts an uploaded audio file and returns the transcript.
    The frontend sends a Blob recorded via MediaRecorder.
    """
    # Save to a temp file — the ElevenLabs SDK requires a file path
    with tempfile.NamedTemporaryFile(
        delete=False, suffix=".webm"
    ) as tmp_file:
        content = await audio.read()
        tmp_file.write(content)
        tmp_path = tmp_file.name
 
    try:
        with open(tmp_path, "rb") as f:
            result = client.speech_to_text.convert(
                file=f,
                model_id="scribe_v1",
                language_code="en",  # Set to your target language
            )
        return {"text": result.text}
    finally:
        os.unlink(tmp_path)  # Always clean up the temp file

# .gitignore
.env
.env.local