+ {label}
+
+
+ )
+}
diff --git a/examples/ts-react-chat/src/components/Header.tsx b/examples/ts-react-chat/src/components/Header.tsx
index 652036c9e..0b28cbc48 100644
--- a/examples/ts-react-chat/src/components/Header.tsx
+++ b/examples/ts-react-chat/src/components/Header.tsx
@@ -156,6 +156,19 @@ export default function Header() {
+
+ )
+ case 'thinking':
+ return (
+
+
+ Thinking...
+
+ )
+ case 'speaking':
+ return (
+
+
+ )
+ default:
+ return (
+
+
+ )
+ }
+ }
+
+ return (
+
+
+ )
+}
+
+export const Route = createFileRoute('/realtime')({
+ component: RealtimePage,
+})
diff --git a/packages/typescript/ai-client/src/index.ts b/packages/typescript/ai-client/src/index.ts
index 6762a00bd..c30a9c3ad 100644
--- a/packages/typescript/ai-client/src/index.ts
+++ b/packages/typescript/ai-client/src/index.ts
@@ -1,4 +1,5 @@
export { ChatClient } from './chat-client'
+export { RealtimeClient } from './realtime-client'
export { GenerationClient } from './generation-client'
export { VideoGenerationClient } from './video-generation-client'
export type {
@@ -42,6 +43,13 @@ export type {
ExtractToolOutput,
} from './tool-types'
export type { AnyClientTool } from '@tanstack/ai'
+export type {
+ RealtimeAdapter,
+ RealtimeConnection,
+ RealtimeClientOptions,
+ RealtimeClientState,
+ RealtimeStateChangeCallback,
+} from './realtime-types'
export {
fetchServerSentEvents,
fetchHttpStream,
diff --git a/packages/typescript/ai-client/src/realtime-client.ts b/packages/typescript/ai-client/src/realtime-client.ts
new file mode 100644
index 000000000..2683294c0
--- /dev/null
+++ b/packages/typescript/ai-client/src/realtime-client.ts
@@ -0,0 +1,526 @@
+import { convertSchemaToJsonSchema } from '@tanstack/ai'
+import type {
+ AnyClientTool,
+ AudioVisualization,
+ RealtimeMessage,
+ RealtimeMode,
+ RealtimeStatus,
+ RealtimeToken,
+} from '@tanstack/ai'
+import type {
+ RealtimeClientOptions,
+ RealtimeClientState,
+ RealtimeConnection,
+ RealtimeStateChangeCallback,
+} from './realtime-types'
+
+// Token refresh buffer - refresh 1 minute before expiry
+const TOKEN_REFRESH_BUFFER_MS = 60_000
+
+/**
+ * Client for managing realtime voice conversations.
+ *
+ * Handles connection lifecycle, audio I/O, message state,
+ * and tool execution for realtime voice-to-voice AI interactions.
+ *
+ * @example
+ * ```typescript
+ * import { RealtimeClient } from '@tanstack/ai-client'
+ * import { openaiRealtime } from '@tanstack/ai-openai'
+ *
+ * const client = new RealtimeClient({
+ * getToken: () => fetch('/api/realtime-token').then(r => r.json()),
+ * adapter: openaiRealtime(),
+ * tools: [myTool.client(handler)],
+ * onMessage: (msg) => console.log('Message:', msg),
+ * })
+ *
+ * await client.connect()
+ * ```
+ */
+export class RealtimeClient {
+ private options: RealtimeClientOptions
+ private connection: RealtimeConnection | null = null
+ private token: RealtimeToken | null = null
+ private tokenRefreshTimeout: ReturnType
+ {/* Header */}
+
+
+
+
+ {/* Tools indicator */}
+ {provider === 'openai' && (
+
+
+
+ {/* Provider selector */}
+
+
+ {/* Status */}
+
+
+
+
+
+ {/* ElevenLabs Agent ID (conditional) */}
+ {provider === 'elevenlabs' && (
+
+
+ setAgentId(e.target.value)}
+ placeholder="Your ElevenLabs Agent ID"
+ disabled={status !== 'idle'}
+ className="rounded-lg border border-orange-500/20 bg-gray-900 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-orange-500/50 disabled:opacity-50 w-64"
+ />
+
+ )}
+
+ {/* Output mode selector (OpenAI only) */}
+ {provider === 'openai' && (
+
+
+
+
+ )}
+
+ {/* Temperature slider */}
+ {provider === 'openai' && (
+
+
+ setTemperature(parseFloat(e.target.value))}
+ disabled={status !== 'idle'}
+ className="w-24 accent-orange-500 disabled:opacity-50"
+ />
+
+ )}
+
+ {/* Semantic eagerness */}
+ {provider === 'openai' && (
+
+
+
+
+ )}
+
+
+
+
+
+ {status}
+
+
+ {getModeIndicator()}
+
+
+ )}
+
+ {/* Messages area */}
+
+
+
+ {messages.length === 0 && status === 'idle' && (
+
+
+ {/* Error display */}
+ {error && (
+
+
+ )}
+
+ {messages.map((message) => (
+ Voice Chat with Tools & Vision
++ Click "Start Conversation" to begin talking with the AI +
++ Try asking: "What time is it?" or "What's the weather?" — or + send an image! +
+
+
+ ))}
+
+ {/* Pending transcripts */}
+ {pendingUserTranscript && (
+
+ {message.role === 'assistant' ? (
+
+
+ AI
+
+ ) : (
+
+ U
+
+ )}
+
+ {message.parts.map((part, idx) => {
+ if (part.type === 'audio') {
+ return (
+ 
+ )
+ }
+ return null
+ })}
+ {message.interrupted && (
+
+ (interrupted)
+
+ )}
+
+ + {part.transcript} +
+ ) + } + if (part.type === 'text') { + return ( ++ {part.content} +
+ ) + } + if (part.type === 'image') { + const src = part.data.startsWith('http') + ? part.data + : `data:${part.mimeType};base64,${part.data}` + return ( +
+
+ )}
+
+ {pendingAssistantTranscript && (
+
+
+
+ U
+
+ {pendingUserTranscript}...
+
+
+ )}
+
+
+
+
+
+ AI
+
+ + {pendingAssistantTranscript}... +
+
+ Error: {error.message}
+
+ )}
+
+ {/* Text input */}
+ {status === 'connected' && (
+
+
+
+ )}
+
+ {/* Audio visualization & controls */}
+
+ {/* Volume meters and waveforms */}
+ {status === 'connected' && (
+
+
+ {/* Input (Microphone) */}
+
+ )}
+
+ {/* Controls */}
+
+
+ {/* Output (Speaker) */}
+
+
+
+
+ {Math.round(inputLevel * 100)}%
+
+
+
+
+
+
+
+ {Math.round(outputLevel * 100)}%
+
+
+ {status === 'idle' ? (
+
+ ) : (
+ <>
+ {mode === 'speaking' && (
+
+ )}
+
+
+ )}
+
+
+
+ )
+}
+```
+
+## Environment Variables
+
+Set `ELEVENLABS_API_KEY` in your environment for server-side token generation.
+
+## Requirements
+
+- ElevenLabs account with Conversational AI agent configured
+- Agent ID from ElevenLabs dashboard
+
+## License
+
+MIT
diff --git a/packages/typescript/ai-elevenlabs/package.json b/packages/typescript/ai-elevenlabs/package.json
new file mode 100644
index 000000000..4ff1754e8
--- /dev/null
+++ b/packages/typescript/ai-elevenlabs/package.json
@@ -0,0 +1,55 @@
+{
+ "name": "@tanstack/ai-elevenlabs",
+ "version": "0.0.1",
+ "description": "ElevenLabs adapter for TanStack AI realtime voice",
+ "author": "",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/TanStack/ai.git",
+ "directory": "packages/typescript/ai-elevenlabs"
+ },
+ "keywords": [
+ "ai",
+ "elevenlabs",
+ "voice",
+ "realtime",
+ "tanstack",
+ "adapter"
+ ],
+ "type": "module",
+ "module": "./dist/esm/index.js",
+ "types": "./dist/esm/index.d.ts",
+ "exports": {
+ ".": {
+ "types": "./dist/esm/index.d.ts",
+ "import": "./dist/esm/index.js"
+ }
+ },
+ "files": [
+ "dist",
+ "src"
+ ],
+ "scripts": {
+ "build": "vite build",
+ "clean": "premove ./build ./dist",
+ "lint:fix": "eslint ./src --fix",
+ "test:build": "publint --strict",
+ "test:eslint": "eslint ./src",
+ "test:lib": "vitest --passWithNoTests",
+ "test:lib:dev": "pnpm test:lib --watch",
+ "test:types": "tsc"
+ },
+ "dependencies": {
+ "@11labs/client": "^0.2.0"
+ },
+ "peerDependencies": {
+ "@tanstack/ai": "workspace:^",
+ "@tanstack/ai-client": "workspace:^"
+ },
+ "devDependencies": {
+ "@tanstack/ai": "workspace:*",
+ "@tanstack/ai-client": "workspace:*",
+ "@vitest/coverage-v8": "4.0.14"
+ }
+}
diff --git a/packages/typescript/ai-elevenlabs/src/index.ts b/packages/typescript/ai-elevenlabs/src/index.ts
new file mode 100644
index 000000000..8f3789e84
--- /dev/null
+++ b/packages/typescript/ai-elevenlabs/src/index.ts
@@ -0,0 +1,13 @@
+// ============================================================================
+// ElevenLabs Realtime (Voice) Adapters
+// ============================================================================
+
+export { elevenlabsRealtimeToken, elevenlabsRealtime } from './realtime/index'
+
+export type {
+ ElevenLabsRealtimeTokenOptions,
+ ElevenLabsRealtimeOptions,
+ ElevenLabsConversationMode,
+ ElevenLabsVADConfig,
+ ElevenLabsClientTool,
+} from './realtime/index'
diff --git a/packages/typescript/ai-elevenlabs/src/realtime/adapter.ts b/packages/typescript/ai-elevenlabs/src/realtime/adapter.ts
new file mode 100644
index 000000000..33bc5344e
--- /dev/null
+++ b/packages/typescript/ai-elevenlabs/src/realtime/adapter.ts
@@ -0,0 +1,300 @@
+import { Conversation } from '@11labs/client'
+import type {
+ AnyClientTool,
+ AudioVisualization,
+ RealtimeEvent,
+ RealtimeEventHandler,
+ RealtimeMessage,
+ RealtimeMode,
+ RealtimeSessionConfig,
+ RealtimeStatus,
+ RealtimeToken,
+} from '@tanstack/ai'
+import type { RealtimeAdapter, RealtimeConnection } from '@tanstack/ai-client'
+import type { ElevenLabsRealtimeOptions } from './types'
+
+/**
+ * Creates an ElevenLabs realtime adapter for client-side use.
+ *
+ * Wraps the @11labs/client SDK for voice conversations.
+ *
+ * @param options - Optional configuration
+ * @returns A RealtimeAdapter for use with RealtimeClient
+ *
+ * @example
+ * ```typescript
+ * import { RealtimeClient } from '@tanstack/ai-client'
+ * import { elevenlabsRealtime } from '@tanstack/ai-elevenlabs'
+ *
+ * const client = new RealtimeClient({
+ * getToken: () => fetch('/api/realtime-token').then(r => r.json()),
+ * adapter: elevenlabsRealtime(),
+ * })
+ * ```
+ */
+export function elevenlabsRealtime(
+ options: ElevenLabsRealtimeOptions = {},
+): RealtimeAdapter {
+ return {
+ provider: 'elevenlabs',
+
+ async connect(
+ token: RealtimeToken,
+ clientToolDefs?: ReadonlyArrayStatus: {status}
+Mode: {mode}
+ +
+ *
+ * )
+ * }
+ * ```
+ */
+export function useRealtimeChat(
+ options: UseRealtimeChatOptions,
+): UseRealtimeChatReturn {
+ // State
+ const [status, setStatus] = useStateStatus: {status}
+ *Mode: {mode}
+ * + *