vowel-react
Vowel React Integration
Initialize a vowel.to voice agent in a React application with proper navigation, state management, and custom actions.
What is Vowel?
vowel (lowercase) is a SaaS platform that adds AI-powered voice agents to web applications. The @vowel.to/client package provides real-time voice interaction via Gemini Live API, OpenAI Realtime API, or vowel-prime. Key capabilities: smart navigation (voice-controlled routing), custom actions (business logic via voice), and optional page automation (DOM interaction). For React apps, prefer state-driven custom actions over DOM automation.
Languages: Of 99+ Whisper languages (client VAD), only those Inworld TTS can speak are supported (12: en, es, fr, de, it, pt, ko, zh, ja, nl, pl, ru). AssemblyAI (server VAD) supports 6. VAD: client_vad (default), server_vad, semantic_vad, disabled. Connection models: hosted flow using apiKey or legacy appId (same token issuer field), tokenProvider, or direct voiceConfig.token, with advanced recipes such as sidecar and trusted server connections layered on top. See references/platform-overview.md, references/languages-and-vad.md, references/connection-paradigms.md.
Overview
This skill provides complete guidance for integrating vowel.to voice agents into React applications. It covers:
More from usevowel/skills
vowel-webcomponent
Initialize vowel.to via the <vowel-voice-widget> web component for framework-agnostic integration. Use when adding a drop-in voice widget to any site and wiring custom actions/events after readiness.
8vowel-vanilla
Initialize vowel.to voice agent in vanilla JavaScript applications (no React) using standalone bundles or module imports, direct/controlled adapters, and custom actions. Use when integrating voice into plain JS SPAs or traditional multi-page sites.
5voweldocs
Add the branded VowelDocs voice-agent paradigm to supported documentation frameworks, especially Astro Starlight projects. Use this when embedding or maintaining the shipped VowelDocs experience in docs, including canonical route maps, SPA navigation adapters, credential modal UI, session/audio persistence, and framework-specific lifecycle workarounds.
3vowel-client
Core @vowel.to/client knowledge shared by all framework skills. Covers installation, connection paradigms (apiKey/appId/tokenProvider/direct token), voiceConfig reference (provider, model, voice, language, STT/TTS overrides, VAD, turn detection), adapter patterns, custom actions, context management, and environment variables. Framework-specific skills (vowel-react, vowel-vanilla, vowel-webcomponent) instruct agents to load this file first.
1