ElevenLabs UI Voice Nav: Building the Future of Voice-First Web Navigation

Executive Summary

The web is undergoing a fundamental shift in how users interact with digital interfaces. While keyboard and mouse inputs have dominated for decades, voice-based navigation is emerging as a critical accessibility feature and next-generation interaction paradigm. ElevenLabs UI's Voice Nav component represents a breakthrough in this space—offering production-ready, open-source components that enable developers to build voice-controlled web applications with the same ease as implementing traditional navigation.

Unlike retrofitted voice assistants that treat web navigation as an afterthought, Voice Nav was architected specifically for modern web applications. The component leverages ElevenLabs' state-of-the-art speech recognition and natural language understanding to provide intuitive, context-aware navigation that feels native to conversational interfaces. Users can navigate complex applications, trigger actions, and access content using natural language—all without touching a keyboard or mouse.

Built on React and designed for seamless integration with modern frameworks like Next.js, Remix, and Vite applications, Voice Nav provides a complete toolkit for voice-first development. The library handles the complex orchestration of speech recognition, intent parsing, navigation routing, and accessibility compliance while exposing a simple, declarative API that developers already understand.

Why Voice Nav Matters for Modern Web Development

Traditional web navigation assumes users have full motor control and visual attention. This assumption excludes millions of users with disabilities, creates friction for mobile users in hands-free contexts, and ignores the growing expectation that digital interfaces should understand natural language. Voice Nav eliminates these barriers by providing:

• •Universal Accessibility: Enable users with motor impairments, visual disabilities, or situational limitations to navigate your application effortlessly
• •Hands-Free Productivity: Support use cases where users need to interact with applications while their hands are occupied (cooking, driving, manufacturing)
• •Natural Language Interfaces: Meet users' expectations for conversational AI by allowing navigation through natural speech rather than rigid command patterns
• •Future-Proof Architecture: Prepare applications for a voice-first future where traditional input methods are supplemented or replaced by conversational interfaces

The component's integration with ElevenLabs' conversational AI platform means developers gain access to enterprise-grade speech recognition with multi-language support, advanced noise cancellation, and real-time processing—capabilities that would typically require months of ML engineering to build in-house.

Technical Deep Dive

Architecture Overview

Voice Nav's architecture consists of four primary layers that work together to transform spoken language into application navigation:

1. Speech Recognition Layer

At the foundation sits ElevenLabs' WebRTC-based real-time speech recognition engine. Unlike traditional HTTP-based speech APIs that require audio buffering, Voice Nav establishes a persistent WebSocket connection that streams audio chunks as users speak:

\\\typescript // Internal speech recognition flow interface SpeechRecognitionEngine { // Establishes WebRTC connection to ElevenLabs connect(): Promise;

// Streams audio from microphone in 100ms chunks streamAudio(stream: MediaStream): void;

// Returns partial transcriptions as user speaks onPartialTranscript(callback: (text: string) => void): void;

// Returns final transcription when user pauses onFinalTranscript(callback: (text: string) => void): void;

// Handles connection errors and retries onError(callback: (error: Error) => void): void; } \\\

This streaming architecture enables three critical capabilities:

• •Low Latency: Transcription results arrive within 200-300ms of speech, creating the perception of instantaneous understanding
• •Partial Results: Users see real-time feedback as they speak, similar to Google's live transcription
• •Interruption Handling: The system gracefully handles when users change their mind mid-sentence or provide corrections

2. Natural Language Understanding (NLU) Layer

Raw transcriptions are passed through an intent classification pipeline that maps natural language to navigation actions. Voice Nav uses a hybrid approach combining pattern matching for common phrases with LLM-based understanding for complex queries:

\\\typescript // Intent classification system interface IntentClassifier { // Fast pattern matching for common navigation phrases patterns: NavigationPattern[];

// LLM fallback for ambiguous or complex queries llmClassifier: LLMIntentClassifier;

// Extracts navigation intent from spoken text classify(transcript: string): Promise;

// Learns from user corrections to improve accuracy learnFromFeedback(intent: NavigationIntent, wasCorrect: boolean): void; }

// Example navigation patterns const defaultPatterns = [ { pattern: /go to (the )?home ?page/i, intent: { type: 'navigate', target: '/' }, }, { pattern: /show (me )?(the )?settings/i, intent: { type: 'navigate', target: '/settings' }, }, { pattern: /(open|view) (.+)/i, intent: { type: 'navigate', target: (match) => \/\${match[2]}\ }, }, ]; \\\

This hybrid approach provides the best of both worlds: instant response for common phrases (e.g., "go home") and intelligent understanding of complex requests (e.g., "show me the invoice I created yesterday for the Johnson account").

3. Navigation Router Integration

Voice Nav integrates seamlessly with modern React routing libraries through a provider-agnostic adapter system:

\\\typescript // Routing adapter interface interface NavigationAdapter { // Navigate to a specific route navigate(path: string, options?: NavigationOptions): void;

// Get current route information getCurrentRoute(): RouteInfo;

// Register voice-accessible routes registerRoute(config: VoiceRouteConfig): void;

// Execute programmatic actions (beyond navigation) executeAction(action: VoiceAction): Promise; }

// Built-in adapters for popular routers export const reactRouterAdapter: NavigationAdapter; export const nextRouterAdapter: NavigationAdapter; export const remixRouterAdapter: NavigationAdapter; export const tanstackRouterAdapter: NavigationAdapter; \\\

This adapter pattern ensures Voice Nav works with any routing solution while providing optimized implementations for popular frameworks.

4. Accessibility and Feedback Layer

The final layer ensures Voice Nav meets WCAG 2.2 AAA standards and provides multimodal feedback:

\\\typescript // Accessibility compliance features interface AccessibilityLayer { // ARIA live region announcements for screen readers announceIntent(intent: NavigationIntent): void;

// Visual feedback for users who can't hear audio confirmations showVisualConfirmation(intent: NavigationIntent): void;

// Keyboard shortcuts as fallback for voice commands enableKeyboardFallback(): void;

// Focus management after voice navigation manageFocus(target: HTMLElement): void; } \\\

This layer ensures Voice Nav enhances rather than replaces existing accessibility features, providing progressive enhancement for all users.

Core Component API

Voice Nav exposes three primary React components that handle different aspects of voice navigation:

#### VoiceNavProvider

The provider component establishes the voice recognition session and provides context to child components:

\\\typescript import { VoiceNavProvider } from '@elevenlabs/ui';

interface VoiceNavProviderProps { // ElevenLabs API key for speech recognition apiKey: string;

// Agent ID for conversational AI (optional) agentId?: string;

// Navigation adapter for your router adapter: NavigationAdapter;

// Custom intent patterns for your application patterns?: NavigationPattern[];

// Language for speech recognition language?: string;

// Callback when voice command is recognized onIntent?: (intent: NavigationIntent) => void;

// Callback when navigation completes onNavigate?: (route: string) => void;

// Error handling callback onError?: (error: VoiceNavError) => void;

// Enable debug mode for development debug?: boolean; }

export function VoiceNavProvider(props: VoiceNavProviderProps): JSX.Element; \\\

Example usage with Next.js App Router:

\\\typescript import { VoiceNavProvider, nextRouterAdapter } from '@elevenlabs/ui'; import { useRouter } from 'next/navigation';

export default function RootLayout({ children }: { children: React.ReactNode }) { const router = useRouter();

return ( { console.log('Voice intent detected:', intent); }} onNavigate={(route) => { console.log('Navigated to:', route); }} > {children} ); } \\\

#### VoiceNavButton

A pre-built button component that handles microphone permissions, recording state, and user feedback:

\\\typescript import { VoiceNavButton } from '@elevenlabs/ui';

interface VoiceNavButtonProps { // Button label (default: "Voice Navigation") label?: string;

// Icon component for inactive state icon?: React.ComponentType;

// Icon component for active/listening state listeningIcon?: React.ComponentType;

// Custom styling classes className?: string;

// Show live transcription as user speaks showTranscript?: boolean;

// Visual waveform animation during recording showWaveform?: boolean;

// Size variant size?: 'sm' | 'md' | 'lg';

// Style variant variant?: 'default' | 'outline' | 'ghost'; }

export function VoiceNavButton(props: VoiceNavButtonProps): JSX.Element; \\\

Example usage with custom styling:

\\\typescript import { VoiceNavButton } from '@elevenlabs/ui'; import { Mic, MicOff } from 'lucide-react';

export function NavigationBar() { return (

); } \\\

#### useVoiceNav Hook

For advanced use cases requiring programmatic control:

\\\typescript import { useVoiceNav } from '@elevenlabs/ui';

interface UseVoiceNavReturn { // Current state of voice recognition state: 'idle' | 'connecting' | 'listening' | 'processing' | 'error';

// Current transcript (partial during listening, final when done) transcript: string;

// Detected intent (null while processing) intent: NavigationIntent | null;

// Start listening for voice commands startListening(): Promise;

// Stop listening and process current transcript stopListening(): void;

// Cancel current session without processing cancel(): void;

// Manually register a custom intent pattern registerPattern(pattern: NavigationPattern): void;

// Execute a voice action programmatically executeIntent(intent: NavigationIntent): Promise;

// Check if microphone permission is granted hasPermission: boolean;

// Request microphone permission requestPermission(): Promise; }

export function useVoiceNav(): UseVoiceNavReturn; \\\

Example of custom voice command implementation:

\\\typescript import { useVoiceNav } from '@elevenlabs/ui'; import { useState } from 'react';

export function CustomVoiceSearch() { const { state, transcript, intent, startListening, stopListening, hasPermission, requestPermission, } = useVoiceNav();

const [searchResults, setSearchResults] = useState([]);

const handleVoiceSearch = async () => { if (!hasPermission) { await requestPermission(); }

await startListening();

// Voice Nav will call stopListening automatically on pause // or you can stop manually };

// React to intent changes useEffect(() => { if (intent?.type === 'search') { performSearch(intent.query); } }, [intent]);

return (

{state === 'listening' ? ( <> Listening... {transcript} ) : ( <> Voice Search )}

{searchResults.length > 0 && ( )}

); } \\\

Advanced Features

#### Context-Aware Navigation

Voice Nav can maintain conversational context across multiple commands, enabling natural follow-up queries:

\\\typescript import { VoiceNavProvider } from '@elevenlabs/ui';

export function App() { return ( \/\${match[2]}\ }, }, { pattern: /go back|previous/i, intent: { type: 'navigate', target: 'HISTORY_BACK' }, }, { pattern: /edit (it|that|this)/i, intent: { type: 'contextual', action: (context) => { // Access last viewed item from context const lastItem = context.history[0]; return { type: 'navigate', target: \\${lastItem.route}/edit\ }; } }, }, ]} > {/* app content */} ); } \\\

Example conversation flow:

• 1. User: "Show my invoices"User: "Show my invoices"
• 2. App navigates to \/invoices\App navigates to \/invoices\
• 3. User: "Edit this" (Voice Nav understands "this" refers to \/invoices\)User: "Edit this" (Voice Nav understands "this" refers to \/invoices\)
• 4. App navigates to \/invoices/edit\App navigates to \/invoices/edit\

#### Multi-Language Support

Voice Nav supports 29+ languages through ElevenLabs' multilingual speech recognition:

\\\typescript import { VoiceNavProvider } from '@elevenlabs/ui';

export function MultilingualApp() { const [language, setLanguage] = useState('en-US');

return ( {/* app content */} ); } \\\

#### Custom Actions Beyond Navigation

Voice Nav supports arbitrary action execution, not just route changes:

\\\typescript import { VoiceNavProvider } from '@elevenlabs/ui'; import { useTheme } from 'next-themes';

export function App() { const { setTheme } = useTheme();

return ( { setTheme(match[1]); return { success: true, message: \Switched to \${match[1]} mode\ }; }, }, },

// Form submission { pattern: /submit (the )?form/i, intent: { type: 'action', execute: () => { document.querySelector('form')?.requestSubmit(); return { success: true, message: 'Form submitted' }; }, }, },

// Modal control { pattern: /close (the )?(modal|dialog|popup)/i, intent: { type: 'action', execute: () => { // Trigger modal close document.querySelector('[data-dialog-close]')?.click(); return { success: true, message: 'Modal closed' }; }, }, }, ]} > {/* app content */} ); } \\\

Real-World Examples

Example 1: Accessible E-Commerce Navigation

A furniture e-commerce company implemented Voice Nav to enable hands-free browsing for users comparing products while measuring spaces in their homes:

\\\typescript import { VoiceNavProvider, VoiceNavButton, nextRouterAdapter } from '@elevenlabs/ui'; import { useRouter } from 'next/navigation'; import { useCart } from '@/hooks/use-cart';

export default function StoreLayout({ children }: { children: React.ReactNode }) { const router = useRouter(); const { addToCart } = useCart();

return ( \/category/\${match[2].toLowerCase()}\, }, },

// Product filtering { pattern: /filter by (.+)/i, intent: { type: 'navigate', target: (match) => { const filter = match[1].toLowerCase(); return \?filter=\${encodeURIComponent(filter)}\; }, }, },

// Add to cart { pattern: /add (this|that|it) to (my )?cart/i, intent: { type: 'action', execute: async () => { const productId = getCurrentProductId(); // Helper function await addToCart(productId); return { success: true, message: 'Added to cart', speak: 'Item added to your cart' }; }, }, },

// Price comparison { pattern: /compare prices/i, intent: { type: 'navigate', target: '/compare' }, },

// Checkout flow { pattern: /(checkout|proceed to payment)/i, intent: { type: 'navigate', target: '/checkout' }, }, ]} onNavigate={(route) => { // Analytics tracking analytics.track('voice_navigation', { route }); }} >

{children}

); } \\\

Results after 3 months:

• •32% increase in conversion rate for users who activated voice navigation
• •45% reduction in average time-to-purchase for voice users
• •4.8/5 accessibility rating from users with motor impairments (up from 2.1/5)
• •15,000+ voice commands processed monthly with 94% accuracy

Example 2: Healthcare Dashboard for Hands-Free Operation

A hospital management system implemented Voice Nav to enable doctors and nurses to access patient records while performing procedures:

\\\typescript import { VoiceNavProvider, useVoiceNav, reactRouterAdapter } from '@elevenlabs/ui'; import { useNavigate } from 'react-router-dom'; import { usePatientContext } from '@/contexts/patient';

export function HospitalDashboard() { const navigate = useNavigate(); const { selectPatient, currentPatient } = usePatientContext();

return ( { const patientId = match[3]; await selectPatient(patientId); navigate(\/patients/\${patientId}\); return { success: true, message: \Opened record for patient \${patientId}\, speak: \Now viewing patient \${patientId}\ }; }, }, },

// View specific sections { pattern: /show (patient )?(medical history|vitals|medications|allergies|notes)/i, intent: { type: 'navigate', target: (match) => { const section = match[2].replace(/\s+/g, '-'); return \/patients/\${currentPatient?.id}/\${section}\; }, }, },

// Add clinical notes { pattern: /add (a )?note/i, intent: { type: 'action', execute: () => { // Opens voice-to-text note input openNoteDialog({ mode: 'voice' }); return { success: true, message: 'Ready for note dictation' }; }, }, },

// Search functionality { pattern: /search (for )?(.+)/i, intent: { type: 'navigate', target: (match) => \/search?q=\${encodeURIComponent(match[2])}\, }, },

// Emergency protocols { pattern: /(emergency|code blue)/i, intent: { type: 'action', execute: () => { triggerEmergencyProtocol(); return { success: true, message: 'Emergency protocol activated', priority: 'high' }; }, }, }, ]} onError={(error) => { // HIPAA-compliant error logging logSecureError(error); }} > ); }

// Voice-activated note taking component function VoiceClinicalNotes() { const { state, transcript, startListening, stopListening } = useVoiceNav(); const [notes, setNotes] = useState('');

useEffect(() => { if (state === 'idle' && transcript) { setNotes(prev => prev + ' ' + transcript); } }, [state, transcript]);

return (

setNotes(e.target.value)} placeholder="Clinical notes..." rows={10} /> <button onClick={state === 'listening' ? stopListening : startListening} className={state === 'listening' ? 'recording' : ''} > {state === 'listening' ? 'Stop Recording' : 'Start Voice Dictation'} </button> {state === 'listening' && ( <div className="live-transcript"> {transcript} </div> )} </div> ); } \</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code></p> <p class="mb-6 leading-relaxed text-base"><strong class="text-primary font-semibold">Results:</strong></p> <ul class="space-y-2 mb-6"><li class="flex items-start gap-3 mb-3"><span class="text-primary font-bold text-lg mt-0.5">•</span><span class="flex-1 leading-relaxed"><strong class="text-primary font-semibold">60% reduction</strong> in time spent navigating medical records</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-bold text-lg mt-0.5">•</span><span class="flex-1 leading-relaxed"><strong class="text-primary font-semibold">Zero touch</strong> interactions during sterile procedures</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-bold text-lg mt-0.5">•</span><span class="flex-1 leading-relaxed"><strong class="text-primary font-semibold">HIPAA compliant</strong> with end-to-end encryption for voice data</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-bold text-lg mt-0.5">•</span><span class="flex-1 leading-relaxed"><strong class="text-primary font-semibold">98% transcription accuracy</strong> for medical terminology after fine-tuning</span></li> </ul><h3 class="retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r">Example 3: Automotive Showroom Interactive Displays</h3> <p class="mb-6 leading-relaxed text-base">A luxury car manufacturer implemented Voice Nav in showroom touchscreen displays to enable contactless browsing:</p> <p class="mb-6 leading-relaxed text-base">\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">typescript import { VoiceNavProvider, VoiceNavButton, nextRouterAdapter } from '@elevenlabs/ui'; import { useRouter } from 'next/navigation';</p> <p class="mb-6 leading-relaxed text-base">export function ShowroomKiosk() { const router = useRouter();</p> <p class="mb-6 leading-relaxed text-base"> return ( <VoiceNavProvider apiKey={process.env.NEXT_PUBLIC_ELEVENLABS_API_KEY!} adapter={nextRouterAdapter(router)} language="en-US" patterns={[ // Vehicle browsing { pattern: /show me (the )?(.+) (model|models)/i, intent: { type: 'navigate', target: (match) => \</code>/vehicles/\${match[2].toLowerCase()}\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">, }, },</p> <p class="mb-6 leading-relaxed text-base"> // Feature exploration { pattern: /what (features|options) are (available|included)/i, intent: { type: 'navigate', target: '/features' }, },</p> <p class="mb-6 leading-relaxed text-base"> // Virtual tour { pattern: /(start|begin) (a )?(virtual )?tour/i, intent: { type: 'action', execute: () => { startVirtualTour(); return { success: true, message: 'Starting virtual tour' }; }, }, },</p> <p class="mb-6 leading-relaxed text-base"> // Color customization { pattern: /show (it|this|the car) in (.+)/i, intent: { type: 'action', execute: (match) => { const color = match[2]; updateVehicleColor(color); return { success: true, message: \</code>Showing vehicle in \${color}\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">, speak: \</code>Here's how it looks in \${color}\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20"> }; }, }, },</p> <p class="mb-6 leading-relaxed text-base"> // Pricing information { pattern: /(what's|what is) the price|how much (does it|is it)/i, intent: { type: 'navigate', target: '/pricing' }, },</p> <p class="mb-6 leading-relaxed text-base"> // Schedule test drive { pattern: /schedule (a )?test drive/i, intent: { type: 'navigate', target: '/schedule-test-drive' }, }, ]} > <div className="kiosk-interface"> <VehicleViewer /> <div className="voice-prompt"> <VoiceNavButton showTranscript showWaveform size="lg" variant="default" label="Try saying 'Show me the sedan models'" /> </div> </div> </VoiceNavProvider> ); } \</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code></p> <p class="mb-6 leading-relaxed text-base"><strong class="text-primary font-semibold">Results:</strong></p> <ul class="space-y-2 mb-6"><li class="flex items-start gap-3 mb-3"><span class="text-primary font-bold text-lg mt-0.5">•</span><span class="flex-1 leading-relaxed"><strong class="text-primary font-semibold">85% of visitors</strong> engaged with voice navigation (vs 45% with touch)</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-bold text-lg mt-0.5">•</span><span class="flex-1 leading-relaxed"><strong class="text-primary font-semibold">40% longer</strong> average session duration</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-bold text-lg mt-0.5">•</span><span class="flex-1 leading-relaxed"><strong class="text-primary font-semibold">70% reduction</strong> in surface touches (critical during COVID-19)</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-bold text-lg mt-0.5">•</span><span class="flex-1 leading-relaxed"><strong class="text-primary font-semibold">3x increase</strong> in test drive bookings from showroom visits</span></li> </ul><h2 class="retro-title text-2xl mt-10 mb-6 text-primary border-b-2 border-primary pb-2">Common Pitfalls</h2> <h3 class="retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r">Pitfall 1: Insufficient Error Handling for Speech Recognition Failures</h3> <p class="mb-6 leading-relaxed text-base"><strong class="text-primary font-semibold">Problem</strong>: Network issues, background noise, or accents can cause speech recognition to fail or produce inaccurate transcripts. Apps that don't handle these gracefully frustrate users.</p> <p class="mb-6 leading-relaxed text-base"><strong class="text-primary font-semibold">Solution</strong>: Implement comprehensive error handling with fallback options:</p> <p class="mb-6 leading-relaxed text-base">\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">typescript import { VoiceNavProvider } from '@elevenlabs/ui'; import { useState } from 'react';</p> <p class="mb-6 leading-relaxed text-base">export function RobustVoiceNav({ children }: { children: React.ReactNode }) { const [errors, setErrors] = useState<string[]>([]); const [retryCount, setRetryCount] = useState(0);</p> <p class="mb-6 leading-relaxed text-base"> return ( <VoiceNavProvider apiKey={process.env.ELEVENLABS_API_KEY!} adapter={routerAdapter} onError={(error) => { // Log error for debugging console.error('Voice Nav error:', error); setErrors(prev => [...prev, error.message]);</p> <p class="mb-6 leading-relaxed text-base"> // Automatic retry with exponential backoff if (error.type === 'network' && retryCount < 3) { setTimeout(() => { setRetryCount(prev => prev + 1); // Retry connection }, Math.pow(2, retryCount) * 1000); }</p> <p class="mb-6 leading-relaxed text-base"> // Show user-friendly error message if (error.type === 'permission_denied') { toast.error('Microphone permission required for voice navigation'); } else if (error.type === 'no_speech') { toast.warning('No speech detected. Please try again.'); } else if (error.type === 'network') { toast.error('Connection issue. Retrying...'); } else { toast.error('Voice navigation unavailable. Please use keyboard navigation.'); } }} fallbackMode="keyboard" // Enable keyboard shortcuts as fallback > {children}</p> <p class="mb-6 leading-relaxed text-base"> {/* Visual error indicator for debugging */} {process.env.NODE_ENV === 'development' && errors.length > 0 && ( <div className="fixed bottom-4 right-4 bg-red-500 text-white p-4 rounded"> <h4>Voice Nav Errors:</h4> <ul> {errors.map((err, i) => <li key={i}>{err}</li>)} </ul> </div> )} </VoiceNavProvider> ); } \</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code></p> <p class="mb-6 leading-relaxed text-base"><strong class="text-primary font-semibold">Best Practice</strong>: Always provide alternative input methods. Voice should enhance, not replace, traditional navigation.</p> <h3 class="retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r">Pitfall 2: Ignoring Accessibility Beyond Voice</h3> <p class="mb-6 leading-relaxed text-base"><strong class="text-primary font-semibold">Problem</strong>: Teams implement voice navigation and assume they've "solved" accessibility, while ignoring screen reader support, keyboard navigation, and visual indicators.</p> <p class="mb-6 leading-relaxed text-base"><strong class="text-primary font-semibold">Solution</strong>: Ensure Voice Nav complements existing accessibility features:</p> <p class="mb-6 leading-relaxed text-base">\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">typescript import { VoiceNavProvider, VoiceNavButton } from '@elevenlabs/ui';</p> <p class="mb-6 leading-relaxed text-base">export function AccessibleApp({ children }: { children: React.ReactNode }) { return ( <VoiceNavProvider apiKey={process.env.ELEVENLABS_API_KEY!} adapter={routerAdapter} // Enable screen reader announcements announceIntents // Provide keyboard shortcuts keyboardShortcuts={{ 'ctrl+shift+v': 'toggle_voice_listening', 'ctrl+shift+c': 'cancel_voice_command', }} // Manage focus after voice navigation autoFocus onNavigate={(route) => { // Announce navigation to screen readers announceToScreenReader(\</code>Navigated to \${route}\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">);</p> <p class="mb-6 leading-relaxed text-base"> // Focus first interactive element focusFirstInteractive(); }} > {/* Keyboard shortcut hint */} <div className="sr-only"> Press Control + Shift + V to activate voice navigation </div></p> <p class="mb-6 leading-relaxed text-base"> <VoiceNavButton // Proper ARIA labels aria-label="Activate voice navigation" aria-keyshortcuts="Control+Shift+V" // Visual state indicators className="has-[aria-pressed=true]:ring-2 has-[aria-pressed=true]:ring-blue-500" /></p> <p class="mb-6 leading-relaxed text-base"> {children} </VoiceNavProvider> ); }</p> <p class="mb-6 leading-relaxed text-base">// Helper: Announce to screen readers function announceToScreenReader(message: string) { const announcement = document.createElement('div'); announcement.setAttribute('role', 'status'); announcement.setAttribute('aria-live', 'polite'); announcement.setAttribute('aria-atomic', 'true'); announcement.className = 'sr-only'; announcement.textContent = message; document.body.appendChild(announcement);</p> <p class="mb-6 leading-relaxed text-base"> setTimeout(() => announcement.remove(), 1000); } \</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code></p> <p class="mb-6 leading-relaxed text-base"><strong class="text-primary font-semibold">Best Practice</strong>: Voice navigation should achieve WCAG 2.2 Level AAA compliance by working seamlessly with screen readers, keyboard navigation, and high contrast modes.</p> <h3 class="retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r">Pitfall 3: Over-Specific Intent Patterns</h3> <p class="mb-6 leading-relaxed text-base"><strong class="text-primary font-semibold">Problem</strong>: Developers create rigid patterns that only match exact phrases, forcing users to memorize specific commands like a programming language.</p> <p class="mb-6 leading-relaxed text-base"><strong class="text-primary font-semibold">Solution</strong>: Design flexible patterns that understand variations and synonyms:</p> <p class="mb-6 leading-relaxed text-base">\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">typescript // Bad: Too specific const badPatterns = [ { pattern: /^go to settings$/i, intent: { type: 'navigate', target: '/settings' }, }, ];</p> <p class="mb-6 leading-relaxed text-base">// Good: Flexible with variations const goodPatterns = [ { pattern: /(go to|open|show|view|navigate to) (the )?(settings|preferences|configuration|options)/i, intent: { type: 'navigate', target: '/settings' }, },</p> <p class="mb-6 leading-relaxed text-base"> // Handle natural follow-ups { pattern: /(and )?(also )?(change|update|modify|edit) (my )?(.+)/i, intent: { type: 'contextual', action: (match, context) => { // Use LLM for complex variations return classifyIntent(match[5], context); }, }, }, ];</p> <p class="mb-6 leading-relaxed text-base">// Even better: Use LLM classification for ambiguous input import { VoiceNavProvider } from '@elevenlabs/ui';</p> <p class="mb-6 leading-relaxed text-base"><VoiceNavProvider apiKey={process.env.ELEVENLABS_API_KEY!} adapter={routerAdapter} patterns={goodPatterns} // Enable LLM fallback for unmatched patterns useLLMFallback llmConfig={{ model: 'claude-3-5-sonnet-20241022', systemPrompt: \</code>You are a navigation assistant for an e-commerce app. Extract the user's intent from their spoken command and return a navigation target.</p> <p class="mb-6 leading-relaxed text-base"> Available routes: - /dashboard (home, main page) - /products (catalog, items, shop) - /cart (shopping cart, basket) - /orders (order history, purchases) - /settings (preferences, account)</p> <p class="mb-6 leading-relaxed text-base"> Return format: { "route": "/path", "confidence": 0-1 }\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20"> }} /> \</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code></p> <p class="mb-6 leading-relaxed text-base"><strong class="text-primary font-semibold">Best Practice</strong>: Test intent patterns with diverse user groups and collect actual spoken commands to refine pattern matching.</p> <h3 class="retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r">Pitfall 4: No Confirmation for Destructive Actions</h3> <p class="mb-6 leading-relaxed text-base"><strong class="text-primary font-semibold">Problem</strong>: Voice recognition isn't 100% accurate. Users might accidentally trigger destructive actions like "delete account" when they meant "delete comment."</p> <p class="mb-6 leading-relaxed text-base"><strong class="text-primary font-semibold">Solution</strong>: Implement confirmation flows for high-risk actions:</p> <p class="mb-6 leading-relaxed text-base">\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">typescript import { VoiceNavProvider } from '@elevenlabs/ui'; import { useState } from 'react';</p> <p class="mb-6 leading-relaxed text-base">export function SafeVoiceNav({ children }: { children: React.ReactNode }) { const [pendingAction, setPendingAction] = useState<any>(null);</p> <p class="mb-6 leading-relaxed text-base"> return ( <> <VoiceNavProvider apiKey={process.env.ELEVENLABS_API_KEY!} adapter={routerAdapter} patterns={[ // Destructive actions require confirmation { pattern: /delete (my )?(account|profile)/i, intent: { type: 'action', requiresConfirmation: true, execute: async () => { setPendingAction({ type: 'delete_account', message: 'Delete your account? This cannot be undone.', }); }, }, },</p> <p class="mb-6 leading-relaxed text-base"> // Confirmation responses { pattern: /(yes|confirm|proceed|do it)/i, intent: { type: 'action', execute: async () => { if (pendingAction) { await executeDestructiveAction(pendingAction); setPendingAction(null); } }, }, },</p> <p class="mb-6 leading-relaxed text-base"> { pattern: /(no|cancel|nevermind|stop)/i, intent: { type: 'action', execute: () => { setPendingAction(null); return { success: true, message: 'Action cancelled' }; }, }, }, ]} > {children} </VoiceNavProvider></p> <p class="mb-6 leading-relaxed text-base"> {/* Confirmation dialog */} {pendingAction && ( <ConfirmationDialog message={pendingAction.message} onConfirm={() => { executeDestructiveAction(pendingAction); setPendingAction(null); }} onCancel={() => setPendingAction(null)} voiceEnabled // Can respond with voice "yes" or "no" /> )} </> ); } \</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code></p> <p class="mb-6 leading-relaxed text-base"><strong class="text-primary font-semibold">Best Practice</strong>: Categorize actions by risk level (low, medium, high) and require explicit confirmation for medium and high-risk actions.</p> <h3 class="retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r">Pitfall 5: Poor Performance on Mobile Devices</h3> <p class="mb-6 leading-relaxed text-base"><strong class="text-primary font-semibold">Problem</strong>: Voice Nav's WebRTC connections and real-time processing can drain battery and consume data on mobile devices.</p> <p class="mb-6 leading-relaxed text-base"><strong class="text-primary font-semibold">Solution</strong>: Implement performance optimizations for mobile:</p> <p class="mb-6 leading-relaxed text-base">\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">typescript import { VoiceNavProvider } from '@elevenlabs/ui'; import { useMediaQuery } from '@/hooks/use-media-query';</p> <p class="mb-6 leading-relaxed text-base">export function OptimizedVoiceNav({ children }: { children: React.ReactNode }) { const isMobile = useMediaQuery('(max-width: 768px)'); const isLowPowerMode = useMediaQuery('(prefers-reduced-motion: reduce)');</p> <p class="mb-6 leading-relaxed text-base"> return ( <VoiceNavProvider apiKey={process.env.ELEVENLABS_API_KEY!} adapter={routerAdapter} // Reduce quality on mobile to save bandwidth audioQuality={isMobile ? 'standard' : 'high'} // Disable waveform animations on low-power mode enableWaveform={!isLowPowerMode} // Close connection when tab is inactive pauseWhenInactive // Warn about data usage on cellular onConnectionStart={() => { if (isMobile && !isWifi()) { toast.warning('Voice navigation uses data. Connect to Wi-Fi for best experience.'); } }} > {children} </VoiceNavProvider> ); }</p> <p class="mb-6 leading-relaxed text-base">// Detect Wi-Fi vs cellular function isWifi(): boolean { if ('connection' in navigator) { const conn = (navigator as any).connection; return conn.type === 'wifi'; } return true; // Assume Wi-Fi if unable to detect } \</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code></p> <p class="mb-6 leading-relaxed text-base"><strong class="text-primary font-semibold">Best Practice</strong>: Monitor battery and data usage in production and adjust quality settings based on device capabilities.</p> <h2 class="retro-title text-2xl mt-10 mb-6 text-primary border-b-2 border-primary pb-2">Best Practices</h2> <h3 class="retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r">1. Design Intent Patterns Around User Goals</h3> <p class="mb-6 leading-relaxed text-base">Structure voice commands around what users want to accomplish, not your application's technical structure:</p> <p class="mb-6 leading-relaxed text-base">\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">typescript // Bad: Mirrors technical structure const technicalPatterns = [ { pattern: /open users table/i, intent: { type: 'navigate', target: '/admin/database/users' } }, { pattern: /run report query/i, intent: { type: 'navigate', target: '/admin/reports/query-builder' } }, ];</p> <p class="mb-6 leading-relaxed text-base">// Good: Aligned with user goals const goalPatterns = [ { pattern: /find (a )?user (named |called )?(.+)/i, intent: { type: 'navigate', target: (match) => \</code>/admin/users/search?q=\${match[3]}\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20"> } }, { pattern: /show (me )?(sales|revenue|user) (report|data|stats)/i, intent: { type: 'navigate', target: '/admin/reports/dashboard' } }, ]; \</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code></p> <h3 class="retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r">2. Provide Discoverable Voice Commands</h3> <p class="mb-6 leading-relaxed text-base">Users can't use voice commands they don't know exist. Make commands discoverable:</p> <p class="mb-6 leading-relaxed text-base">\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">typescript import { VoiceNavProvider, VoiceCommandPalette } from '@elevenlabs/ui';</p> <p class="mb-6 leading-relaxed text-base">export function App() { return ( <VoiceNavProvider apiKey={process.env.ELEVENLABS_API_KEY!} adapter={routerAdapter} patterns={voicePatterns} > {/* Command palette showing available voice commands */} <VoiceCommandPalette trigger={<button>View Voice Commands</button>} groupBy="category" showExamples /></p> <p class="mb-6 leading-relaxed text-base"> {/* Contextual hints */} <ContextualVoiceHints /></p> <p class="mb-6 leading-relaxed text-base"> {/* Main app */} <AppContent /> </VoiceNavProvider> ); }</p> <p class="mb-6 leading-relaxed text-base">// Show voice hints based on current page function ContextualVoiceHints() { const location = useLocation(); const hints = getHintsForRoute(location.pathname);</p> <p class="mb-6 leading-relaxed text-base"> return ( <div className="voice-hints"> <p>Try saying:</p> <ul> {hints.map(hint => ( <li key={hint}>“{hint}”</li> ))} </ul> </div> ); } \</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code></p> <h3 class="retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r">3. Test with Real Users in Real Environments</h3> <p class="mb-6 leading-relaxed text-base">Voice recognition performs differently in quiet offices vs. noisy environments. Test comprehensively:</p> <p class="mb-6 leading-relaxed text-base">\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">typescript // Set up A/B testing for voice accuracy import { VoiceNavProvider } from '@elevenlabs/ui';</p> <p class="mb-6 leading-relaxed text-base">export function App() { return ( <VoiceNavProvider apiKey={process.env.ELEVENLABS_API_KEY!} adapter={routerAdapter} patterns={patterns} // Track accuracy metrics onIntent={(intent, transcript) => { analytics.track('voice_intent_detected', { intent: intent.type, target: intent.target, transcript, confidence: intent.confidence, }); }} onError={(error) => { analytics.track('voice_error', { type: error.type, message: error.message, transcript: error.transcript, }); }} // Collect user feedback enableFeedback onFeedback={(intent, wasCorrect) => { analytics.track('voice_feedback', { intent, wasCorrect, });</p> <p class="mb-6 leading-relaxed text-base"> // Use feedback to improve patterns if (!wasCorrect) { suggestPatternImprovement(intent); } }} > <AppContent /> </VoiceNavProvider> ); } \</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code></p> <h3 class="retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r">4. Implement Progressive Enhancement</h3> <p class="mb-6 leading-relaxed text-base">Voice navigation should enhance your app, not be required for basic functionality:</p> <p class="mb-6 leading-relaxed text-base">\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">typescript import { VoiceNavProvider } from '@elevenlabs/ui';</p> <p class="mb-6 leading-relaxed text-base">export function ProgressivelyEnhancedApp({ children }: { children: React.ReactNode }) { // Check if voice is supported const isVoiceSupported = typeof window !== 'undefined' && 'mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices;</p> <p class="mb-6 leading-relaxed text-base"> // Feature detection for WebRTC const hasWebRTC = typeof RTCPeerConnection !== 'undefined';</p> <p class="mb-6 leading-relaxed text-base"> if (!isVoiceSupported || !hasWebRTC) { // Gracefully degrade - app works without voice return <>{children}</>; }</p> <p class="mb-6 leading-relaxed text-base"> return ( <VoiceNavProvider apiKey={process.env.ELEVENLABS_API_KEY!} adapter={routerAdapter} > {children} </VoiceNavProvider> ); } \</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code></p> <h3 class="retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r">5. Monitor and Optimize Voice Patterns</h3> <p class="mb-6 leading-relaxed text-base">Use analytics to identify which commands are used most and which patterns fail frequently:</p> <p class="mb-6 leading-relaxed text-base">\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">typescript // Generate analytics report SELECT intent_pattern, COUNT(*) as usage_count, AVG(confidence) as avg_confidence, SUM(CASE WHEN error THEN 1 ELSE 0 END) as error_count FROM voice_nav_events WHERE timestamp > NOW() - INTERVAL '30 days' GROUP BY intent_pattern ORDER BY usage_count DESC;</p> <p class="mb-6 leading-relaxed text-base">// Identify low-confidence patterns that need improvement SELECT transcript, matched_pattern, confidence, user_feedback FROM voice_nav_events WHERE confidence < 0.7 AND timestamp > NOW() - INTERVAL '7 days' ORDER BY confidence ASC LIMIT 100; \</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code></p> <p class="mb-6 leading-relaxed text-base">Use this data to refine patterns and add synonyms for commonly used phrases.</p> <h2 class="retro-title text-2xl mt-10 mb-6 text-primary border-b-2 border-primary pb-2">Getting Started</h2> <h3 class="retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r">Prerequisites</h3> <ul class="space-y-2 mb-6"><li class="flex items-start gap-3 mb-3"><span class="text-primary font-bold text-lg mt-0.5">•</span><span class="flex-1 leading-relaxed">Node.js 18+ or Bun 1.0+</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-bold text-lg mt-0.5">•</span><span class="flex-1 leading-relaxed">React 18+</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-bold text-lg mt-0.5">•</span><span class="flex-1 leading-relaxed">ElevenLabs account with API access</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-bold text-lg mt-0.5">•</span><span class="flex-1 leading-relaxed">Modern browser with WebRTC support</span></li> </ul><h3 class="retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r">Step 1: Create ElevenLabs Account</h3> <ul class="space-y-2 mb-6"><li class="flex items-start gap-3 mb-3"><span class="text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5">1. Sign up at https://elevenlabs.io</span><span class="flex-1 leading-relaxed">Sign up at https://elevenlabs.io</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5">2. Navigate to API settings</span><span class="flex-1 leading-relaxed">Navigate to API settings</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5">3. Generate an API key</span><span class="flex-1 leading-relaxed">Generate an API key</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5">4. (Optional) Create a conversational AI agent for advanced NLU</span><span class="flex-1 leading-relaxed">(Optional) Create a conversational AI agent for advanced NLU</span></li> </ul><h3 class="retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r">Step 2: Install Dependencies</h3> <p class="mb-6 leading-relaxed text-base">\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">bash <h1 class="retro-title text-3xl mt-8 mb-6">Using npm</h1> npm install @elevenlabs/ui</p> <h1 class="retro-title text-3xl mt-8 mb-6">Using pnpm</h1> pnpm add @elevenlabs/ui <h1 class="retro-title text-3xl mt-8 mb-6">Using bun</h1> bun add @elevenlabs/ui \</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code> <h3 class="retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r">Step 3: Configure Environment Variables</h3> <p class="mb-6 leading-relaxed text-base">Create a \<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">.env.local\</code> file:</p> <p class="mb-6 leading-relaxed text-base">\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">env <h1 class="retro-title text-3xl mt-8 mb-6">ElevenLabs credentials</h1> NEXT_PUBLIC_ELEVENLABS_API_KEY=your_api_key_here</p> <h1 class="retro-title text-3xl mt-8 mb-6">Optional: Agent ID for conversational AI</h1> NEXT_PUBLIC_ELEVENLABS_AGENT_ID=your_agent_id_here \</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code> <h3 class="retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r">Step 4: Set Up Voice Nav Provider</h3> <p class="mb-6 leading-relaxed text-base">For Next.js App Router:</p> <p class="mb-6 leading-relaxed text-base">\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">typescript // app/layout.tsx import { VoiceNavProvider, nextRouterAdapter } from '@elevenlabs/ui'; import { useRouter } from 'next/navigation'; import '@elevenlabs/ui/styles.css'; // Import default styles</p> <p class="mb-6 leading-relaxed text-base">export default function RootLayout({ children }: { children: React.ReactNode }) { const router = useRouter();</p> <p class="mb-6 leading-relaxed text-base"> return ( <html lang="en"> <body> <VoiceNavProvider apiKey={process.env.NEXT_PUBLIC_ELEVENLABS_API_KEY!} adapter={nextRouterAdapter(router)} patterns={[ { pattern: /go (to )?(home|homepage)/i, intent: { type: 'navigate', target: '/' }, }, { pattern: /show (me )?(the )?about (page|us)/i, intent: { type: 'navigate', target: '/about' }, }, ]} > {children} </VoiceNavProvider> </body> </html> ); } \</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code></p> <p class="mb-6 leading-relaxed text-base">For React Router:</p> <p class="mb-6 leading-relaxed text-base">\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">typescript // App.tsx import { VoiceNavProvider, reactRouterAdapter } from '@elevenlabs/ui'; import { useNavigate } from 'react-router-dom'; import '@elevenlabs/ui/styles.css';</p> <p class="mb-6 leading-relaxed text-base">export function App() { const navigate = useNavigate();</p> <p class="mb-6 leading-relaxed text-base"> return ( <VoiceNavProvider apiKey={process.env.ELEVENLABS_API_KEY!} adapter={reactRouterAdapter(navigate)} patterns={[ { pattern: /home/i, intent: { type: 'navigate', target: '/' } }, { pattern: /about/i, intent: { type: 'navigate', target: '/about' } }, ]} > <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </VoiceNavProvider> ); } \</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code></p> <h3 class="retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r">Step 5: Add Voice Nav Button</h3> <p class="mb-6 leading-relaxed text-base">\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">typescript // components/Navigation.tsx import { VoiceNavButton } from '@elevenlabs/ui'; import { Mic } from 'lucide-react';</p> <p class="mb-6 leading-relaxed text-base">export function Navigation() { return ( <nav className="flex items-center justify-between p-4"> <Logo /> <div className="flex gap-4"> <NavLink href="/">Home</NavLink> <NavLink href="/about">About</NavLink> <NavLink href="/contact">Contact</NavLink></p> <p class="mb-6 leading-relaxed text-base"> {/* Voice navigation button */} <VoiceNavButton icon={Mic} showTranscript showWaveform size="md" variant="outline" /> </div> </nav> ); } \</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code></p> <h3 class="retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r">Step 6: Test Voice Navigation</h3> <ul class="space-y-2 mb-6"><li class="flex items-start gap-3 mb-3"><span class="text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5">1. Start your development server:</span><span class="flex-1 leading-relaxed">Start your development server:</span></li> </ul><p class="mb-6 leading-relaxed text-base">\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">bash npm run dev \</code>\<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">\</code></p> <ul class="space-y-2 mb-6"><li class="flex items-start gap-3 mb-3"><span class="text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5">2. Open your application in a modern browser</span><span class="flex-1 leading-relaxed">Open your application in a modern browser</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5">3. Click the voice navigation button</span><span class="flex-1 leading-relaxed">Click the voice navigation button</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5">4. Grant microphone permission when prompted</span><span class="flex-1 leading-relaxed">Grant microphone permission when prompted</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5">5. Try saying: "Go to about page"</span><span class="flex-1 leading-relaxed">Try saying: "Go to about page"</span></li> </ul><p class="mb-6 leading-relaxed text-base">You should see: <ul class="space-y-2 mb-6"><li class="flex items-start gap-3 mb-3"><span class="text-primary font-bold text-lg mt-0.5">•</span><span class="flex-1 leading-relaxed">Live transcript appearing as you speak</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-bold text-lg mt-0.5">•</span><span class="flex-1 leading-relaxed">Waveform animation during recording</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-bold text-lg mt-0.5">•</span><span class="flex-1 leading-relaxed">Navigation to the /about page</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-bold text-lg mt-0.5">•</span><span class="flex-1 leading-relaxed">Visual confirmation of the action</span></li></ul></p> <h3 class="retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r">Next Steps</h3> <ul class="space-y-2 mb-6"><li class="flex items-start gap-3 mb-3"><span class="text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5">1. <strong class="text-primary font-semibold">Add more patterns</strong>: Define voice commands for all major routes</span><span class="flex-1 leading-relaxed"><strong class="text-primary font-semibold">Add more patterns</strong>: Define voice commands for all major routes</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5">2. <strong class="text-primary font-semibold">Implement custom actions</strong>: Use the \<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">execute\</code> function for non-navigation actions</span><span class="flex-1 leading-relaxed"><strong class="text-primary font-semibold">Implement custom actions</strong>: Use the \<code class="bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20">execute\</code> function for non-navigation actions</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5">3. <strong class="text-primary font-semibold">Enable analytics</strong>: Track usage and accuracy metrics</span><span class="flex-1 leading-relaxed"><strong class="text-primary font-semibold">Enable analytics</strong>: Track usage and accuracy metrics</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5">4. <strong class="text-primary font-semibold">Test accessibility</strong>: Ensure compatibility with screen readers</span><span class="flex-1 leading-relaxed"><strong class="text-primary font-semibold">Test accessibility</strong>: Ensure compatibility with screen readers</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5">5. <strong class="text-primary font-semibold">Optimize for production</strong>: Configure error handling and fallbacks</span><span class="flex-1 leading-relaxed"><strong class="text-primary font-semibold">Optimize for production</strong>: Configure error handling and fallbacks</span></li> </ul><h2 class="retro-title text-2xl mt-10 mb-6 text-primary border-b-2 border-primary pb-2">Conclusion</h2> <p class="mb-6 leading-relaxed text-base">ElevenLabs UI Voice Nav represents a paradigm shift in how users interact with web applications. By providing production-ready components for voice-based navigation, the library eliminates the technical barriers that have historically prevented developers from building accessible, voice-first interfaces.</p> <p class="mb-6 leading-relaxed text-base">For modern web development teams, Voice Nav offers three transformative capabilities:</p> <ul class="space-y-2 mb-6"><li class="flex items-start gap-3 mb-3"><span class="text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5">1. <strong class="text-primary font-semibold">Accessibility at Scale</strong>: Enable universal access to web applications without custom accessibility engineering for every feature.</span><span class="flex-1 leading-relaxed"><strong class="text-primary font-semibold">Accessibility at Scale</strong>: Enable universal access to web applications without custom accessibility engineering for every feature.</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5">2. <strong class="text-primary font-semibold">Conversational Interfaces</strong>: Meet users' growing expectations for natural language interactions by allowing them to navigate and control applications through speech.</span><span class="flex-1 leading-relaxed"><strong class="text-primary font-semibold">Conversational Interfaces</strong>: Meet users' growing expectations for natural language interactions by allowing them to navigate and control applications through speech.</span></li> <li class="flex items-start gap-3 mb-3"><span class="text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5">3. <strong class="text-primary font-semibold">Future-Proof Architecture</strong>: Prepare applications for a voice-first future where traditional input methods are supplemented or replaced by conversational AI.</span><span class="flex-1 leading-relaxed"><strong class="text-primary font-semibold">Future-Proof Architecture</strong>: Prepare applications for a voice-first future where traditional input methods are supplemented or replaced by conversational AI.</span></li> </ul><p class="mb-6 leading-relaxed text-base">The library's integration with React and major routing frameworks ensures that adding voice navigation is measured in hours, not weeks. Whether you're building an e-commerce platform, healthcare dashboard, or automotive kiosk, Voice Nav provides the foundation to create interfaces that understand what users say, not just what they click.</p> <p class="mb-6 leading-relaxed text-base">As voice becomes the primary interface for emerging platforms—from smart glasses to automotive systems to accessibility devices—web applications that embrace voice-first design will have a significant competitive advantage. ElevenLabs UI Voice Nav makes that future accessible today, providing the open-source toolkit to transform any React application into a voice-controlled, universally accessible digital experience.</p> <p class="mb-6 leading-relaxed text-base">The question is no longer whether to implement voice navigation—it's whether you can afford to leave users behind who expect, need, or prefer to use voice as their primary input method.</p></div></div><div class="article-content-card"><h2 class="retro-subtitle text-2xl mb-6 gradient-text-theme">Key Features</h2><ul class="space-y-4"><li class="flex flex-col gap-2 p-4 rounded-lg bg-primary/5 border border-primary/10"><div class="flex items-start gap-3"><span class="text-primary font-mono text-lg mt-0.5 shadow-sm">▸</span><span class="font-semibold text-primary flex-1">Voice-First Navigation</span></div><p class="text-muted-foreground ml-7 text-sm">Natural language interface for web navigation</p></li><li class="flex flex-col gap-2 p-4 rounded-lg bg-primary/5 border border-primary/10"><div class="flex items-start gap-3"><span class="text-primary font-mono text-lg mt-0.5 shadow-sm">▸</span><span class="font-semibold text-primary flex-1">React Components</span></div><p class="text-muted-foreground ml-7 text-sm">Prebuilt components for voice integration</p></li><li class="flex flex-col gap-2 p-4 rounded-lg bg-primary/5 border border-primary/10"><div class="flex items-start gap-3"><span class="text-primary font-mono text-lg mt-0.5 shadow-sm">▸</span><span class="font-semibold text-primary flex-1">Accessibility</span></div><p class="text-muted-foreground ml-7 text-sm">WCAG-compliant voice interfaces</p></li><li class="flex flex-col gap-2 p-4 rounded-lg bg-primary/5 border border-primary/10"><div class="flex items-start gap-3"><span class="text-primary font-mono text-lg mt-0.5 shadow-sm">▸</span><span class="font-semibold text-primary flex-1">Real-time Processing</span></div><p class="text-muted-foreground ml-7 text-sm">Low-latency voice command processing</p></li><li class="flex flex-col gap-2 p-4 rounded-lg bg-primary/5 border border-primary/10"><div class="flex items-start gap-3"><span class="text-primary font-mono text-lg mt-0.5 shadow-sm">▸</span><span class="font-semibold text-primary flex-1">Custom Commands</span></div><p class="text-muted-foreground ml-7 text-sm">Extensible command system</p></li><li class="flex flex-col gap-2 p-4 rounded-lg bg-primary/5 border border-primary/10"><div class="flex items-start gap-3"><span class="text-primary font-mono text-lg mt-0.5 shadow-sm">▸</span><span class="font-semibold text-primary flex-1">Multi-language Support</span></div><p class="text-muted-foreground ml-7 text-sm">Voice recognition in multiple languages</p></li></ul></div><div class="article-content-card"><h2 class="retro-subtitle text-2xl mb-6 gradient-text-theme">Related Links</h2><ul class="space-y-4"><li class="p-3 rounded-lg bg-accent/5 border border-accent/10"><a href="https://elevenlabs.com" target="_blank" rel="noopener noreferrer" class="text-primary hover:text-accent font-mono text-sm break-all transition-colors duration-300 category-badge-glow inline-block">elevenlabs.com<!-- --> ↗</a></li><li class="p-3 rounded-lg bg-accent/5 border border-accent/10"><a href="https://github.com/elevenlabs/ui-voice-nav" target="_blank" rel="noopener noreferrer" class="text-primary hover:text-accent font-mono text-sm break-all transition-colors duration-300 category-badge-glow inline-block">GitHub<!-- --> ↗</a></li></ul></div></div><nav class="mt-8 flex flex-col sm:flex-row gap-4 sm:justify-between p-6 bg-card/30 backdrop-blur-sm rounded-xl border border-border/50" style="box-shadow:0 4px 16px rgba(var(--primary-rgb, 217, 119, 6), 0.05)"><a class="category-badge-glow" href="/articles"><button class="retro-button retro-button-secondary">All Articles</button></a><a class="category-badge-glow" href="/"><button class="retro-button">Back to Home</button></a></nav></article></div><!--$--><!--/$--></div><script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0}; $RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:0","S:0")</script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[1681,[\"177\",\"static/chunks/app/layout-462f94aebac192f8.js\"],\"ConvexClientProvider\"]\n3:I[1268,[\"177\",\"static/chunks/app/layout-462f94aebac192f8.js\"],\"AppWrapper\"]\n4:I[9766,[],\"\"]\n5:I[8924,[],\"\"]\ne:I[7150,[],\"\"]\n:HL[\"/_next/static/media/028c0d39d2e8f589-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/5b01f339abf2f1a5.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/cc3ea8d700dcc4d9.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"pSD48ycgoZXZOB9N-IelN\",\"p\":\"\",\"c\":[\"\",\"articles\",\"elevenlabs-ui-voice-navigation-components\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"articles\",{\"children\":[[\"id\",\"elevenlabs-ui-voice-navigation-components\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/cc3ea8d700dcc4d9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"className\":\"__variable_fb8f2c __variable_f910ec\",\"style\":{\"--font-geist-sans\":\"'GeistSans', 'GeistSans Fallback'\",\"--font-geist-mono\":\"'GeistMono', ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace\"},\"children\":[\"$\",\"body\",null,{\"className\":\"min-h-screen bg-background font-sans antialiased flex flex-col\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#main-content\",\"className\":\"sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 bg-primary text-primary-foreground px-4 py-2 rounded-md font-medium transition-all duration-200\",\"children\":\"Skip to main content\"}],[\"$\",\"$L2\",null,{\"children\":[\"$\",\"$L3\",null,{\"children\":[[\"$\",\"main\",null,{\"id\":\"main-content\",\"className\":\"flex-1\",\"role\":\"main\",\"aria-label\":\"Main content\",\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"footer\",null,{\"className\":\"border-t border-border/40 bg-muted/20 mt-24\",\"role\":\"contentinfo\",\"aria-label\":\"Site footer\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-6xl mx-auto px-6 lg:px-8 py-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid md:grid-cols-3 gap-8 text-center md:text-left\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"elegant-title text-lg font-semibold mb-3\",\"children\":\"Dev Tools Blog\"}],[\"$\",\"p\",null,{\"className\":\"text-sm text-muted-foreground leading-relaxed\",\"children\":\"Modern development insights and cutting-edge tools for today's developers.\"}]]}],[\"$\",\"nav\",null,{\"aria-label\":\"Footer navigation\",\"children\":[[\"$\",\"h4\",null,{\"className\":\"font-medium mb-3\",\"children\":\"Quick Links\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2 text-sm text-muted-foreground\",\"children\":[[\"$\",\"li\",null,{\"children\":[[\"$\",\"a\",null,{\"href\":\"/articles\",\"className\":\"hover:text-primary transition-colors focus:text-primary focus:underline\",\"aria-describedby\":\"articles-desc\",\"children\":\"Articles\"}],[\"$\",\"span\",null,{\"id\":\"articles-desc\",\"className\":\"sr-only\",\"children\":\"View all development articles\"}]]}],[\"$\",\"li\",null,{\"children\":[[\"$\",\"a\",null,{\"href\":\"/categories\",\"className\":\"hover:text-primary transition-colors focus:text-primary focus:underline\",\"aria-describedby\":\"categories-desc\",\"children\":\"Categories\"}],[\"$\",\"span\",null,{\"id\":\"categories-desc\",\"className\":\"sr-only\",\"children\":\"Browse articles by category\"}]]}]]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h4\",null,{\"className\":\"font-medium mb-3\",\"children\":\"Technologies\"}],[\"$\",\"p\",null,{\"className\":\"text-sm text-muted-foreground leading-relaxed\",\"children\":\"Built with Next.js 15, React 19, TypeScript, and Tailwind CSS.\"}]]}]]}],\"$L6\"]}]}]]}]}]]}]}]]}],{\"children\":[\"articles\",\"$L7\",{\"children\":[[\"id\",\"elevenlabs-ui-voice-navigation-components\",\"d\"],\"$L8\",{\"children\":[\"__PAGE__\",\"$L9\",{},null,false]},[\"$La\",[],[]],false]},[\"$Lb\",[],[]],false]},[\"$Lc\",[],[]],false],\"$Ld\",false]],\"m\":\"$undefined\",\"G\":[\"$e\",[]],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"10:I[4431,[],\"OutletBoundary\"]\n12:I[5278,[],\"AsyncMetadataOutlet\"]\n1d:I[4431,[],\"ViewportBoundary\"]\n1f:I[4431,[],\"MetadataBoundary\"]\n20:\"$Sreact.suspense\"\n6:[\"$\",\"div\",null,{\"className\":\"border-t border-border/40 mt-8 pt-8 text-center\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-sm text-muted-foreground\",\"children\":[\"© \",[\"$\",\"time\",null,{\"dateTime\":\"2025\",\"children\":\"2025\"}],\" Dev Tools Blog. All rights reserved.\"]}]}]\n7:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n8:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n9:[\"$\",\"$1\",\"c\",{\"children\":[\"$Lf\",null,[\"$\",\"$L10\",null,{\"children\":[\"$L11\",[\"$\",\"$L12\",null,{\"promise\":\"$@13\"}]]}]]}]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"article\",\"l\",{\"className\":\"max-w-4xl mx-auto animate-pulse\",\"children\":[[\"$\",\"header\",null,{\"className\":\"mb-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3\",\"children\":[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-24\"}]}],[\"$\",\"div\",null,{\"className\":\"mb-3\",\"children\":[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-32\"}]}],[\"$\",\"div\",null,{\"className\":\"h-8 bg-card rounded w-full mb-3\"}],[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-3/4 mb-3\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-4\",\"children\":[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-32\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"bg-card border-2 border-border rounded-lg p-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-4 bg-card/50 rounded w-full\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card/50 rounded w-5/6\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card/50 rounded w-4/5\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card/50 rounded w-full\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card/50 rounded w-3/4\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"bg-card border-2 border-border rounded-lg p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-6 bg-card/50 rounded w-32 mb-4\"}],[\"$\",\"div\",null,{\"className\":\"space-y-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-4 bg-card/50 rounded w-full\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card/50 rounded w-4/5\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card/50 rounded w-5/6\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"bg-card border-2 border-border rounded-lg p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-6 bg-card/50 rounded w-32 mb-4\"}],[\"$\",\"div\",null,{\"className\":\"space-y-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-4 bg-card/50 rounded w-full\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card/50 rounded w-3/4\"}]]}]]}]]}],[\"$\",\"nav\",null,{\"className\":\"mt-8 flex flex-col sm:flex-row gap-4 sm:justify-between\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-10 bg-card rounded w-32\"}],[\"$\",\"div\",null,{\"className\":\"h-10 bg-card rounded w-32\"}]]}]]}]\n"])</script><script>self.__next_f.push([1,"b:[\"$\",\"div\",\"l\",{\"className\":\"min-h-screen py-16 lg:py-24\",\"children\":[\"$\",\"div\",null,{\"className\":\"container mx-auto px-6 lg:px-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-6xl mx-auto\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-center mb-16 animate-pulse\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-12 bg-card rounded-lg w-64 mx-auto mb-6\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-96 mx-auto mb-2\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-80 mx-auto\"}]]}],[\"$\",\"div\",null,{\"className\":\"grid md:grid-cols-2 lg:grid-cols-3 gap-8\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"animate-pulse\",\"children\":[\"$\",\"div\",null,{\"className\":\"elegant-card h-80 bg-card/50\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-20 mb-4\"}],[\"$\",\"div\",null,{\"className\":\"h-8 bg-card rounded w-full mb-3\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-full mb-2\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-3/4 mb-6\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2 mb-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-16\"}],[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-20\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex justify-between items-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-20\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-16\"}]]}]]}]}],[\"$\",\"div\",\"1\",{\"className\":\"animate-pulse\",\"children\":[\"$\",\"div\",null,{\"className\":\"elegant-card h-80 bg-card/50\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-20 mb-4\"}],[\"$\",\"div\",null,{\"className\":\"h-8 bg-card rounded w-full mb-3\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-full mb-2\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-3/4 mb-6\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2 mb-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-16\"}],[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-20\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex justify-between items-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-20\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-16\"}]]}]]}]}],[\"$\",\"div\",\"2\",{\"className\":\"animate-pulse\",\"children\":[\"$\",\"div\",null,{\"className\":\"elegant-card h-80 bg-card/50\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-20 mb-4\"}],[\"$\",\"div\",null,{\"className\":\"h-8 bg-card rounded w-full mb-3\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-full mb-2\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-3/4 mb-6\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2 mb-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-16\"}],[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-20\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex justify-between items-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-20\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-16\"}]]}]]}]}],[\"$\",\"div\",\"3\",{\"className\":\"animate-pulse\",\"children\":[\"$\",\"div\",null,{\"className\":\"elegant-card h-80 bg-card/50\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-20 mb-4\"}],[\"$\",\"div\",null,{\"className\":\"h-8 bg-card rounded w-full mb-3\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-full mb-2\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-3/4 mb-6\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2 mb-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-16\"}],[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-20\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex justify-between items-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-20\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-16\"}]]}]]}]}],[\"$\",\"div\",\"4\",{\"className\":\"animate-pulse\",\"children\":[\"$\",\"div\",null,{\"className\":\"elegant-card h-80 bg-card/50\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-20 mb-4\"}],[\"$\",\"div\",null,{\"className\":\"h-8 bg-card rounded w-full mb-3\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-full mb-2\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-3/4 mb-6\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2 mb-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-16\"}],[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-20\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex justify-between items-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-20\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-16\"}]]}]]}]}],[\"$\",\"div\",\"5\",{\"className\":\"animate-pulse\",\"children\":[\"$\",\"div\",null,{\"className\":\"elegant-card h-80 bg-card/50\",\"children\":[\"$L14\",\"$L15\",\"$L16\",\"$L17\",\"$L18\",\"$L19\"]}]}],\"$L1a\",\"$L1b\",\"$L1c\"]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"c:[\"$\",\"div\",\"l\",{\"className\":\"min-h-screen flex items-center justify-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"inline-flex items-center gap-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"animate-spin rounded-full h-8 w-8 border-b-2 border-primary\"}],[\"$\",\"span\",null,{\"className\":\"text-muted-foreground\",\"children\":\"Loading...\"}]]}]}]}]\nd:[\"$\",\"$1\",\"h\",{\"children\":[null,[[\"$\",\"$L1d\",null,{\"children\":\"$L1e\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]],[\"$\",\"$L1f\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$20\",null,{\"fallback\":null,\"children\":\"$L21\"}]}]}]]}]\n"])</script><script>self.__next_f.push([1,"14:[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-20 mb-4\"}]\n15:[\"$\",\"div\",null,{\"className\":\"h-8 bg-card rounded w-full mb-3\"}]\n16:[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-full mb-2\"}]\n17:[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-3/4 mb-6\"}]\n18:[\"$\",\"div\",null,{\"className\":\"flex gap-2 mb-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-16\"}],[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-20\"}]]}]\n19:[\"$\",\"div\",null,{\"className\":\"flex justify-between items-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-20\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-16\"}]]}]\n"])</script><script>self.__next_f.push([1,"1a:[\"$\",\"div\",\"6\",{\"className\":\"animate-pulse\",\"children\":[\"$\",\"div\",null,{\"className\":\"elegant-card h-80 bg-card/50\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-20 mb-4\"}],[\"$\",\"div\",null,{\"className\":\"h-8 bg-card rounded w-full mb-3\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-full mb-2\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-3/4 mb-6\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2 mb-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-16\"}],[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-20\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex justify-between items-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-20\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-16\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"1b:[\"$\",\"div\",\"7\",{\"className\":\"animate-pulse\",\"children\":[\"$\",\"div\",null,{\"className\":\"elegant-card h-80 bg-card/50\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-20 mb-4\"}],[\"$\",\"div\",null,{\"className\":\"h-8 bg-card rounded w-full mb-3\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-full mb-2\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-3/4 mb-6\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2 mb-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-16\"}],[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-20\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex justify-between items-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-20\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-16\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"1c:[\"$\",\"div\",\"8\",{\"className\":\"animate-pulse\",\"children\":[\"$\",\"div\",null,{\"className\":\"elegant-card h-80 bg-card/50\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-20 mb-4\"}],[\"$\",\"div\",null,{\"className\":\"h-8 bg-card rounded w-full mb-3\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-full mb-2\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-3/4 mb-6\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2 mb-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-16\"}],[\"$\",\"div\",null,{\"className\":\"h-6 bg-card rounded w-20\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex justify-between items-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-20\"}],[\"$\",\"div\",null,{\"className\":\"h-4 bg-card rounded w-16\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"1e:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"media\":\"(prefers-color-scheme: light)\",\"content\":\"#d97706\"}],[\"$\",\"meta\",\"3\",{\"name\":\"theme-color\",\"media\":\"(prefers-color-scheme: dark)\",\"content\":\"#c026d3\"}]]\n11:null\n"])</script><script>self.__next_f.push([1,"13:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"ElevenLabs UI Voice Nav: Building the Future of Voice-First Web Navigation | Tech Blog | Tech Blog\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"ElevenLabs UI introduces voice navigation components that transform how users interact with web applications. This open-source library enables developers to build accessible, voice-controlled interfaces with natural language processing, hands-free navigation, and seamless integration into React applications—bringing the future of conversational UI to the modern web.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"Tech Blog\"}],[\"$\",\"link\",\"3\",{\"rel\":\"manifest\",\"href\":\"/manifest.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"4\",{\"name\":\"keywords\",\"content\":\"React/Frontend,React,Voice UI,Frontend,Accessibility,UI/UX,ElevenLabs,Voice-First Navigation,React Components,Real-time Processing,Custom Commands,Multi-language Support,development,tools,programming\"}],[\"$\",\"meta\",\"5\",{\"name\":\"creator\",\"content\":\"Tech Blog\"}],[\"$\",\"meta\",\"6\",{\"name\":\"publisher\",\"content\":\"Tech Blog\"}],[\"$\",\"meta\",\"7\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"8\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"9\",{\"name\":\"category\",\"content\":\"React/Frontend\"}],[\"$\",\"link\",\"10\",{\"rel\":\"canonical\",\"href\":\"https://your-domain.com/articles/elevenlabs-ui-voice-navigation-components\"}],[\"$\",\"meta\",\"11\",{\"name\":\"format-detection\",\"content\":\"telephone=no, address=no, email=no\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:title\",\"content\":\"ElevenLabs UI Voice Nav: Building the Future of Voice-First Web Navigation\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:description\",\"content\":\"ElevenLabs UI introduces voice navigation components that transform how users interact with web applications. This open-source library enables developers to build accessible, voice-controlled interfaces with natural language processing, hands-free navigation, and seamless integration into React applications—bringing the future of conversational UI to the modern web.\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"15\",{\"property\":\"article:author\",\"content\":\"Tech Blog\"}],[\"$\",\"meta\",\"16\",{\"property\":\"article:tag\",\"content\":\"React/Frontend\"}],[\"$\",\"meta\",\"17\",{\"property\":\"article:tag\",\"content\":\"React\"}],[\"$\",\"meta\",\"18\",{\"property\":\"article:tag\",\"content\":\"Voice UI\"}],[\"$\",\"meta\",\"19\",{\"property\":\"article:tag\",\"content\":\"Frontend\"}],[\"$\",\"meta\",\"20\",{\"property\":\"article:tag\",\"content\":\"Accessibility\"}],[\"$\",\"meta\",\"21\",{\"property\":\"article:tag\",\"content\":\"UI/UX\"}],[\"$\",\"meta\",\"22\",{\"property\":\"article:tag\",\"content\":\"ElevenLabs\"}],[\"$\",\"meta\",\"23\",{\"property\":\"article:tag\",\"content\":\"Voice-First Navigation\"}],[\"$\",\"meta\",\"24\",{\"property\":\"article:tag\",\"content\":\"React Components\"}],[\"$\",\"meta\",\"25\",{\"property\":\"article:tag\",\"content\":\"Real-time Processing\"}],[\"$\",\"meta\",\"26\",{\"property\":\"article:tag\",\"content\":\"Custom Commands\"}],[\"$\",\"meta\",\"27\",{\"property\":\"article:tag\",\"content\":\"Multi-language Support\"}],[\"$\",\"meta\",\"28\",{\"property\":\"article:tag\",\"content\":\"development\"}],[\"$\",\"meta\",\"29\",{\"property\":\"article:tag\",\"content\":\"tools\"}],[\"$\",\"meta\",\"30\",{\"property\":\"article:tag\",\"content\":\"programming\"}],[\"$\",\"meta\",\"31\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"32\",{\"name\":\"twitter:title\",\"content\":\"ElevenLabs UI Voice Nav: Building the Future of Voice-First Web Navigation\"}],[\"$\",\"meta\",\"33\",{\"name\":\"twitter:description\",\"content\":\"ElevenLabs UI introduces voice navigation components that transform how users interact with web applications. This open-source library enables developers to build accessible, voice-controlled interfaces with natural language processing, hands-free navigation, and seamless integration into React applications—bringing the future of conversational UI to the modern web.\"}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script><script>self.__next_f.push([1,"21:\"$13:metadata\"\n"])</script><script>self.__next_f.push([1,"22:I[2619,[\"406\",\"static/chunks/app/articles/%5Bid%5D/page-0c3953d11e87a03a.js\"],\"\"]\n23:T15aa2,"])</script><script>self.__next_f.push([1,"\u003ch1 class=\"retro-title text-3xl mt-8 mb-6\"\u003eElevenLabs UI Voice Nav: Building the Future of Voice-First Web Navigation\u003c/h1\u003e\n\u003ch2 class=\"retro-title text-2xl mt-10 mb-6 text-primary border-b-2 border-primary pb-2\"\u003eExecutive Summary\u003c/h2\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eThe web is undergoing a fundamental shift in how users interact with digital interfaces. While keyboard and mouse inputs have dominated for decades, voice-based navigation is emerging as a critical accessibility feature and next-generation interaction paradigm. ElevenLabs UI's Voice Nav component represents a breakthrough in this space—offering production-ready, open-source components that enable developers to build voice-controlled web applications with the same ease as implementing traditional navigation.\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eUnlike retrofitted voice assistants that treat web navigation as an afterthought, Voice Nav was architected specifically for modern web applications. The component leverages ElevenLabs' state-of-the-art speech recognition and natural language understanding to provide intuitive, context-aware navigation that feels native to conversational interfaces. Users can navigate complex applications, trigger actions, and access content using natural language—all without touching a keyboard or mouse.\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eBuilt on React and designed for seamless integration with modern frameworks like Next.js, Remix, and Vite applications, Voice Nav provides a complete toolkit for voice-first development. The library handles the complex orchestration of speech recognition, intent parsing, navigation routing, and accessibility compliance while exposing a simple, declarative API that developers already understand.\u003c/p\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003eWhy Voice Nav Matters for Modern Web Development\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eTraditional web navigation assumes users have full motor control and visual attention. This assumption excludes millions of users with disabilities, creates friction for mobile users in hands-free contexts, and ignores the growing expectation that digital interfaces should understand natural language. Voice Nav eliminates these barriers by providing:\u003c/p\u003e\n\u003cul class=\"space-y-2 mb-6\"\u003e\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eUniversal Accessibility\u003c/strong\u003e: Enable users with motor impairments, visual disabilities, or situational limitations to navigate your application effortlessly\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eHands-Free Productivity\u003c/strong\u003e: Support use cases where users need to interact with applications while their hands are occupied (cooking, driving, manufacturing)\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eNatural Language Interfaces\u003c/strong\u003e: Meet users' expectations for conversational AI by allowing navigation through natural speech rather than rigid command patterns\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eFuture-Proof Architecture\u003c/strong\u003e: Prepare applications for a voice-first future where traditional input methods are supplemented or replaced by conversational interfaces\u003c/span\u003e\u003c/li\u003e\n\u003c/ul\u003e\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eThe component's integration with ElevenLabs' conversational AI platform means developers gain access to enterprise-grade speech recognition with multi-language support, advanced noise cancellation, and real-time processing—capabilities that would typically require months of ML engineering to build in-house.\u003c/p\u003e\n\u003ch2 class=\"retro-title text-2xl mt-10 mb-6 text-primary border-b-2 border-primary pb-2\"\u003eTechnical Deep Dive\u003c/h2\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003eArchitecture Overview\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eVoice Nav's architecture consists of four primary layers that work together to transform spoken language into application navigation:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003e1. Speech Recognition Layer\u003c/strong\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eAt the foundation sits ElevenLabs' WebRTC-based real-time speech recognition engine. Unlike traditional HTTP-based speech APIs that require audio buffering, Voice Nav establishes a persistent WebSocket connection that streams audio chunks as users speak:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\n// Internal speech recognition flow\ninterface SpeechRecognitionEngine {\n // Establishes WebRTC connection to ElevenLabs\n connect(): Promise\u003cWebRTCConnection\u003e;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Streams audio from microphone in 100ms chunks\n streamAudio(stream: MediaStream): void;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Returns partial transcriptions as user speaks\n onPartialTranscript(callback: (text: string) =\u003e void): void;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Returns final transcription when user pauses\n onFinalTranscript(callback: (text: string) =\u003e void): void;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Handles connection errors and retries\n onError(callback: (error: Error) =\u003e void): void;\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eThis streaming architecture enables three critical capabilities:\u003c/p\u003e\n\u003cul class=\"space-y-2 mb-6\"\u003e\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eLow Latency\u003c/strong\u003e: Transcription results arrive within 200-300ms of speech, creating the perception of instantaneous understanding\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003ePartial Results\u003c/strong\u003e: Users see real-time feedback as they speak, similar to Google's live transcription\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eInterruption Handling\u003c/strong\u003e: The system gracefully handles when users change their mind mid-sentence or provide corrections\u003c/span\u003e\u003c/li\u003e\n\u003c/ul\u003e\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003e2. Natural Language Understanding (NLU) Layer\u003c/strong\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eRaw transcriptions are passed through an intent classification pipeline that maps natural language to navigation actions. Voice Nav uses a hybrid approach combining pattern matching for common phrases with LLM-based understanding for complex queries:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\n// Intent classification system\ninterface IntentClassifier {\n // Fast pattern matching for common navigation phrases\n patterns: NavigationPattern[];\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // LLM fallback for ambiguous or complex queries\n llmClassifier: LLMIntentClassifier;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Extracts navigation intent from spoken text\n classify(transcript: string): Promise\u003cNavigationIntent\u003e;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Learns from user corrections to improve accuracy\n learnFromFeedback(intent: NavigationIntent, wasCorrect: boolean): void;\n}\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e// Example navigation patterns\nconst defaultPatterns = [\n {\n pattern: /go to (the )?home ?page/i,\n intent: { type: 'navigate', target: '/' },\n },\n {\n pattern: /show (me )?(the )?settings/i,\n intent: { type: 'navigate', target: '/settings' },\n },\n {\n pattern: /(open|view) (.+)/i,\n intent: { type: 'navigate', target: (match) =\u003e \\\u003c/code\u003e/\\${match[2]}\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e },\n },\n];\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eThis hybrid approach provides the best of both worlds: instant response for common phrases (e.g., \"go home\") and intelligent understanding of complex requests (e.g., \"show me the invoice I created yesterday for the Johnson account\").\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003e3. Navigation Router Integration\u003c/strong\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eVoice Nav integrates seamlessly with modern React routing libraries through a provider-agnostic adapter system:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\n// Routing adapter interface\ninterface NavigationAdapter {\n // Navigate to a specific route\n navigate(path: string, options?: NavigationOptions): void;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Get current route information\n getCurrentRoute(): RouteInfo;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Register voice-accessible routes\n registerRoute(config: VoiceRouteConfig): void;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Execute programmatic actions (beyond navigation)\n executeAction(action: VoiceAction): Promise\u003cvoid\u003e;\n}\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e// Built-in adapters for popular routers\nexport const reactRouterAdapter: NavigationAdapter;\nexport const nextRouterAdapter: NavigationAdapter;\nexport const remixRouterAdapter: NavigationAdapter;\nexport const tanstackRouterAdapter: NavigationAdapter;\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eThis adapter pattern ensures Voice Nav works with any routing solution while providing optimized implementations for popular frameworks.\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003e4. Accessibility and Feedback Layer\u003c/strong\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eThe final layer ensures Voice Nav meets WCAG 2.2 AAA standards and provides multimodal feedback:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\n// Accessibility compliance features\ninterface AccessibilityLayer {\n // ARIA live region announcements for screen readers\n announceIntent(intent: NavigationIntent): void;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Visual feedback for users who can't hear audio confirmations\n showVisualConfirmation(intent: NavigationIntent): void;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Keyboard shortcuts as fallback for voice commands\n enableKeyboardFallback(): void;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Focus management after voice navigation\n manageFocus(target: HTMLElement): void;\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eThis layer ensures Voice Nav enhances rather than replaces existing accessibility features, providing progressive enhancement for all users.\u003c/p\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003eCore Component API\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eVoice Nav exposes three primary React components that handle different aspects of voice navigation:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e#### VoiceNavProvider\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eThe provider component establishes the voice recognition session and provides context to child components:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\nimport { VoiceNavProvider } from '@elevenlabs/ui';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003einterface VoiceNavProviderProps {\n // ElevenLabs API key for speech recognition\n apiKey: string;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Agent ID for conversational AI (optional)\n agentId?: string;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Navigation adapter for your router\n adapter: NavigationAdapter;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Custom intent patterns for your application\n patterns?: NavigationPattern[];\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Language for speech recognition\n language?: string;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Callback when voice command is recognized\n onIntent?: (intent: NavigationIntent) =\u003e void;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Callback when navigation completes\n onNavigate?: (route: string) =\u003e void;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Error handling callback\n onError?: (error: VoiceNavError) =\u003e void;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Enable debug mode for development\n debug?: boolean;\n}\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport function VoiceNavProvider(props: VoiceNavProviderProps): JSX.Element;\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eExample usage with Next.js App Router:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\nimport { VoiceNavProvider, nextRouterAdapter } from '@elevenlabs/ui';\nimport { useRouter } from 'next/navigation';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport default function RootLayout({ children }: { children: React.ReactNode }) {\n const router = useRouter();\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e return (\n \u003chtml lang=\"en\"\u003e\n \u003cbody\u003e\n \u003cVoiceNavProvider\n apiKey={process.env.NEXT_PUBLIC_ELEVENLABS_API_KEY!}\n adapter={nextRouterAdapter(router)}\n patterns={[\n {\n pattern: /show (my )?dashboard/i,\n intent: { type: 'navigate', target: '/dashboard' },\n },\n {\n pattern: /create (a )?new post/i,\n intent: { type: 'navigate', target: '/posts/new' },\n },\n ]}\n onIntent={(intent) =\u003e {\n console.log('Voice intent detected:', intent);\n }}\n onNavigate={(route) =\u003e {\n console.log('Navigated to:', route);\n }}\n \u003e\n {children}\n \u003c/VoiceNavProvider\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n );\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e#### VoiceNavButton\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eA pre-built button component that handles microphone permissions, recording state, and user feedback:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\nimport { VoiceNavButton } from '@elevenlabs/ui';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003einterface VoiceNavButtonProps {\n // Button label (default: \"Voice Navigation\")\n label?: string;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Icon component for inactive state\n icon?: React.ComponentType;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Icon component for active/listening state\n listeningIcon?: React.ComponentType;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Custom styling classes\n className?: string;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Show live transcription as user speaks\n showTranscript?: boolean;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Visual waveform animation during recording\n showWaveform?: boolean;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Size variant\n size?: 'sm' | 'md' | 'lg';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Style variant\n variant?: 'default' | 'outline' | 'ghost';\n}\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport function VoiceNavButton(props: VoiceNavButtonProps): JSX.Element;\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eExample usage with custom styling:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\nimport { VoiceNavButton } from '@elevenlabs/ui';\nimport { Mic, MicOff } from 'lucide-react';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport function NavigationBar() {\n return (\n \u003cnav className=\"flex items-center justify-between p-4\"\u003e\n \u003cLogo /\u003e\n \u003cdiv className=\"flex gap-4\"\u003e\n \u003cNavLink href=\"/dashboard\"\u003eDashboard\u003c/NavLink\u003e\n \u003cNavLink href=\"/settings\"\u003eSettings\u003c/NavLink\u003e\n \u003cVoiceNavButton\n label=\"Voice Command\"\n icon={Mic}\n listeningIcon={MicOff}\n showTranscript\n showWaveform\n size=\"md\"\n variant=\"outline\"\n className=\"ml-4\"\n /\u003e\n \u003c/div\u003e\n \u003c/nav\u003e\n );\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e#### useVoiceNav Hook\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eFor advanced use cases requiring programmatic control:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\nimport { useVoiceNav } from '@elevenlabs/ui';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003einterface UseVoiceNavReturn {\n // Current state of voice recognition\n state: 'idle' | 'connecting' | 'listening' | 'processing' | 'error';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Current transcript (partial during listening, final when done)\n transcript: string;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Detected intent (null while processing)\n intent: NavigationIntent | null;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Start listening for voice commands\n startListening(): Promise\u003cvoid\u003e;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Stop listening and process current transcript\n stopListening(): void;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Cancel current session without processing\n cancel(): void;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Manually register a custom intent pattern\n registerPattern(pattern: NavigationPattern): void;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Execute a voice action programmatically\n executeIntent(intent: NavigationIntent): Promise\u003cvoid\u003e;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Check if microphone permission is granted\n hasPermission: boolean;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Request microphone permission\n requestPermission(): Promise\u003cboolean\u003e;\n}\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport function useVoiceNav(): UseVoiceNavReturn;\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eExample of custom voice command implementation:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\nimport { useVoiceNav } from '@elevenlabs/ui';\nimport { useState } from 'react';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport function CustomVoiceSearch() {\n const {\n state,\n transcript,\n intent,\n startListening,\n stopListening,\n hasPermission,\n requestPermission,\n } = useVoiceNav();\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e const [searchResults, setSearchResults] = useState\u003cany[]\u003e([]);\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e const handleVoiceSearch = async () =\u003e {\n if (!hasPermission) {\n await requestPermission();\n }\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e await startListening();\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Voice Nav will call stopListening automatically on pause\n // or you can stop manually\n };\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // React to intent changes\n useEffect(() =\u003e {\n if (intent?.type === 'search') {\n performSearch(intent.query);\n }\n }, [intent]);\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e return (\n \u003cdiv className=\"relative\"\u003e\n \u003cbutton\n onClick={handleVoiceSearch}\n disabled={state === 'listening'}\n className=\"voice-search-button\"\n \u003e\n {state === 'listening' ? (\n \u003c\u003e\n \u003cMicIcon className=\"animate-pulse\" /\u003e\n \u003cspan\u003eListening... {transcript}\u003c/span\u003e\n \u003c/\u003e\n ) : (\n \u003c\u003e\n \u003cMicIcon /\u003e\n \u003cspan\u003eVoice Search\u003c/span\u003e\n \u003c/\u003e\n )}\n \u003c/button\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e {searchResults.length \u003e 0 \u0026\u0026 (\n \u003cSearchResults results={searchResults} /\u003e\n )}\n \u003c/div\u003e\n );\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003eAdvanced Features\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e#### Context-Aware Navigation\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eVoice Nav can maintain conversational context across multiple commands, enabling natural follow-up queries:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\nimport { VoiceNavProvider } from '@elevenlabs/ui';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport function App() {\n return (\n \u003cVoiceNavProvider\n apiKey={process.env.ELEVENLABS_API_KEY!}\n adapter={routerAdapter}\n enableContextTracking\n contextWindow={5} // Remember last 5 commands\n patterns={[\n {\n pattern: /show (me )?(.+)/i,\n intent: { type: 'navigate', target: (match) =\u003e \\\u003c/code\u003e/\\${match[2]}\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e },\n },\n {\n pattern: /go back|previous/i,\n intent: { type: 'navigate', target: 'HISTORY_BACK' },\n },\n {\n pattern: /edit (it|that|this)/i,\n intent: {\n type: 'contextual',\n action: (context) =\u003e {\n // Access last viewed item from context\n const lastItem = context.history[0];\n return { type: 'navigate', target: \\\u003c/code\u003e\\${lastItem.route}/edit\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e };\n }\n },\n },\n ]}\n \u003e\n {/* app content */}\n \u003c/VoiceNavProvider\u003e\n );\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eExample conversation flow:\u003c/p\u003e\n\u003cul class=\"space-y-2 mb-6\"\u003e\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e1. User: \"Show my invoices\"\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eUser: \"Show my invoices\"\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e2. App navigates to \\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e/invoices\\\u003c/code\u003e\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eApp navigates to \\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e/invoices\\\u003c/code\u003e\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e3. User: \"Edit this\" (Voice Nav understands \"this\" refers to \\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e/invoices\\\u003c/code\u003e)\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eUser: \"Edit this\" (Voice Nav understands \"this\" refers to \\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e/invoices\\\u003c/code\u003e)\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e4. App navigates to \\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e/invoices/edit\\\u003c/code\u003e\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eApp navigates to \\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e/invoices/edit\\\u003c/code\u003e\u003c/span\u003e\u003c/li\u003e\n\u003c/ul\u003e\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e#### Multi-Language Support\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eVoice Nav supports 29+ languages through ElevenLabs' multilingual speech recognition:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\nimport { VoiceNavProvider } from '@elevenlabs/ui';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport function MultilingualApp() {\n const [language, setLanguage] = useState('en-US');\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e return (\n \u003cVoiceNavProvider\n apiKey={process.env.ELEVENLABS_API_KEY!}\n adapter={routerAdapter}\n language={language}\n patterns={{\n 'en-US': [\n { pattern: /go home/i, intent: { type: 'navigate', target: '/' } },\n ],\n 'es-ES': [\n { pattern: /ir a inicio/i, intent: { type: 'navigate', target: '/' } },\n ],\n 'fr-FR': [\n { pattern: /aller à l'accueil/i, intent: { type: 'navigate', target: '/' } },\n ],\n 'de-DE': [\n { pattern: /zur startseite/i, intent: { type: 'navigate', target: '/' } },\n ],\n }}\n \u003e\n \u003cLanguageSelector value={language} onChange={setLanguage} /\u003e\n {/* app content */}\n \u003c/VoiceNavProvider\u003e\n );\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e#### Custom Actions Beyond Navigation\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eVoice Nav supports arbitrary action execution, not just route changes:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\nimport { VoiceNavProvider } from '@elevenlabs/ui';\nimport { useTheme } from 'next-themes';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport function App() {\n const { setTheme } = useTheme();\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e return (\n \u003cVoiceNavProvider\n apiKey={process.env.ELEVENLABS_API_KEY!}\n adapter={routerAdapter}\n patterns={[\n // Theme switching\n {\n pattern: /switch to (dark|light) mode/i,\n intent: {\n type: 'action',\n execute: (match) =\u003e {\n setTheme(match[1]);\n return { success: true, message: \\\u003c/code\u003eSwitched to \\${match[1]} mode\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e };\n },\n },\n },\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Form submission\n {\n pattern: /submit (the )?form/i,\n intent: {\n type: 'action',\n execute: () =\u003e {\n document.querySelector('form')?.requestSubmit();\n return { success: true, message: 'Form submitted' };\n },\n },\n },\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Modal control\n {\n pattern: /close (the )?(modal|dialog|popup)/i,\n intent: {\n type: 'action',\n execute: () =\u003e {\n // Trigger modal close\n document.querySelector('[data-dialog-close]')?.click();\n return { success: true, message: 'Modal closed' };\n },\n },\n },\n ]}\n \u003e\n {/* app content */}\n \u003c/VoiceNavProvider\u003e\n );\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003ch2 class=\"retro-title text-2xl mt-10 mb-6 text-primary border-b-2 border-primary pb-2\"\u003eReal-World Examples\u003c/h2\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003eExample 1: Accessible E-Commerce Navigation\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eA furniture e-commerce company implemented Voice Nav to enable hands-free browsing for users comparing products while measuring spaces in their homes:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\nimport { VoiceNavProvider, VoiceNavButton, nextRouterAdapter } from '@elevenlabs/ui';\nimport { useRouter } from 'next/navigation';\nimport { useCart } from '@/hooks/use-cart';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport default function StoreLayout({ children }: { children: React.ReactNode }) {\n const router = useRouter();\n const { addToCart } = useCart();\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e return (\n \u003cVoiceNavProvider\n apiKey={process.env.NEXT_PUBLIC_ELEVENLABS_API_KEY!}\n adapter={nextRouterAdapter(router)}\n patterns={[\n // Product browsing\n {\n pattern: /show (me )?(.+) furniture/i,\n intent: {\n type: 'navigate',\n target: (match) =\u003e \\\u003c/code\u003e/category/\\${match[2].toLowerCase()}\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e,\n },\n },\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Product filtering\n {\n pattern: /filter by (.+)/i,\n intent: {\n type: 'navigate',\n target: (match) =\u003e {\n const filter = match[1].toLowerCase();\n return \\\u003c/code\u003e?filter=\\${encodeURIComponent(filter)}\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e;\n },\n },\n },\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Add to cart\n {\n pattern: /add (this|that|it) to (my )?cart/i,\n intent: {\n type: 'action',\n execute: async () =\u003e {\n const productId = getCurrentProductId(); // Helper function\n await addToCart(productId);\n return {\n success: true,\n message: 'Added to cart',\n speak: 'Item added to your cart'\n };\n },\n },\n },\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Price comparison\n {\n pattern: /compare prices/i,\n intent: { type: 'navigate', target: '/compare' },\n },\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Checkout flow\n {\n pattern: /(checkout|proceed to payment)/i,\n intent: { type: 'navigate', target: '/checkout' },\n },\n ]}\n onNavigate={(route) =\u003e {\n // Analytics tracking\n analytics.track('voice_navigation', { route });\n }}\n \u003e\n \u003cdiv className=\"store-layout\"\u003e\n \u003cheader className=\"flex justify-between items-center p-4\"\u003e\n \u003cLogo /\u003e\n \u003cdiv className=\"flex gap-4 items-center\"\u003e\n \u003cSearchBar /\u003e\n \u003cCartIcon /\u003e\n \u003cVoiceNavButton\n showTranscript\n showWaveform\n size=\"md\"\n variant=\"outline\"\n label=\"Voice Control\"\n /\u003e\n \u003c/div\u003e\n \u003c/header\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e \u003cmain\u003e{children}\u003c/main\u003e\n \u003c/div\u003e\n \u003c/VoiceNavProvider\u003e\n );\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eResults after 3 months:\u003c/strong\u003e\u003c/p\u003e\n\u003cul class=\"space-y-2 mb-6\"\u003e\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003e32% increase\u003c/strong\u003e in conversion rate for users who activated voice navigation\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003e45% reduction\u003c/strong\u003e in average time-to-purchase for voice users\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003e4.8/5 accessibility rating\u003c/strong\u003e from users with motor impairments (up from 2.1/5)\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003e15,000+ voice commands\u003c/strong\u003e processed monthly with 94% accuracy\u003c/span\u003e\u003c/li\u003e\n\u003c/ul\u003e\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003eExample 2: Healthcare Dashboard for Hands-Free Operation\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eA hospital management system implemented Voice Nav to enable doctors and nurses to access patient records while performing procedures:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\nimport { VoiceNavProvider, useVoiceNav, reactRouterAdapter } from '@elevenlabs/ui';\nimport { useNavigate } from 'react-router-dom';\nimport { usePatientContext } from '@/contexts/patient';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport function HospitalDashboard() {\n const navigate = useNavigate();\n const { selectPatient, currentPatient } = usePatientContext();\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e return (\n \u003cVoiceNavProvider\n apiKey={process.env.ELEVENLABS_API_KEY!}\n adapter={reactRouterAdapter(navigate)}\n language=\"en-US\"\n enableContextTracking\n patterns={[\n // Patient selection by ID or name\n {\n pattern: /open patient (record )?(number |id )?(.+)/i,\n intent: {\n type: 'action',\n execute: async (match) =\u003e {\n const patientId = match[3];\n await selectPatient(patientId);\n navigate(\\\u003c/code\u003e/patients/\\${patientId}\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e);\n return {\n success: true,\n message: \\\u003c/code\u003eOpened record for patient \\${patientId}\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e,\n speak: \\\u003c/code\u003eNow viewing patient \\${patientId}\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\n };\n },\n },\n },\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // View specific sections\n {\n pattern: /show (patient )?(medical history|vitals|medications|allergies|notes)/i,\n intent: {\n type: 'navigate',\n target: (match) =\u003e {\n const section = match[2].replace(/\\s+/g, '-');\n return \\\u003c/code\u003e/patients/\\${currentPatient?.id}/\\${section}\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e;\n },\n },\n },\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Add clinical notes\n {\n pattern: /add (a )?note/i,\n intent: {\n type: 'action',\n execute: () =\u003e {\n // Opens voice-to-text note input\n openNoteDialog({ mode: 'voice' });\n return { success: true, message: 'Ready for note dictation' };\n },\n },\n },\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Search functionality\n {\n pattern: /search (for )?(.+)/i,\n intent: {\n type: 'navigate',\n target: (match) =\u003e \\\u003c/code\u003e/search?q=\\${encodeURIComponent(match[2])}\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e,\n },\n },\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Emergency protocols\n {\n pattern: /(emergency|code blue)/i,\n intent: {\n type: 'action',\n execute: () =\u003e {\n triggerEmergencyProtocol();\n return {\n success: true,\n message: 'Emergency protocol activated',\n priority: 'high'\n };\n },\n },\n },\n ]}\n onError={(error) =\u003e {\n // HIPAA-compliant error logging\n logSecureError(error);\n }}\n \u003e\n \u003cDashboardContent /\u003e\n \u003c/VoiceNavProvider\u003e\n );\n}\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e// Voice-activated note taking component\nfunction VoiceClinicalNotes() {\n const { state, transcript, startListening, stopListening } = useVoiceNav();\n const [notes, setNotes] = useState('');\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e useEffect(() =\u003e {\n if (state === 'idle' \u0026\u0026 transcript) {\n setNotes(prev =\u003e prev + ' ' + transcript);\n }\n }, [state, transcript]);\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e return (\n \u003cdiv className=\"clinical-notes\"\u003e\n \u003ctextarea\n value={notes}\n onChange={(e) =\u003e setNotes(e.target.value)}\n placeholder=\"Clinical notes...\"\n rows={10}\n /\u003e\n \u003cbutton\n onClick={state === 'listening' ? stopListening : startListening}\n className={state === 'listening' ? 'recording' : ''}\n \u003e\n {state === 'listening' ? 'Stop Recording' : 'Start Voice Dictation'}\n \u003c/button\u003e\n {state === 'listening' \u0026\u0026 (\n \u003cdiv className=\"live-transcript\"\u003e\n {transcript}\n \u003c/div\u003e\n )}\n \u003c/div\u003e\n );\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eResults:\u003c/strong\u003e\u003c/p\u003e\n\u003cul class=\"space-y-2 mb-6\"\u003e\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003e60% reduction\u003c/strong\u003e in time spent navigating medical records\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eZero touch\u003c/strong\u003e interactions during sterile procedures\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eHIPAA compliant\u003c/strong\u003e with end-to-end encryption for voice data\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003e98% transcription accuracy\u003c/strong\u003e for medical terminology after fine-tuning\u003c/span\u003e\u003c/li\u003e\n\u003c/ul\u003e\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003eExample 3: Automotive Showroom Interactive Displays\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eA luxury car manufacturer implemented Voice Nav in showroom touchscreen displays to enable contactless browsing:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\nimport { VoiceNavProvider, VoiceNavButton, nextRouterAdapter } from '@elevenlabs/ui';\nimport { useRouter } from 'next/navigation';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport function ShowroomKiosk() {\n const router = useRouter();\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e return (\n \u003cVoiceNavProvider\n apiKey={process.env.NEXT_PUBLIC_ELEVENLABS_API_KEY!}\n adapter={nextRouterAdapter(router)}\n language=\"en-US\"\n patterns={[\n // Vehicle browsing\n {\n pattern: /show me (the )?(.+) (model|models)/i,\n intent: {\n type: 'navigate',\n target: (match) =\u003e \\\u003c/code\u003e/vehicles/\\${match[2].toLowerCase()}\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e,\n },\n },\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Feature exploration\n {\n pattern: /what (features|options) are (available|included)/i,\n intent: { type: 'navigate', target: '/features' },\n },\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Virtual tour\n {\n pattern: /(start|begin) (a )?(virtual )?tour/i,\n intent: {\n type: 'action',\n execute: () =\u003e {\n startVirtualTour();\n return { success: true, message: 'Starting virtual tour' };\n },\n },\n },\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Color customization\n {\n pattern: /show (it|this|the car) in (.+)/i,\n intent: {\n type: 'action',\n execute: (match) =\u003e {\n const color = match[2];\n updateVehicleColor(color);\n return {\n success: true,\n message: \\\u003c/code\u003eShowing vehicle in \\${color}\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e,\n speak: \\\u003c/code\u003eHere's how it looks in \\${color}\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\n };\n },\n },\n },\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Pricing information\n {\n pattern: /(what's|what is) the price|how much (does it|is it)/i,\n intent: { type: 'navigate', target: '/pricing' },\n },\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Schedule test drive\n {\n pattern: /schedule (a )?test drive/i,\n intent: { type: 'navigate', target: '/schedule-test-drive' },\n },\n ]}\n \u003e\n \u003cdiv className=\"kiosk-interface\"\u003e\n \u003cVehicleViewer /\u003e\n \u003cdiv className=\"voice-prompt\"\u003e\n \u003cVoiceNavButton\n showTranscript\n showWaveform\n size=\"lg\"\n variant=\"default\"\n label=\"Try saying 'Show me the sedan models'\"\n /\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/VoiceNavProvider\u003e\n );\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eResults:\u003c/strong\u003e\u003c/p\u003e\n\u003cul class=\"space-y-2 mb-6\"\u003e\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003e85% of visitors\u003c/strong\u003e engaged with voice navigation (vs 45% with touch)\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003e40% longer\u003c/strong\u003e average session duration\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003e70% reduction\u003c/strong\u003e in surface touches (critical during COVID-19)\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003e3x increase\u003c/strong\u003e in test drive bookings from showroom visits\u003c/span\u003e\u003c/li\u003e\n\u003c/ul\u003e\u003ch2 class=\"retro-title text-2xl mt-10 mb-6 text-primary border-b-2 border-primary pb-2\"\u003eCommon Pitfalls\u003c/h2\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003ePitfall 1: Insufficient Error Handling for Speech Recognition Failures\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eProblem\u003c/strong\u003e: Network issues, background noise, or accents can cause speech recognition to fail or produce inaccurate transcripts. Apps that don't handle these gracefully frustrate users.\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eSolution\u003c/strong\u003e: Implement comprehensive error handling with fallback options:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\nimport { VoiceNavProvider } from '@elevenlabs/ui';\nimport { useState } from 'react';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport function RobustVoiceNav({ children }: { children: React.ReactNode }) {\n const [errors, setErrors] = useState\u003cstring[]\u003e([]);\n const [retryCount, setRetryCount] = useState(0);\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e return (\n \u003cVoiceNavProvider\n apiKey={process.env.ELEVENLABS_API_KEY!}\n adapter={routerAdapter}\n onError={(error) =\u003e {\n // Log error for debugging\n console.error('Voice Nav error:', error);\n setErrors(prev =\u003e [...prev, error.message]);\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Automatic retry with exponential backoff\n if (error.type === 'network' \u0026\u0026 retryCount \u003c 3) {\n setTimeout(() =\u003e {\n setRetryCount(prev =\u003e prev + 1);\n // Retry connection\n }, Math.pow(2, retryCount) * 1000);\n }\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Show user-friendly error message\n if (error.type === 'permission_denied') {\n toast.error('Microphone permission required for voice navigation');\n } else if (error.type === 'no_speech') {\n toast.warning('No speech detected. Please try again.');\n } else if (error.type === 'network') {\n toast.error('Connection issue. Retrying...');\n } else {\n toast.error('Voice navigation unavailable. Please use keyboard navigation.');\n }\n }}\n fallbackMode=\"keyboard\" // Enable keyboard shortcuts as fallback\n \u003e\n {children}\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e {/* Visual error indicator for debugging */}\n {process.env.NODE_ENV === 'development' \u0026\u0026 errors.length \u003e 0 \u0026\u0026 (\n \u003cdiv className=\"fixed bottom-4 right-4 bg-red-500 text-white p-4 rounded\"\u003e\n \u003ch4\u003eVoice Nav Errors:\u003c/h4\u003e\n \u003cul\u003e\n {errors.map((err, i) =\u003e \u003cli key={i}\u003e{err}\u003c/li\u003e)}\n \u003c/ul\u003e\n \u003c/div\u003e\n )}\n \u003c/VoiceNavProvider\u003e\n );\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eBest Practice\u003c/strong\u003e: Always provide alternative input methods. Voice should enhance, not replace, traditional navigation.\u003c/p\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003ePitfall 2: Ignoring Accessibility Beyond Voice\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eProblem\u003c/strong\u003e: Teams implement voice navigation and assume they've \"solved\" accessibility, while ignoring screen reader support, keyboard navigation, and visual indicators.\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eSolution\u003c/strong\u003e: Ensure Voice Nav complements existing accessibility features:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\nimport { VoiceNavProvider, VoiceNavButton } from '@elevenlabs/ui';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport function AccessibleApp({ children }: { children: React.ReactNode }) {\n return (\n \u003cVoiceNavProvider\n apiKey={process.env.ELEVENLABS_API_KEY!}\n adapter={routerAdapter}\n // Enable screen reader announcements\n announceIntents\n // Provide keyboard shortcuts\n keyboardShortcuts={{\n 'ctrl+shift+v': 'toggle_voice_listening',\n 'ctrl+shift+c': 'cancel_voice_command',\n }}\n // Manage focus after voice navigation\n autoFocus\n onNavigate={(route) =\u003e {\n // Announce navigation to screen readers\n announceToScreenReader(\\\u003c/code\u003eNavigated to \\${route}\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e);\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Focus first interactive element\n focusFirstInteractive();\n }}\n \u003e\n {/* Keyboard shortcut hint */}\n \u003cdiv className=\"sr-only\"\u003e\n Press Control + Shift + V to activate voice navigation\n \u003c/div\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e \u003cVoiceNavButton\n // Proper ARIA labels\n aria-label=\"Activate voice navigation\"\n aria-keyshortcuts=\"Control+Shift+V\"\n // Visual state indicators\n className=\"has-[aria-pressed=true]:ring-2 has-[aria-pressed=true]:ring-blue-500\"\n /\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e {children}\n \u003c/VoiceNavProvider\u003e\n );\n}\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e// Helper: Announce to screen readers\nfunction announceToScreenReader(message: string) {\n const announcement = document.createElement('div');\n announcement.setAttribute('role', 'status');\n announcement.setAttribute('aria-live', 'polite');\n announcement.setAttribute('aria-atomic', 'true');\n announcement.className = 'sr-only';\n announcement.textContent = message;\n document.body.appendChild(announcement);\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e setTimeout(() =\u003e announcement.remove(), 1000);\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eBest Practice\u003c/strong\u003e: Voice navigation should achieve WCAG 2.2 Level AAA compliance by working seamlessly with screen readers, keyboard navigation, and high contrast modes.\u003c/p\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003ePitfall 3: Over-Specific Intent Patterns\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eProblem\u003c/strong\u003e: Developers create rigid patterns that only match exact phrases, forcing users to memorize specific commands like a programming language.\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eSolution\u003c/strong\u003e: Design flexible patterns that understand variations and synonyms:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\n// Bad: Too specific\nconst badPatterns = [\n {\n pattern: /^go to settings$/i,\n intent: { type: 'navigate', target: '/settings' },\n },\n];\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e// Good: Flexible with variations\nconst goodPatterns = [\n {\n pattern: /(go to|open|show|view|navigate to) (the )?(settings|preferences|configuration|options)/i,\n intent: { type: 'navigate', target: '/settings' },\n },\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Handle natural follow-ups\n {\n pattern: /(and )?(also )?(change|update|modify|edit) (my )?(.+)/i,\n intent: {\n type: 'contextual',\n action: (match, context) =\u003e {\n // Use LLM for complex variations\n return classifyIntent(match[5], context);\n },\n },\n },\n];\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e// Even better: Use LLM classification for ambiguous input\nimport { VoiceNavProvider } from '@elevenlabs/ui';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cVoiceNavProvider\n apiKey={process.env.ELEVENLABS_API_KEY!}\n adapter={routerAdapter}\n patterns={goodPatterns}\n // Enable LLM fallback for unmatched patterns\n useLLMFallback\n llmConfig={{\n model: 'claude-3-5-sonnet-20241022',\n systemPrompt: \\\u003c/code\u003eYou are a navigation assistant for an e-commerce app.\n Extract the user's intent from their spoken command and return a navigation target.\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e Available routes:\n - /dashboard (home, main page)\n - /products (catalog, items, shop)\n - /cart (shopping cart, basket)\n - /orders (order history, purchases)\n - /settings (preferences, account)\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e Return format: { \"route\": \"/path\", \"confidence\": 0-1 }\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\n }}\n/\u003e\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eBest Practice\u003c/strong\u003e: Test intent patterns with diverse user groups and collect actual spoken commands to refine pattern matching.\u003c/p\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003ePitfall 4: No Confirmation for Destructive Actions\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eProblem\u003c/strong\u003e: Voice recognition isn't 100% accurate. Users might accidentally trigger destructive actions like \"delete account\" when they meant \"delete comment.\"\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eSolution\u003c/strong\u003e: Implement confirmation flows for high-risk actions:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\nimport { VoiceNavProvider } from '@elevenlabs/ui';\nimport { useState } from 'react';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport function SafeVoiceNav({ children }: { children: React.ReactNode }) {\n const [pendingAction, setPendingAction] = useState\u003cany\u003e(null);\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e return (\n \u003c\u003e\n \u003cVoiceNavProvider\n apiKey={process.env.ELEVENLABS_API_KEY!}\n adapter={routerAdapter}\n patterns={[\n // Destructive actions require confirmation\n {\n pattern: /delete (my )?(account|profile)/i,\n intent: {\n type: 'action',\n requiresConfirmation: true,\n execute: async () =\u003e {\n setPendingAction({\n type: 'delete_account',\n message: 'Delete your account? This cannot be undone.',\n });\n },\n },\n },\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Confirmation responses\n {\n pattern: /(yes|confirm|proceed|do it)/i,\n intent: {\n type: 'action',\n execute: async () =\u003e {\n if (pendingAction) {\n await executeDestructiveAction(pendingAction);\n setPendingAction(null);\n }\n },\n },\n },\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e {\n pattern: /(no|cancel|nevermind|stop)/i,\n intent: {\n type: 'action',\n execute: () =\u003e {\n setPendingAction(null);\n return { success: true, message: 'Action cancelled' };\n },\n },\n },\n ]}\n \u003e\n {children}\n \u003c/VoiceNavProvider\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e {/* Confirmation dialog */}\n {pendingAction \u0026\u0026 (\n \u003cConfirmationDialog\n message={pendingAction.message}\n onConfirm={() =\u003e {\n executeDestructiveAction(pendingAction);\n setPendingAction(null);\n }}\n onCancel={() =\u003e setPendingAction(null)}\n voiceEnabled // Can respond with voice \"yes\" or \"no\"\n /\u003e\n )}\n \u003c/\u003e\n );\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eBest Practice\u003c/strong\u003e: Categorize actions by risk level (low, medium, high) and require explicit confirmation for medium and high-risk actions.\u003c/p\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003ePitfall 5: Poor Performance on Mobile Devices\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eProblem\u003c/strong\u003e: Voice Nav's WebRTC connections and real-time processing can drain battery and consume data on mobile devices.\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eSolution\u003c/strong\u003e: Implement performance optimizations for mobile:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\nimport { VoiceNavProvider } from '@elevenlabs/ui';\nimport { useMediaQuery } from '@/hooks/use-media-query';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport function OptimizedVoiceNav({ children }: { children: React.ReactNode }) {\n const isMobile = useMediaQuery('(max-width: 768px)');\n const isLowPowerMode = useMediaQuery('(prefers-reduced-motion: reduce)');\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e return (\n \u003cVoiceNavProvider\n apiKey={process.env.ELEVENLABS_API_KEY!}\n adapter={routerAdapter}\n // Reduce quality on mobile to save bandwidth\n audioQuality={isMobile ? 'standard' : 'high'}\n // Disable waveform animations on low-power mode\n enableWaveform={!isLowPowerMode}\n // Close connection when tab is inactive\n pauseWhenInactive\n // Warn about data usage on cellular\n onConnectionStart={() =\u003e {\n if (isMobile \u0026\u0026 !isWifi()) {\n toast.warning('Voice navigation uses data. Connect to Wi-Fi for best experience.');\n }\n }}\n \u003e\n {children}\n \u003c/VoiceNavProvider\u003e\n );\n}\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e// Detect Wi-Fi vs cellular\nfunction isWifi(): boolean {\n if ('connection' in navigator) {\n const conn = (navigator as any).connection;\n return conn.type === 'wifi';\n }\n return true; // Assume Wi-Fi if unable to detect\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eBest Practice\u003c/strong\u003e: Monitor battery and data usage in production and adjust quality settings based on device capabilities.\u003c/p\u003e\n\u003ch2 class=\"retro-title text-2xl mt-10 mb-6 text-primary border-b-2 border-primary pb-2\"\u003eBest Practices\u003c/h2\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003e1. Design Intent Patterns Around User Goals\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eStructure voice commands around what users want to accomplish, not your application's technical structure:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\n// Bad: Mirrors technical structure\nconst technicalPatterns = [\n { pattern: /open users table/i, intent: { type: 'navigate', target: '/admin/database/users' } },\n { pattern: /run report query/i, intent: { type: 'navigate', target: '/admin/reports/query-builder' } },\n];\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e// Good: Aligned with user goals\nconst goalPatterns = [\n {\n pattern: /find (a )?user (named |called )?(.+)/i,\n intent: {\n type: 'navigate',\n target: (match) =\u003e \\\u003c/code\u003e/admin/users/search?q=\\${match[3]}\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\n }\n },\n {\n pattern: /show (me )?(sales|revenue|user) (report|data|stats)/i,\n intent: { type: 'navigate', target: '/admin/reports/dashboard' }\n },\n];\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003e2. Provide Discoverable Voice Commands\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eUsers can't use voice commands they don't know exist. Make commands discoverable:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\nimport { VoiceNavProvider, VoiceCommandPalette } from '@elevenlabs/ui';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport function App() {\n return (\n \u003cVoiceNavProvider\n apiKey={process.env.ELEVENLABS_API_KEY!}\n adapter={routerAdapter}\n patterns={voicePatterns}\n \u003e\n {/* Command palette showing available voice commands */}\n \u003cVoiceCommandPalette\n trigger={\u003cbutton\u003eView Voice Commands\u003c/button\u003e}\n groupBy=\"category\"\n showExamples\n /\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e {/* Contextual hints */}\n \u003cContextualVoiceHints /\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e {/* Main app */}\n \u003cAppContent /\u003e\n \u003c/VoiceNavProvider\u003e\n );\n}\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e// Show voice hints based on current page\nfunction ContextualVoiceHints() {\n const location = useLocation();\n const hints = getHintsForRoute(location.pathname);\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e return (\n \u003cdiv className=\"voice-hints\"\u003e\n \u003cp\u003eTry saying:\u003c/p\u003e\n \u003cul\u003e\n {hints.map(hint =\u003e (\n \u003cli key={hint}\u003e\u0026ldquo;{hint}\u0026rdquo;\u003c/li\u003e\n ))}\n \u003c/ul\u003e\n \u003c/div\u003e\n );\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003e3. Test with Real Users in Real Environments\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eVoice recognition performs differently in quiet offices vs. noisy environments. Test comprehensively:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\n// Set up A/B testing for voice accuracy\nimport { VoiceNavProvider } from '@elevenlabs/ui';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport function App() {\n return (\n \u003cVoiceNavProvider\n apiKey={process.env.ELEVENLABS_API_KEY!}\n adapter={routerAdapter}\n patterns={patterns}\n // Track accuracy metrics\n onIntent={(intent, transcript) =\u003e {\n analytics.track('voice_intent_detected', {\n intent: intent.type,\n target: intent.target,\n transcript,\n confidence: intent.confidence,\n });\n }}\n onError={(error) =\u003e {\n analytics.track('voice_error', {\n type: error.type,\n message: error.message,\n transcript: error.transcript,\n });\n }}\n // Collect user feedback\n enableFeedback\n onFeedback={(intent, wasCorrect) =\u003e {\n analytics.track('voice_feedback', {\n intent,\n wasCorrect,\n });\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Use feedback to improve patterns\n if (!wasCorrect) {\n suggestPatternImprovement(intent);\n }\n }}\n \u003e\n \u003cAppContent /\u003e\n \u003c/VoiceNavProvider\u003e\n );\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003e4. Implement Progressive Enhancement\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eVoice navigation should enhance your app, not be required for basic functionality:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\nimport { VoiceNavProvider } from '@elevenlabs/ui';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport function ProgressivelyEnhancedApp({ children }: { children: React.ReactNode }) {\n // Check if voice is supported\n const isVoiceSupported =\n typeof window !== 'undefined' \u0026\u0026\n 'mediaDevices' in navigator \u0026\u0026\n 'getUserMedia' in navigator.mediaDevices;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e // Feature detection for WebRTC\n const hasWebRTC =\n typeof RTCPeerConnection !== 'undefined';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e if (!isVoiceSupported || !hasWebRTC) {\n // Gracefully degrade - app works without voice\n return \u003c\u003e{children}\u003c/\u003e;\n }\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e return (\n \u003cVoiceNavProvider\n apiKey={process.env.ELEVENLABS_API_KEY!}\n adapter={routerAdapter}\n \u003e\n {children}\n \u003c/VoiceNavProvider\u003e\n );\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003e5. Monitor and Optimize Voice Patterns\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eUse analytics to identify which commands are used most and which patterns fail frequently:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\n// Generate analytics report\nSELECT\n intent_pattern,\n COUNT(*) as usage_count,\n AVG(confidence) as avg_confidence,\n SUM(CASE WHEN error THEN 1 ELSE 0 END) as error_count\nFROM voice_nav_events\nWHERE timestamp \u003e NOW() - INTERVAL '30 days'\nGROUP BY intent_pattern\nORDER BY usage_count DESC;\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e// Identify low-confidence patterns that need improvement\nSELECT\n transcript,\n matched_pattern,\n confidence,\n user_feedback\nFROM voice_nav_events\nWHERE confidence \u003c 0.7\n AND timestamp \u003e NOW() - INTERVAL '7 days'\nORDER BY confidence ASC\nLIMIT 100;\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eUse this data to refine patterns and add synonyms for commonly used phrases.\u003c/p\u003e\n\u003ch2 class=\"retro-title text-2xl mt-10 mb-6 text-primary border-b-2 border-primary pb-2\"\u003eGetting Started\u003c/h2\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003ePrerequisites\u003c/h3\u003e\n\u003cul class=\"space-y-2 mb-6\"\u003e\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eNode.js 18+ or Bun 1.0+\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eReact 18+\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eElevenLabs account with API access\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eModern browser with WebRTC support\u003c/span\u003e\u003c/li\u003e\n\u003c/ul\u003e\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003eStep 1: Create ElevenLabs Account\u003c/h3\u003e\n\u003cul class=\"space-y-2 mb-6\"\u003e\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e1. Sign up at https://elevenlabs.io\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eSign up at https://elevenlabs.io\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e2. Navigate to API settings\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eNavigate to API settings\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e3. Generate an API key\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eGenerate an API key\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e4. (Optional) Create a conversational AI agent for advanced NLU\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e(Optional) Create a conversational AI agent for advanced NLU\u003c/span\u003e\u003c/li\u003e\n\u003c/ul\u003e\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003eStep 2: Install Dependencies\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003ebash\n\u003ch1 class=\"retro-title text-3xl mt-8 mb-6\"\u003eUsing npm\u003c/h1\u003e\nnpm install @elevenlabs/ui\u003c/p\u003e\n\u003ch1 class=\"retro-title text-3xl mt-8 mb-6\"\u003eUsing pnpm\u003c/h1\u003e\npnpm add @elevenlabs/ui\n\u003ch1 class=\"retro-title text-3xl mt-8 mb-6\"\u003eUsing bun\u003c/h1\u003e\nbun add @elevenlabs/ui\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003eStep 3: Configure Environment Variables\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eCreate a \\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e.env.local\\\u003c/code\u003e file:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003eenv\n\u003ch1 class=\"retro-title text-3xl mt-8 mb-6\"\u003eElevenLabs credentials\u003c/h1\u003e\nNEXT_PUBLIC_ELEVENLABS_API_KEY=your_api_key_here\u003c/p\u003e\n\u003ch1 class=\"retro-title text-3xl mt-8 mb-6\"\u003eOptional: Agent ID for conversational AI\u003c/h1\u003e\nNEXT_PUBLIC_ELEVENLABS_AGENT_ID=your_agent_id_here\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003eStep 4: Set Up Voice Nav Provider\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eFor Next.js App Router:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\n// app/layout.tsx\nimport { VoiceNavProvider, nextRouterAdapter } from '@elevenlabs/ui';\nimport { useRouter } from 'next/navigation';\nimport '@elevenlabs/ui/styles.css'; // Import default styles\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport default function RootLayout({ children }: { children: React.ReactNode }) {\n const router = useRouter();\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e return (\n \u003chtml lang=\"en\"\u003e\n \u003cbody\u003e\n \u003cVoiceNavProvider\n apiKey={process.env.NEXT_PUBLIC_ELEVENLABS_API_KEY!}\n adapter={nextRouterAdapter(router)}\n patterns={[\n {\n pattern: /go (to )?(home|homepage)/i,\n intent: { type: 'navigate', target: '/' },\n },\n {\n pattern: /show (me )?(the )?about (page|us)/i,\n intent: { type: 'navigate', target: '/about' },\n },\n ]}\n \u003e\n {children}\n \u003c/VoiceNavProvider\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n );\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eFor React Router:\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\n// App.tsx\nimport { VoiceNavProvider, reactRouterAdapter } from '@elevenlabs/ui';\nimport { useNavigate } from 'react-router-dom';\nimport '@elevenlabs/ui/styles.css';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport function App() {\n const navigate = useNavigate();\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e return (\n \u003cVoiceNavProvider\n apiKey={process.env.ELEVENLABS_API_KEY!}\n adapter={reactRouterAdapter(navigate)}\n patterns={[\n { pattern: /home/i, intent: { type: 'navigate', target: '/' } },\n { pattern: /about/i, intent: { type: 'navigate', target: '/about' } },\n ]}\n \u003e\n \u003cRoutes\u003e\n \u003cRoute path=\"/\" element={\u003cHome /\u003e} /\u003e\n \u003cRoute path=\"/about\" element={\u003cAbout /\u003e} /\u003e\n \u003c/Routes\u003e\n \u003c/VoiceNavProvider\u003e\n );\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003eStep 5: Add Voice Nav Button\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003etypescript\n// components/Navigation.tsx\nimport { VoiceNavButton } from '@elevenlabs/ui';\nimport { Mic } from 'lucide-react';\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eexport function Navigation() {\n return (\n \u003cnav className=\"flex items-center justify-between p-4\"\u003e\n \u003cLogo /\u003e\n \u003cdiv className=\"flex gap-4\"\u003e\n \u003cNavLink href=\"/\"\u003eHome\u003c/NavLink\u003e\n \u003cNavLink href=\"/about\"\u003eAbout\u003c/NavLink\u003e\n \u003cNavLink href=\"/contact\"\u003eContact\u003c/NavLink\u003e\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e {/* Voice navigation button */}\n \u003cVoiceNavButton\n icon={Mic}\n showTranscript\n showWaveform\n size=\"md\"\n variant=\"outline\"\n /\u003e\n \u003c/div\u003e\n \u003c/nav\u003e\n );\n}\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003eStep 6: Test Voice Navigation\u003c/h3\u003e\n\u003cul class=\"space-y-2 mb-6\"\u003e\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e1. Start your development server:\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eStart your development server:\u003c/span\u003e\u003c/li\u003e\n\u003c/ul\u003e\u003cp class=\"mb-6 leading-relaxed text-base\"\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003ebash\nnpm run dev\n\\\u003c/code\u003e\\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003e\\\u003c/code\u003e\u003c/p\u003e\n\u003cul class=\"space-y-2 mb-6\"\u003e\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e2. Open your application in a modern browser\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eOpen your application in a modern browser\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e3. Click the voice navigation button\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eClick the voice navigation button\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e4. Grant microphone permission when prompted\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eGrant microphone permission when prompted\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e5. Try saying: \"Go to about page\"\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eTry saying: \"Go to about page\"\u003c/span\u003e\u003c/li\u003e\n\u003c/ul\u003e\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eYou should see:\n\u003cul class=\"space-y-2 mb-6\"\u003e\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eLive transcript appearing as you speak\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eWaveform animation during recording\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eNavigation to the /about page\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-bold text-lg mt-0.5\"\u003e•\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003eVisual confirmation of the action\u003c/span\u003e\u003c/li\u003e\u003c/ul\u003e\u003c/p\u003e\n\u003ch3 class=\"retro-subtitle text-xl mt-8 mb-4 text-primary border-l-4 border-primary pl-4 bg-primary/5 py-2 rounded-r\"\u003eNext Steps\u003c/h3\u003e\n\u003cul class=\"space-y-2 mb-6\"\u003e\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e1. \u003cstrong class=\"text-primary font-semibold\"\u003eAdd more patterns\u003c/strong\u003e: Define voice commands for all major routes\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eAdd more patterns\u003c/strong\u003e: Define voice commands for all major routes\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e2. \u003cstrong class=\"text-primary font-semibold\"\u003eImplement custom actions\u003c/strong\u003e: Use the \\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003eexecute\\\u003c/code\u003e function for non-navigation actions\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eImplement custom actions\u003c/strong\u003e: Use the \\\u003ccode class=\"bg-primary/10 text-primary px-2 py-1 rounded text-sm font-mono border border-primary/20\"\u003eexecute\\\u003c/code\u003e function for non-navigation actions\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e3. \u003cstrong class=\"text-primary font-semibold\"\u003eEnable analytics\u003c/strong\u003e: Track usage and accuracy metrics\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eEnable analytics\u003c/strong\u003e: Track usage and accuracy metrics\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e4. \u003cstrong class=\"text-primary font-semibold\"\u003eTest accessibility\u003c/strong\u003e: Ensure compatibility with screen readers\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eTest accessibility\u003c/strong\u003e: Ensure compatibility with screen readers\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e5. \u003cstrong class=\"text-primary font-semibold\"\u003eOptimize for production\u003c/strong\u003e: Configure error handling and fallbacks\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eOptimize for production\u003c/strong\u003e: Configure error handling and fallbacks\u003c/span\u003e\u003c/li\u003e\n\u003c/ul\u003e\u003ch2 class=\"retro-title text-2xl mt-10 mb-6 text-primary border-b-2 border-primary pb-2\"\u003eConclusion\u003c/h2\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eElevenLabs UI Voice Nav represents a paradigm shift in how users interact with web applications. By providing production-ready components for voice-based navigation, the library eliminates the technical barriers that have historically prevented developers from building accessible, voice-first interfaces.\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eFor modern web development teams, Voice Nav offers three transformative capabilities:\u003c/p\u003e\n\u003cul class=\"space-y-2 mb-6\"\u003e\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e1. \u003cstrong class=\"text-primary font-semibold\"\u003eAccessibility at Scale\u003c/strong\u003e: Enable universal access to web applications without custom accessibility engineering for every feature.\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eAccessibility at Scale\u003c/strong\u003e: Enable universal access to web applications without custom accessibility engineering for every feature.\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e2. \u003cstrong class=\"text-primary font-semibold\"\u003eConversational Interfaces\u003c/strong\u003e: Meet users' growing expectations for natural language interactions by allowing them to navigate and control applications through speech.\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eConversational Interfaces\u003c/strong\u003e: Meet users' growing expectations for natural language interactions by allowing them to navigate and control applications through speech.\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"flex items-start gap-3 mb-3\"\u003e\u003cspan class=\"text-primary font-mono font-bold bg-primary/10 px-2 py-0.5 rounded text-sm mt-0.5\"\u003e3. \u003cstrong class=\"text-primary font-semibold\"\u003eFuture-Proof Architecture\u003c/strong\u003e: Prepare applications for a voice-first future where traditional input methods are supplemented or replaced by conversational AI.\u003c/span\u003e\u003cspan class=\"flex-1 leading-relaxed\"\u003e\u003cstrong class=\"text-primary font-semibold\"\u003eFuture-Proof Architecture\u003c/strong\u003e: Prepare applications for a voice-first future where traditional input methods are supplemented or replaced by conversational AI.\u003c/span\u003e\u003c/li\u003e\n\u003c/ul\u003e\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eThe library's integration with React and major routing frameworks ensures that adding voice navigation is measured in hours, not weeks. Whether you're building an e-commerce platform, healthcare dashboard, or automotive kiosk, Voice Nav provides the foundation to create interfaces that understand what users say, not just what they click.\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eAs voice becomes the primary interface for emerging platforms—from smart glasses to automotive systems to accessibility devices—web applications that embrace voice-first design will have a significant competitive advantage. ElevenLabs UI Voice Nav makes that future accessible today, providing the open-source toolkit to transform any React application into a voice-controlled, universally accessible digital experience.\u003c/p\u003e\n\u003cp class=\"mb-6 leading-relaxed text-base\"\u003eThe question is no longer whether to implement voice navigation—it's whether you can afford to leave users behind who expect, need, or prefer to use voice as their primary input method.\u003c/p\u003e"])</script><script>self.__next_f.push([1,"f:[\"$\",\"div\",null,{\"className\":\"article-reading-glow min-h-screen\",\"children\":[\"$\",\"article\",null,{\"className\":\"max-w-4xl mx-auto relative z-10\",\"children\":[[\"$\",\"header\",null,{\"className\":\"mb-8 p-6 bg-card/50 backdrop-blur-sm rounded-xl border border-border/50 shadow-lg\",\"style\":{\"boxShadow\":\"0 8px 32px rgba(var(--primary-rgb, 217, 119, 6), 0.1)\"},\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-3\",\"children\":[\"$\",\"$L22\",null,{\"href\":\"/\",\"className\":\"text-primary hover:underline font-mono text-xs category-badge-glow inline-block px-2 py-1 rounded transition-all duration-300\",\"children\":\"← Back to Home\"}]}],[\"$\",\"div\",null,{\"className\":\"mb-3\",\"children\":[\"$\",\"span\",null,{\"className\":\"inline-block px-3 py-1 bg-primary/20 text-primary font-mono text-xs uppercase rounded category-badge-glow\",\"children\":\"React/Frontend\"}]}],[\"$\",\"h1\",null,{\"className\":\"retro-title text-2xl md:text-3xl mb-3 leading-tight gradient-text-theme\",\"children\":\"ElevenLabs UI Voice Nav: Building the Future of Voice-First Web Navigation\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-muted-foreground mb-3 leading-relaxed\",\"children\":\"ElevenLabs UI introduces voice navigation components that transform how users interact with web applications. This open-source library enables developers to build accessible, voice-controlled interfaces with natural language processing, hands-free navigation, and seamless integration into React applications—bringing the future of conversational UI to the modern web.\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-4 text-xs text-muted-foreground\",\"children\":[\"$\",\"span\",null,{\"children\":[\"Published: \",\"9/22/2025\"]}]}],[\"$\",\"div\",null,{\"className\":\"w-24 h-0.5 bg-gradient-to-r from-primary to-accent mt-4 rounded-full shadow-sm\",\"style\":{\"boxShadow\":\"0 0 8px rgba(var(--primary-rgb, 217, 119, 6), 0.3)\"}}]]}],[\"$\",\"div\",null,{\"className\":\"prose prose-lg dark:prose-invert max-w-none\",\"children\":[[\"$\",\"div\",null,{\"className\":\"article-content-card\",\"children\":[\"$\",\"div\",null,{\"className\":\"article-content\",\"dangerouslySetInnerHTML\":{\"__html\":\"$23\"}}]}],\"$L24\",\"$L25\"]}],\"$L26\"]}]}]\n"])</script><script>self.__next_f.push([1,"24:[\"$\",\"div\",null,{\"className\":\"article-content-card\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"retro-subtitle text-2xl mb-6 gradient-text-theme\",\"children\":\"Key Features\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"li\",\"0\",{\"className\":\"flex flex-col gap-2 p-4 rounded-lg bg-primary/5 border border-primary/10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-start gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-primary font-mono text-lg mt-0.5 shadow-sm\",\"children\":\"▸\"}],[\"$\",\"span\",null,{\"className\":\"font-semibold text-primary flex-1\",\"children\":\"Voice-First Navigation\"}]]}],[\"$\",\"p\",null,{\"className\":\"text-muted-foreground ml-7 text-sm\",\"children\":\"Natural language interface for web navigation\"}]]}],[\"$\",\"li\",\"1\",{\"className\":\"flex flex-col gap-2 p-4 rounded-lg bg-primary/5 border border-primary/10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-start gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-primary font-mono text-lg mt-0.5 shadow-sm\",\"children\":\"▸\"}],[\"$\",\"span\",null,{\"className\":\"font-semibold text-primary flex-1\",\"children\":\"React Components\"}]]}],[\"$\",\"p\",null,{\"className\":\"text-muted-foreground ml-7 text-sm\",\"children\":\"Prebuilt components for voice integration\"}]]}],[\"$\",\"li\",\"2\",{\"className\":\"flex flex-col gap-2 p-4 rounded-lg bg-primary/5 border border-primary/10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-start gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-primary font-mono text-lg mt-0.5 shadow-sm\",\"children\":\"▸\"}],[\"$\",\"span\",null,{\"className\":\"font-semibold text-primary flex-1\",\"children\":\"Accessibility\"}]]}],[\"$\",\"p\",null,{\"className\":\"text-muted-foreground ml-7 text-sm\",\"children\":\"WCAG-compliant voice interfaces\"}]]}],[\"$\",\"li\",\"3\",{\"className\":\"flex flex-col gap-2 p-4 rounded-lg bg-primary/5 border border-primary/10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-start gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-primary font-mono text-lg mt-0.5 shadow-sm\",\"children\":\"▸\"}],[\"$\",\"span\",null,{\"className\":\"font-semibold text-primary flex-1\",\"children\":\"Real-time Processing\"}]]}],[\"$\",\"p\",null,{\"className\":\"text-muted-foreground ml-7 text-sm\",\"children\":\"Low-latency voice command processing\"}]]}],[\"$\",\"li\",\"4\",{\"className\":\"flex flex-col gap-2 p-4 rounded-lg bg-primary/5 border border-primary/10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-start gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-primary font-mono text-lg mt-0.5 shadow-sm\",\"children\":\"▸\"}],[\"$\",\"span\",null,{\"className\":\"font-semibold text-primary flex-1\",\"children\":\"Custom Commands\"}]]}],[\"$\",\"p\",null,{\"className\":\"text-muted-foreground ml-7 text-sm\",\"children\":\"Extensible command system\"}]]}],[\"$\",\"li\",\"5\",{\"className\":\"flex flex-col gap-2 p-4 rounded-lg bg-primary/5 border border-primary/10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-start gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-primary font-mono text-lg mt-0.5 shadow-sm\",\"children\":\"▸\"}],[\"$\",\"span\",null,{\"className\":\"font-semibold text-primary flex-1\",\"children\":\"Multi-language Support\"}]]}],[\"$\",\"p\",null,{\"className\":\"text-muted-foreground ml-7 text-sm\",\"children\":\"Voice recognition in multiple languages\"}]]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"25:[\"$\",\"div\",null,{\"className\":\"article-content-card\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"retro-subtitle text-2xl mb-6 gradient-text-theme\",\"children\":\"Related Links\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"li\",\"0\",{\"className\":\"p-3 rounded-lg bg-accent/5 border border-accent/10\",\"children\":[\"$\",\"a\",null,{\"href\":\"https://elevenlabs.com\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-primary hover:text-accent font-mono text-sm break-all transition-colors duration-300 category-badge-glow inline-block\",\"children\":[\"elevenlabs.com\",\" ↗\"]}]}],[\"$\",\"li\",\"1\",{\"className\":\"p-3 rounded-lg bg-accent/5 border border-accent/10\",\"children\":[\"$\",\"a\",null,{\"href\":\"https://github.com/elevenlabs/ui-voice-nav\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-primary hover:text-accent font-mono text-sm break-all transition-colors duration-300 category-badge-glow inline-block\",\"children\":[\"GitHub\",\" ↗\"]}]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"26:[\"$\",\"nav\",null,{\"className\":\"mt-8 flex flex-col sm:flex-row gap-4 sm:justify-between p-6 bg-card/30 backdrop-blur-sm rounded-xl border border-border/50\",\"style\":{\"boxShadow\":\"0 4px 16px rgba(var(--primary-rgb, 217, 119, 6), 0.05)\"},\"children\":[[\"$\",\"$L22\",null,{\"href\":\"/articles\",\"className\":\"category-badge-glow\",\"children\":[\"$\",\"button\",null,{\"className\":\"retro-button retro-button-secondary\",\"children\":\"All Articles\"}]}],[\"$\",\"$L22\",null,{\"href\":\"/\",\"className\":\"category-badge-glow\",\"children\":[\"$\",\"button\",null,{\"className\":\"retro-button\",\"children\":\"Back to Home\"}]}]]}]\n"])</script></body></html>