ElevenLabs Voice Integration

Overview

You'll create a voice button that connects users to an ElevenLabs conversational AI agent. The key principle: Let the ElevenLabs SDK handle microphone access - don't manually request it.

What You Need

ElevenLabs Agent ID (format: agent_xxxxxxxxxxxxx)

@elevenlabs/react package installed

Step 0: Get the ElevenLabs Agent ID

IMPORTANT: Before you start coding, use the list_agents tool to get the actual ElevenLabs agent ID. Genesis will have created the agent and you need its real ID.

Do NOT use placeholders like "agent_placeholder_needs_elevenlabs_id" - the code will fail. Get the real ID first.

Installation

Implementation Steps

1. Create VoiceProvider (`src/providers/VoiceProvider.tsx`)

2. Wrap App with Provider (`src/App.tsx`)

3. Create VoiceButton Component (`src/components/VoiceButton.tsx`)

4. Use the Button

Critical Rules

✅ DO

Let the SDK handle microphone (conversation.startSession() does it)

Use the ElevenLabs agent ID (starts with agent_)

Handle errors properly

Wrap app with VoiceConversationProvider

❌ DON'T

Call navigator.mediaDevices.getUserMedia() manually

Use the Altan agent ID - only use ElevenLabs agent ID

Request microphone before calling startSession()

Forget error handling

Common Errors

Error	Cause	Fix
WebSocket code 3000	Wrong agent ID	Use ElevenLabs ID (starts with `agent_`)
NotAllowedError	Permission denied	User must allow microphone
Failed to start	Not in provider	Wrap app with VoiceConversationProvider

Testing

Click button

Allow microphone when prompted

Should connect and show "End Call" button

Check browser console for connection logs

Why This Works

The SDK handles everything internally:

Requests microphone at the right time

Uses optimal audio settings

Manages WebRTC connection

Works across all browsers

Common mistake: Manually requesting microphone before calling SDK creates a double-request that fails.

Quick Checklist

Installed @elevenlabs/react

Created VoiceProvider

Wrapped app with provider

Created VoiceButton component

Used correct ElevenLabs agent ID (not Altan ID)

Tested: click → allow mic → connects

Done! 🎉

ElevenLabs Voice Integration

Overview#

What You Need#

Step 0: Get the ElevenLabs Agent ID#

Installation#

Implementation Steps#

1. Create VoiceProvider (src/providers/VoiceProvider.tsx)#

2. Wrap App with Provider (src/App.tsx)#

3. Create VoiceButton Component (src/components/VoiceButton.tsx)#

4. Use the Button#

Critical Rules#

✅ DO#

❌ DON'T#

Common Errors#

Testing#

Why This Works#

Quick Checklist#