feat(examples): add ElevenLabs realtime provider

Author: 31Carlton7

examples/ai-e2e-next/.env.local.example

@@ -2,6 +2,11 @@
 # Then get your OpenAI API Key here: https://platform.openai.com/account/api-keys
 OPENAI_API_KEY=xxxxxxx
 
+# Required for the ElevenLabs provider in the realtime example.
+# Create an agent at https://elevenlabs.io/app and copy its Agent ID.
+ELEVENLABS_API_KEY=xxxxxxx
+ELEVENLABS_AGENT_ID=xxxxxxx
+
 # You must first create an OpenAI Assistant here: https://platform.openai.com/assistants
 # Then get your Assistant ID here: https://platform.openai.com/assistants
 ASSISTANT_ID=xxxxxxx

examples/ai-e2e-next/app/api/realtime/[...path]/route.ts

@@ -1,6 +1,7 @@
 import { openai } from '@ai-sdk/openai';
 import { google } from '@ai-sdk/google';
 import { xai } from '@ai-sdk/xai';
+import { elevenLabs } from '@ai-sdk/elevenlabs';
 import {
   experimental_getRealtimeToolDefinitions as getRealtimeToolDefinitions,
   gateway,
@@ -59,6 +60,10 @@ const providers: Record<
     factory: xai.experimental_realtime,
     model: 'grok-voice-latest',
   },
+  elevenlabs: {
+    factory: elevenLabs.experimental_realtime,
+    model: process.env.ELEVENLABS_AGENT_ID ?? '',
+  },
   gateway: {
     factory: gateway.experimental_realtime,
     model: 'openai/gpt-realtime-2',
@@ -87,6 +92,13 @@ export async function POST(
         : await getRealtimeToolDefinitions({ tools });
 
     const { factory, model } = providerConfig;
+    if (!model) {
+      return Response.json(
+        { error: `Missing model configuration for provider: ${provider}` },
+        { status: 400 },
+      );
+    }
+
     const tokenResult = await factory.getToken({
       model,
       sessionConfig:

examples/ai-e2e-next/app/realtime/page.tsx

@@ -4,9 +4,10 @@ import { experimental_useRealtime } from '@ai-sdk/react';
 import { openai } from '@ai-sdk/openai';
 import { google } from '@ai-sdk/google';
 import { xai } from '@ai-sdk/xai';
+import { elevenLabs } from '@ai-sdk/elevenlabs';
 import { useState, useRef, useEffect, useMemo } from 'react';
 
-type Provider = 'openai' | 'google' | 'xai';
+type Provider = 'openai' | 'google' | 'xai' | 'elevenlabs';
 
 type VoiceOption = { id: string; label: string };
 
@@ -23,6 +24,7 @@ const PROVIDER_CONFIG: Record<
     createModel: (
       modelId: string,
     ) => ReturnType<typeof openai.experimental_realtime>;
+    usesAgentConfiguration?: boolean;
     sessionConfigOverrides?: Record<string, unknown>;
   }
 > = {
@@ -59,6 +61,17 @@ const PROVIDER_CONFIG: Record<
     staticVoices: toVoiceOptions(['ara', 'eve', 'leo', 'rex', 'sal']),
     createModel: modelId => xai.experimental_realtime(modelId),
   },
+  elevenlabs: {
+    label: 'ElevenLabs',
+    defaultModel: 'configured-agent',
+    staticVoices: [],
+    createModel: modelId => elevenLabs.experimental_realtime(modelId),
+    usesAgentConfiguration: true,
+    sessionConfigOverrides: {
+      inputAudioFormat: { type: 'audio/pcm', rate: 16000 },
+      outputAudioFormat: { type: 'audio/pcm', rate: 16000 },
+    },
+  },
 };
 
 export default function RealtimePage() {
@@ -132,7 +145,7 @@ export default function RealtimePage() {
             style={selectStyle}
           >
             {currentVoices.length === 0 ? (
-              <option>No voices available</option>
+              <option>Agent default</option>
             ) : (
               currentVoices.map(v => (
                 <option key={v.id} value={v.id}>
@@ -185,12 +198,16 @@ function RealtimeChat({
 
   const sessionConfig = useMemo(
     () => ({
-      instructions:
-        'You are a helpful assistant. Be concise. ' +
-        'You have access to tools for weather and dice rolling.',
-      inputAudioTranscription: {},
-      voice,
-      turnDetection: { type: 'server-vad' as const },
+      ...(config.usesAgentConfiguration
+        ? {}
+        : {
+            instructions:
+              'You are a helpful assistant. Be concise. ' +
+              'You have access to tools for weather and dice rolling.',
+            inputAudioTranscription: {},
+            ...(voice ? { voice } : {}),
+            turnDetection: { type: 'server-vad' as const },
+          }),
       ...config.sessionConfigOverrides,
     }),
     [voice, config],

examples/ai-e2e-next/package.json

@@ -14,6 +14,7 @@
     "@ai-sdk/azure": "workspace:*",
     "@ai-sdk/cohere": "workspace:*",
     "@ai-sdk/deepseek": "workspace:*",
+    "@ai-sdk/elevenlabs": "workspace:*",
     "@ai-sdk/fireworks": "workspace:*",
     "@ai-sdk/google": "workspace:*",
     "@ai-sdk/google-vertex": "workspace:*",