Voice input in je SaaS bouwen met Claude Code: zo voeg je spraakcommando's toe

Wispr Flow bewijst: voice AI is geen gimmick meer

Wispr Flow rapporteert versnelde groei nadat ze Hinglish-ondersteuning uitrolden in India. Dat klinkt als een niche verhaal, maar het signaal is groter: gebruikers in alle markten willen dicteren in plaats van typen, zeker op mobiel. Voice input gaat van "cool experiment" naar verwachte basisfeature in productiviteits-apps.

Als je een SaaS bouwt voor coaches, consultants, ZZP'ers of andere professionals die veel onderweg zijn, is dit het moment om voice serieus te nemen.

Wat betekent dit voor jouw project?

Als je een formulier, notitieveld of zoekopdracht in je app hebt, kun je daar vanavond een microfoon-knop bij zetten. Geen externe API nodig voor de basis: de browser doet het zware werk via de ingebouwde Web Speech API. Claude Code schrijft de hele integratie voor je, inclusief de UI-component en de state management.

Hoe pak je het aan met Claude Code?

Stap 1: vertel Claude Code wat je wilt bouwen

Open Claude Code in je projectmap en start met een heldere context-setting:

Ik heb een Next.js 14 app met App Router. Ik wil een herbruikbare React component maken die spraakopname via de Web Speech API afhandelt. De component moet:

• een microfoon-knop tonen
• opname starten en stoppen bij klikken
• de herkende tekst teruggeven via een onResult callback
• visueel aangeven wanneer hij luistert (pulserende animatie)
• graceful degraden als de browser geen Web Speech API ondersteunt Gebruik TypeScript en Tailwind CSS.

Stap 2: laat de component genereren en controleer de output

Claude Code genereert zoiets als dit als startpunt:

// components/VoiceInput.tsx
'use client';

import { useState, useRef, useCallback } from 'react';
import { Mic, MicOff } from 'lucide-react';

interface VoiceInputProps {
  onResult: (transcript: string) => void;
  language?: string;
}

export function VoiceInput({ onResult, language = 'nl-NL' }: VoiceInputProps) {
  const [isListening, setIsListening] = useState(false);
  const [isSupported] = useState(
    typeof window !== 'undefined' && 'webkitSpeechRecognition' in window
  );
  const recognitionRef = useRef<SpeechRecognition | null>(null);

  const startListening = useCallback(() => {
    if (!isSupported) return;

    const SpeechRecognition =
      window.SpeechRecognition || window.webkitSpeechRecognition;
    const recognition = new SpeechRecognition();

    recognition.lang = language;
    recognition.interimResults = false;
    recognition.maxAlternatives = 1;

    recognition.onresult = (event) => {
      const transcript = event.results[0][0].transcript;
      onResult(transcript);
      setIsListening(false);
    };

    recognition.onerror = () => setIsListening(false);
    recognition.onend = () => setIsListening(false);

    recognitionRef.current = recognition;
    recognition.start();
    setIsListening(true);
  }, [isSupported, language, onResult]);

  const stopListening = useCallback(() => {
    recognitionRef.current?.stop();
    setIsListening(false);
  }, []);

  if (!isSupported) return null;

  return (
    <button
      onClick={isListening ? stopListening : startListening}
      className={`p-2 rounded-full transition-all ${
        isListening
          ? 'bg-red-500 animate-pulse text-white'
          : 'bg-gray-100 hover:bg-gray-200 text-gray-600'
      }`}
      aria-label={isListening ? 'Stop opname' : 'Start spraakopname'}
    >
      {isListening ? <MicOff size={20} /> : <Mic size={20} />}
    </button>
  );
}

Stap 3: integreer de component in een bestaand formulier

Vraag Claude Code nu om de component in te pluggen op een plek in jouw app:

Voeg de VoiceInput component toe aan mijn [naam van je formulier of pagina]. Zet de microfoon-knop rechts in het tekstveld. Als er een resultaat binnenkomt, voeg het dan toe aan de huidige waarde van het veld (niet vervangen, maar aanvullen). Gebruik de bestaande form state.

Claude Code past je bestaande component aan zonder de rest van de logica te breken.

Stap 4: taal instellen op Nederlands

De Web Speech API ondersteunt meerdere talen. Voor Nederlandse gebruikers wil je dit altijd meegeven:

<VoiceInput
  language="nl-NL"
  onResult={(text) => setFieldValue(prev => prev + ' ' + text)}
/>

Wil je ook Engels ondersteunen? Vraag Claude Code:

Voeg een taal-toggle toe aan de VoiceInput component zodat de gebruiker kan wisselen tussen nl-NL en en-US. Sla de voorkeur op in localStorage.

Stap 5: testen en edge cases afvangen

Vraag Claude Code om een paar realistische edge cases te behandelen:

Zorg dat de component ook correct werkt als:

• de gebruiker microfoon-toegang weigert in de browser
• de spraakherkenning geen resultaat oplevert (timeout)
• de component unmount terwijl de opname actief is Voeg in elk geval een korte foutmelding toe die maximaal 3 seconden zichtbaar is.

Wat te checken na afloop

• Opent de browser een toestemmingspop-up voor microfoon bij het eerste gebruik? (zo ja, werkt het)
• Verschijnt de pulserende animatie tijdens het luisteren?
• Wordt de tekst correct toegevoegd aan het veld, ook als er al iets instaat?
• Toont de component niets (niet crasht) in Firefox of Safari als Web Speech API niet beschikbaar is?
• Werkt het op je telefoon? Test het met een mobiele browser, want daar is het het meest waardevol.

Kleine toevoeging, groot effect op de gebruikerservaring. Zeker voor je mobiele bezoekers.