evanbacon/grok-voice-demo

Grok Voice Agents Demo is a ready-to-run example app built with Expo, the popular framework for creating iOS, Android, and web apps from a single TypeScript codebase. It shows how to build a real-time voice chat interface powered by xAI's Grok voice agent API, which lets users speak to an AI and hear spoken responses back. The app works like a standard chat interface, but with a microphone button that activates a live voice session. Spoken turns stream into the same message list as text messages in real time, and the AI's voice replies play back through the device speakers. The connection runs over a WebSocket, and the server handles detecting when the user stops talking so turns flow naturally without a manual button press to switch sides. The audio layer is split by platform under a shared interface: the browser version uses the Web Audio API built into modern browsers, while iOS and Android use a React Native audio library with hardware echo cancellation so the AI does not hear its own output looping back through the microphone. For security, the app's server side exchanges your long-lived API key for a short-lived token before the client opens the voice connection, so the real key never reaches the user's device. On top of the voice feature, the demo includes a full text chat UI, voice and personality settings, a collapsible sidebar for web, swipe-driven navigation drawers for mobile, a markdown renderer for AI responses, dark mode via CSS design tokens, and iOS 26 Liquid Glass visual effects. It is a full-featured reference template, not a minimal proof of concept. Setup requires an xAI API key plus Bun and the Expo CLI installed. Testing the voice feature on iOS requires a physical device because echo cancellation only works on real hardware. The project is MIT licensed and was created as a template for the Expo agent platform.