Construire un Assistant Vocal Interactif

Du prototype a l’assistant vocal en production

Maintenant que vous maitrisez le Voice Agent et le TTS, voyons comment les combiner pour construire des assistants vocaux concrets. Cette lecon couvre trois architectures classiques et leurs patterns d’implementation.

Architecture 1 : Assistant web dans le navigateur

Le cas le plus simple est un assistant vocal integre a une application web. L’utilisateur clique sur un bouton micro, parle, et l’assistant repond vocalement.

Flux technique

1. L’utilisateur clique sur le bouton : vous demarrez la capture audio via MediaRecorder ou AudioWorklet
2. L’audio capture est converti en PCM base64 et envoye au Voice Agent via WebSocket
3. Le VAD serveur detecte la fin de la parole et genere une reponse
4. Les chunks audio de reponse arrivent via response.output_audio.delta
5. Vous les decodez et les jouez via AudioContext

Considerations navigateur

• Safari : le AudioContext doit etre cree dans un gestionnaire d’evenement utilisateur (clic, tap). Creez-le au premier clic sur le bouton micro
• Autoplay : les navigateurs bloquent la lecture audio automatique. Attendez toujours une interaction utilisateur avant de jouer de l’audio
• Format : utilisez PCM ou MP3 pour la sortie. Les formats mulaw/alaw ne sont pas lisibles nativement dans le navigateur
• Securite : n’exposez jamais votre cle API dans le code client. Utilisez les tokens ephemeres (lecon 13)

Gestion du microphone

const stream = await navigator.mediaDevices.getUserMedia({
  audio: {
    sampleRate: 24000,
    channelCount: 1,
    echoCancellation: true,
    noiseSuppression: true
  }
});

Activez echoCancellation et noiseSuppression pour eviter que la reponse de l’assistant ne soit capturee par le micro (effet Larsen).

Architecture 2 : Assistant mobile (React Native / Flutter)

Pour les applications mobiles, le principe est identique mais avec des specificites :

• Capture audio : utilisez les APIs natives (AVAudioEngine sur iOS, AudioRecord sur Android) pour une meilleure qualite
• Gestion de la connexion : le WebSocket peut se deconnecter quand l’application passe en arriere-plan. Prevoyez une reconnexion automatique
• Mode haut-parleur vs ecouteur : gerez le routage audio selon le contexte d’utilisation
• Bluetooth : testez avec des casques Bluetooth qui introduisent une latence supplementaire

Architecture 3 : Assistant kiosque / borne interactive

Pour les bornes en magasin, en hotel ou dans un musee :

• Micro directionnel : preferez un micro cardioide pour capter uniquement la personne devant la borne
• VAD stricte : augmentez le threshold du VAD (0.9+) pour ignorer les bruits ambiants du lieu
• Timeout de session : fermez la session apres 2-3 minutes d’inactivite pour liberer les ressources
• Mode push-to-talk : envisagez le mode manuel avec un bouton physique dans les environnements bruyants

Patterns communs

Gestion de l’historique conversationnel

Le Voice Agent maintient l’historique de la conversation pendant toute la duree de la session. Mais si vous voulez pre-remplir le contexte (par exemple, les informations du client connecte), utilisez conversation.item.create au debut :

{
  "type": "conversation.item.create",
  "item": {
    "type": "message",
    "role": "system",
    "content": [
      {
        "type": "text",
        "text": "Le client connecte est Marie Dupont, numero client C-4521. Elle a une commande en cours CMD-8834."
      }
    ]
  }
}

Message d’accueil

Envoyez un response.create avec un message initial pour que l’agent se presente :

{
  "type": "conversation.item.create",
  "item": {
    "type": "message",
    "role": "user",
    "content": [{ "type": "text", "text": "Bonjour" }]
  }
}

Suivi de { "type": "response.create" } pour declencher la reponse d’accueil.

Feedback visuel

Pendant que l’agent parle, affichez un indicateur visuel (onde sonore, avatar anime). Pendant que l’utilisateur parle, affichez un indicateur de capture. Ces retours visuels ameliorent considerablement l’experience utilisateur.

Points cles a retenir

• Trois architectures principales : web, mobile et kiosque, chacune avec ses contraintes specifiques
• La gestion audio dans le navigateur necessite des precautions (Safari AudioContext, autoplay policy)
• Pre-remplissez le contexte conversationnel avec conversation.item.create pour personnaliser l’experience
• Un message d’accueil et du feedback visuel ameliorent significativement l’experience utilisateur