ElevenLabs Voice Chat Integration

Setup Instructions

1. Create ElevenLabs Agent

Go to ElevenLabsand create your custom conversational AI agent.

2. Environment Variables

Create a .env.local file in your project root:

# ElevenLabs Configuration
ELEVENLABS_API_KEY=your-api-key-here
NEXT_PUBLIC_AGENT_ID=your-agent-id-here

3. Get Your Credentials

  • • API Key: From ElevenLabs dashboard → API Keys
  • • Agent ID: From your agent settings

4. Test the Integration

Use the demo on the right or open the Command Palette (⌘K) and type "chat" or "voice".

Command Palette Integration

The voice chat is integrated into your command palette! Press ⌘Kand type any of these keywords to activate voice chat:

  • • "chat"
  • • "voice"
  • • "ai"
  • • "talk"
  • • "speak"

Live Demo

Test your ElevenLabs agent integration here. Make sure you've set up your environment variables first.
ElevenLabs AI Voice Chat
Disconnected
Please allow microphone access to use voice chat

✅ Features Included

  • • Real-time voice conversations
  • • Automatic microphone permission handling
  • • Visual status indicators
  • • Error handling and recovery
  • • Support for both public and private agents
  • • Seamless Command Palette integration

🚀 Usage Tips

  • • Allow microphone permissions when prompted
  • • Speak clearly and wait for responses
  • • Use the Command Palette for quick access
  • • Check browser console for detailed logs