vowel-client
Vowel Client Library
Core reference for @vowel.to/client. Framework-specific skills (vowel-react, vowel-vanilla, vowel-webcomponent) assume you have read this file first.
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 vowel-prime, Gemini Live API, or OpenAI Realtime API. Key capabilities: smart navigation (voice-controlled routing), custom actions (business logic via voice), and optional page automation (DOM interaction).
Connection Paradigms
The client supports these top-level connection models:
- Hosted / platform token issuer — pass
apiKey(preferred,vkey_*format) or legacyappId. Optionally setconvexUrlortokenEndpointto override the default hosted URL. - Token-based flow —
tokenProvidercallback or pre-issuedvoiceConfig.tokenfor server-managed sessions. - Direct WebSocket — raw
voiceConfig.tokenpointing to a Vowel Engine WebSocket. Seedocs/recipes/connection-paradigms.mdfor advanced patterns (sidecar, trusted server, fixed API keys).
apiKey and appId are aliases for the token issuer identifier. Prefer apiKey in new code.
Installation
More from usevowel/skills
vowel-react
Initialize vowel.to voice agent in React applications (React 19+, Next.js, TanStack Router, React Router) with complete setup including adapters, providers, and custom actions. Use when setting up voice agent integration, configuring navigation adapters, implementing custom voice actions, or integrating state management with voice AI. Covers context-ready initialization (deferred setAppId, loading gate, buildVowelContext, getGameState fallback), apiKey-first token issuer identifiers (appId is a legacy alias), and optional convexUrl/tokenEndpoint overrides. Next.js notes include NEXT_PUBLIC_VOWEL_APP_ID (not VOWEL_APP_ID alone), import { Vowel } from @vowel.to/client (not window.Vowel without the standalone bundle), and keeping VowelProvider client in React state. The skill emphasizes writing to app stores rather than DOM manipulation, with automation harness disabled by default.
12vowel-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.
3