opncrafter

ElevenLabs: The Vercel of Voice

Dec 29, 2025 • 20 min read

ElevenLabs is the industry standard for high-quality AI text-to-speech and conversational voice agents. Their models produce audio indistinguishable from professional voice actors, with sub-500ms latency when streaming. Whether you need a document narrator, a real-time voice assistant, or a hands-free customer service agent, ElevenLabs abstracts away the hardest parts: audio codec negotiation, streaming chunking, backpressure, and WebSocket session management.

1. TTS Models: Choosing the Right One

ModelLatencyQualityBest For
eleven_turbo_v2~400ms TTFA⭐⭐⭐⭐Real-time voice bots, conversational AI
eleven_turbo_v2_5~300ms TTFA⭐⭐⭐⭐More expressive turbo — best default choice
eleven_multilingual_v2~800ms TTFA⭐⭐⭐⭐⭐Long-form narration, 29 languages, broadcast quality
eleven_flash_v2_5~75ms TTFA⭐⭐⭐Ultra-low latency where speed beats quality

2. Basic TTS: Text to Audio File

pip install elevenlabs

from elevenlabs import ElevenLabs
from elevenlabs.types import VoiceSettings

client = ElevenLabs(api_key="your_key")

# Generate audio and save to file
audio = client.text_to_speech.convert(
    voice_id="21m00Tcm4TlvDq8ikWAM",  # "Rachel" — a popular default voice
    text="Welcome to our AI-powered customer support.",
    model_id="eleven_turbo_v2_5",
    voice_settings=VoiceSettings(
        stability=0.5,        # 0.0 = more expressive/variable, 1.0 = monotone/stable
        similarity_boost=0.75, # How closely to adhere to the original voice
        style=0.5,            # Expressiveness (only supported by some models)
        use_speaker_boost=True # Improves clarity at higher similarity
    ),
    output_format="mp3_22050_32",  # Format: mp3_44100_128 for high quality narration
)

# Save to file
with open("output.mp3", "wb") as f:
    for chunk in audio:
        f.write(chunk)

3. Streaming TTS for Real-Time Applications

For voice bots, always stream — don't wait for the full audio before playing:

# Server-Sent Events streaming (Next.js API route)
import { ElevenLabsClient } from "elevenlabs";

const client = new ElevenLabsClient({ apiKey: process.env.ELEVENLABS_API_KEY });

export async function POST(request) {
    const { text } = await request.json();
    
    // Get streaming audio response
    const audioStream = await client.textToSpeech.convertAsStream("21m00Tcm4TlvDq8ikWAM", {
        text,
        modelId: "eleven_turbo_v2_5",
        outputFormat: "mp3_44100_128",
    });
    
    // Stream audio chunks directly to the browser
    const readableStream = new ReadableStream({
        async start(controller) {
            for await (const chunk of audioStream) {
                controller.enqueue(chunk);
            }
            controller.close();
        }
    });
    
    return new Response(readableStream, {
        headers: {
            "Content-Type": "audio/mpeg",
            "Transfer-Encoding": "chunked",
        }
    });
}

// Client-side: play streaming audio
const response = await fetch("/api/tts", {
    method: "POST",
    body: JSON.stringify({ text: "Hello, how can I help you today?" })
});

const audioBlob = await response.blob();
const audioUrl = URL.createObjectURL(audioBlob);
const audio = new Audio(audioUrl);
audio.play();

4. Voice Cloning: Instant & Professional

# Instant Voice Clone — requires ~1-10 minutes of clean audio samples
from elevenlabs import ElevenLabs
from pathlib import Path

client = ElevenLabs(api_key="your_key")

# Upload voice samples (must be clean audio, no background noise)
voice = client.voices.ivc.create(
    name="CEO Voice Clone",
    description="Professional voice for our product narrations",
    files=[
        open("sample1.mp3", "rb"),  # At least 1 min of audio
        open("sample2.mp3", "rb"),  # More samples = better clone
    ],
    remove_background_noise=True,  # ElevenLabs cleans the audio
)

print(f"Voice ID: {voice.voice_id}")  # Save this for future use

# Use the cloned voice
audio = client.text_to_speech.convert(
    voice_id=voice.voice_id,
    text="This is our AI narrator using the cloned voice.",
    model_id="eleven_multilingual_v2",  # Best quality for cloned voices
)

# Note: Voice cloning requires Creator or higher plan
# Instant Cloning: Available on $22/month Creator plan
# Professional Cloning: Available on $99/month Pro plan (better accuracy, more samples)

5. The Conversational AI Agent SDK

ElevenLabs' Conversational AI platform handles the full voice agent stack — STT, LLM, TTS, VAD, and session management — without you touching WebSockets:

# 1. Create an Agent in ElevenLabs Dashboard:
#    - Go to elevenlabs.io → Conversational AI → Create Agent
#    - Set: Voice, System Prompt, First Message, LLM (Claude/GPT/Gemini)
#    - Add Knowledge Base: upload PDFs, URLs, or text

# 2. Embed in React with the Client SDK
npm install @11labs/react

// components/VoiceAgent.tsx
'use client';
import { useConversation } from '@11labs/react';

export default function VoiceAgent() {
  const { startSession, endSession, status, isSpeaking } = useConversation({
    agentId: process.env.NEXT_PUBLIC_ELEVENLABS_AGENT_ID,
    onConnect: () => console.log('Agent connected'),
    onDisconnect: () => console.log('Session ended'),
    onMessage: (msg) => console.log('Message:', msg),
    onError: (err) => console.error('Error:', err),
  });

  const handleStart = async () => {
    // Request microphone access
    await navigator.mediaDevices.getUserMedia({ audio: true });
    await startSession({ agentId: process.env.NEXT_PUBLIC_ELEVENLABS_AGENT_ID });
  };

  return (
    <div style={{ textAlign: 'center', padding: '2rem' }}>
      <div style={{
        width: '80px', height: '80px', borderRadius: '50%',
        background: isSpeaking ? '#3b82f6' : '#4ade80',
        margin: '0 auto 1rem',
        animation: isSpeaking ? 'pulse 1s infinite' : 'none',
      }} />
      <p>Status: {status}</p>
      <button onClick={status === 'disconnected' ? handleStart : endSession}>
        {status === 'disconnected' ? 'Start Conversation' : 'End Session'}
      </button>
    </div>
  );
}

6. Function Calling via Webhooks

ElevenLabs agents can invoke your APIs by calling your webhook when the LLM triggers a tool:

// Define in ElevenLabs Dashboard → Agent → Tools:
// Tool Name: "book_appointment"
// Description: "Book a dental appointment for the caller"
// Parameters: { patient_name: string, preferred_date: string, reason: string }
// Webhook URL: https://yourapp.com/api/elevenlabs/tools

// Your webhook handler (Next.js)
export async function POST(req) {
    const { tool_name, tool_input, conversation_id } = await req.json();
    
    if (tool_name === "book_appointment") {
        const { patient_name, preferred_date, reason } = tool_input;
        
        // Call your actual booking system
        const booking = await calendarAPI.createAppointment({
            patient: patient_name,
            date: preferred_date,
            notes: reason,
        });
        
        // Return result — ElevenLabs will read this back to the user
        return Response.json({
            success: true,
            result: `Appointment confirmed for ${patient_name} on ${booking.date} at ${booking.time}. Confirmation number: ${booking.id}`
        });
    }
}

7. Use Cases & Architecture Patterns

  • Customer Support: ElevenLabs agent + your knowledge base PDFs + CRM webhook = a 24/7 phone line that checks order status, processes returns, and schedules callbacks
  • Interactive Storytelling: Generate unique NPC dialogue with cloned character voices — each in-game character has its own voice ID
  • Language Learning: Agent monitors pronunciation via transcription, gives real-time feedback using configured voice persona
  • Accessibility: Stream any webpage text through TTS for visually impaired users, with natural prosody on headers vs paragraphs
  • Podcast Production: Draft → TTS with cloned voice → human review and re-record only the imperfect sections

Frequently Asked Questions

ElevenLabs vs OpenAI TTS vs Google TTS — which is best?

ElevenLabs leads on voice quality and naturalness for English and major European languages. OpenAI TTS is simpler (one API call) and significantly cheaper, good enough for most use cases. Google TTS is better for Google Cloud-integrated applications and has broader language support. For conversational agents where voice quality affects user retention, ElevenLabs' expressiveness advantage is meaningful.

How do I reduce latency for voice bots?

Use eleven_flash_v2_5 (75ms TTFA) for the TTS layer. Implement sentence-level streaming in your LLM pipeline — start sending the first sentence to ElevenLabs before the full LLM response is complete. This can reduce perceived latency by 400-600ms.

Conclusion

ElevenLabs is the fastest path from "I want a voice feature" to a production-ready implementation. The Conversational AI Agent platform eliminates WebSocket complexity entirely — you just configure the agent, embed the SDK, and handle webhook tool calls for your business logic. For teams building voice-first products, this is the same leverage that Vercel gave frontend developers: a managed platform that handles the infrastructure so you can focus on the product.

Continue Reading

👨‍💻
Written by

Vivek

AI Engineer

Full-stack AI engineer with 4+ years building LLM-powered products, autonomous agents, and RAG pipelines. I've shipped AI features to production for startups and worked hands-on with GPT-4o, LangChain, LlamaIndex, and the Vercel AI SDK. I started OpnCrafter to share everything I wish I had when learning — no fluff, just working code and real-world context.

GPT-4oLangChainNext.jsVector DBsRAGVercel AI SDK