--- title: "Talk to Your AI: Realtime Voice Chat in TanStack AI" url: https://daily.dev/posts/talk-to-your-ai-realtime-voice-chat-in-tanstack-ai-ljdgqfvg6 source_url: https://tanstack.com/blog/tanstack-ai-realtime-voice-chat type: article source: "TanStack" published: 2026-08-23T12:24:03.866Z updated: 2026-08-23T12:57:22.154Z tags: ["react", "openai", "webrtc", "voice-ai", "tanstack"] reading_time: 11 upvotes: 0 comments: 0 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Talk to Your AI: Realtime Voice Chat in TanStack AI **[TanStack](https://daily.dev/sources/tanstack-blog)** · 11 min read · 0 upvotes · 0 comments ## Summary TanStack AI now supports realtime voice conversations with a provider-agnostic architecture covering OpenAI Realtime (WebRTC) and ElevenLabs (WebSocket). It uses a token/connection split so API keys stay server-side while audio streams directly from browser to provider. A React hook, useRealtimeChat, manages connection lifecycle, audio capture/playback, voice activity detection (server, semantic, manual modes), client-side tool execution via toolDefinition(), multimodal input (text and images), audio visualization data, streaming transcripts, and interruption handling. A framework-agnostic RealtimeClient class is also provided for non-React usage. Example use cases include voice-controlled dashboards, multimodal support, language tutoring, accessibility interfaces, and field data collection. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I add realtime voice chat to a React app using TanStack AI? Use the useRealtimeChat hook from @tanstack/ai-react, passing a getToken function and an adapter like openaiRealtime() or elevenlabsRealtime(). The hook manages connection lifecycle, audio capture/playback, voice activity detection, transcripts, and tool execution automatically. Support covers OpenAI Realtime via WebRTC and ElevenLabs via WebSocket, with a token generated server-side to keep API keys safe. _Developers wiring up voice interfaces can track new library capabilities like this on daily.dev._ ### How do you keep your API key safe when building realtime voice chat that streams audio directly from the browser to a provider like OpenAI Realtime? Use a token/connection split: the server generates a short-lived token via a token adapter (such as openaiRealtimeToken or elevenlabsRealtimeToken) and returns only that token to the client, while the actual audio stream connects directly from browser to provider without passing through your server. This avoids exposing the raw API key while still supporting WebRTC, which cannot be proxied through a backend. _Teams evaluating voice AI architectures can compare token-based approaches like this via daily.dev._ ### What voice activity detection modes does TanStack AI support for realtime voice chat? Three modes are supported: server VAD, where the provider detects speech server-side and is the default; semantic VAD, available only for OpenAI, which uses the model's understanding of conversation flow with a semanticEagerness setting of low, medium, or high; and manual mode, where the developer controls start and stop via startListening() and stopListening(), useful for push-to-talk interfaces. _daily.dev helps developers comparing VAD strategies stay current on voice interface tooling._ --- Tags: [#react](https://daily.dev/tags/react), [#openai](https://daily.dev/tags/openai), [#webrtc](https://daily.dev/tags/webrtc), [#voice-ai](https://daily.dev/tags/voice-ai), [#tanstack](https://daily.dev/tags/tanstack) [View this post on daily.dev](https://daily.dev/posts/talk-to-your-ai-realtime-voice-chat-in-tanstack-ai-ljdgqfvg6)