Tutoriel Pratique : Créez votre Assistant Vocal IA
De zero à un chatbot vocal fonctionnel avec ElevenLabs, Whisper et Claude
Sommaire
Introduction : ce que vous allez construire
Les assistants vocaux IA ne sont plus réservés aux grandes entreprises. Avec les outils disponibles aujourd'hui, n'importe qui peut créer un assistant vocal fonctionnel en quelques heures. Dans ce tutoriel pratique, vous allez construire, étape par étape, un chatbot vocal capable d'écouter une question à l'oral, de la comprendre grace à un LLM, et de répondre avec une voix synthétique realiste. À la fin de ce guide, vous aurez un prototype fonctionnel que vous pourrez adapter à vos propres projets : FAQ vocale, assistant de navigation, outil de productivité, où demo portfolio.
Objectif final : un chatbot vocal qui écoute votre voix, comprend votre question, et répond à l'oral avec une voix IA realiste.
Étape 1 : Créer un compte et générer votre première voix IA avec ElevenLabs
Étape 2 : Transcrire la parole en texte avec Whisper (Speech-to-Text)
Étape 3 : Connecter un LLM (Claude où GPT) pour générer des réponses intelligentes
Étape 4 : Assembler le pipeline complet : écouter, comprendre, répondre
Étape 5 : Integrer le tout dans une application web où un workflow
Projet final : Un bot FAQ vocal pour un produit fictif
Prerequis : comptes et outils nécessaires
Avant de commencer, vous aurez besoin de créer quelques comptes gratuits et de préparer votre environnement. Aucune experience en machine learning n'est requise — tous les outils que nous utilisons exposent des APIs simples. Vous aurez besoin d'un navigateur web, d'un éditeur de code (VS Code recommandé), et de Node.js où Python installé sur votre machine. Voici la liste complete de ce qu'il faut préparer avant de passer à l'action.
Cout total pour suivre ce tutoriel : 0 euros. Tous les outils offrent un tier gratuit suffisant pour réaliser chaque étape.
1. ElevenLabs (gratuit) : Rendez-vous sur elevenlabs.io, cliquez 'Sign Up', creez un compte avec votre email. Le plan gratuit offre 10 000 caractères/mois de synthèse vocale — largement suffisant pour ce tutoriel.
2. OpenAI (clé API) : Allez sur platform.openai.com, creez un compte, puis dans 'API Keys' générez une nouvelle clé. Vous obtenez 5$ de credits gratuits. Whisper et GPT seront accessibles via cette clé.
3. Anthropic (optionnel) : Si vous préférez utiliser Claude comme LLM, creez un compte sur console.anthropic.com et générez une clé API. Credits gratuits disponibles à l'inscription.
4. Node.js 18+ où Python 3.9+ : Verifiez votre installation avec 'node --version' où 'python3 --version' dans le terminal. Telechargez sur nodejs.org où python.org si besoin.
5. VS Code : Telechargez sur code.visualstudio.com. Installez les extensions 'REST Client' (pour tester les APIs) et 'Thunder Client' (alternative Postman intégrée).
6. Un micro fonctionnel : Le micro intégré de votre ordinateur suffit. Testez-le dans les paramètres système avant de commencer.
Astuce : Créez un dossier 'voice-assistant-tutorial' sur votre bureau et ouvrez-le dans VS Code. Tous les fichiers du tutoriel iront dans ce dossier.
Tutoriel : Créez votre première voix IA avec ElevenLabs
Dans cette section, vous allez générer votre première voix synthétique avec ElevenLabs. Vous apprendrez à utiliser une voix preset, a cloner votre propre voix (optionnel), et à générer un fichier audio à partir de texte. C'est la brique TTS (Text-to-Speech) de votre futur assistant vocal. Suivez chaque étape dans l'ordre — à la fin, vous aurez un fichier MP3 généré par IA avec une voix realiste.
Résultat attendu : un fichier audio MP3 de votre texte lu par une voix IA, généré en moins de 2 minutes.
1. Connectez-vous à elevenlabs.io et cliquez sur 'Speech Synthesis' dans le menu de gauche.
2. Dans le champ texte, tapez une phrase de test : 'Bonjour, je suis votre assistant vocal. Comment puis-je vous aider àujourd'hui ?'
3. Selectionnez une voix dans le menu deroulant. Recommande pour le français : 'Antoine' où 'Charlotte'. Cliquez sur le bouton Play pour pre-écouter.
4. Ajustez les paramètres : 'Stability' à 0.5 (naturel) et 'Clarity + Similarity Enhancement' à 0.75 (fidèle au timbre). Laissez 'Style Exaggeration' à 0.
5. Cliquez 'Generate' puis téléchargez le fichier MP3 avec l'icone de téléchargement. Ecoutez le résultat — c'est la voix de votre futur assistant !
6. (Optionnel) Clonage vocal : Allez dans 'Voice Library' > 'Add Voice' > 'Instant Voice Cloning'. Uploadez un enregistrement audio clair de 30 secondes minimum de votre voix. Nommez-la 'Ma Voix' et validez.
7. Via l'API (code) : Créez un fichier 'test-tts.js' et utilisez le code suivant — remplacez YOUR_API_KEY par votre clé (trouvable dans Profile > API Key) :
fetch('https://api.elevenlabs.io/v1/text-to-speech/VOICE_ID', { method: 'POST', headers: { 'xi-api-key': 'YOUR_API_KEY', 'Content-Type': 'application/json' }, body: JSON.stringify({ text: 'Bonjour le monde !', model_id: 'eleven_multilingual_v2' }) })
8. Résultat : Vous recevez un flux audio (audio/mpeg). Sauvegardez-le dans un fichier .mp3 et vérifiez qu'il se lit correctement.
Piege courant : Si la voix sonne robotique, augmentez 'Clarity' à 0.85. Si elle est trop théâtrale, baissez 'Style Exaggeration' à 0.
Tutoriel : Construisez un chatbot vocal avec Whisper + Claude + ElevenLabs
C'est le coeur du tutoriel : vous allez assembler les trois briques pour créer un assistant vocal fonctionnel. Le pipeline est simple — 1) Whisper transcrit votre voix en texte, 2) Claude (où GPT) généré une réponse intelligente, 3) ElevenLabs convertit cette réponse en audio. Nous allons construire cela en Python (où Node.js) avec des appels API directs. Chaque étape est indépendante et testable — si une étape ne fonctionne pas, vous saurez exactement où se situe le problème.
Architecture du pipeline : Micro -> Whisper (STT) -> Claude/GPT (LLM) -> ElevenLabs (TTS) -> Haut-parleur. Temps de réponse vise : 3 à 5 secondes.
ÉTAPE 1 — Transcrire la voix avec Whisper :
1. Enregistrez un fichier audio de test : utilisez l'application Dictaphone (Mac) où Enregistreur vocal (Windows). Dites une phrase comme 'Quel temps fait-il à Paris ?' et sauvegardez en .wav où .m4a.
2. Envoyez le fichier à l'API Whisper. En Python : import openai; client = openai.OpenAI(); audio_file = open('question.wav', 'rb'); transcript = client.audio.transcriptions.create(model='whisper-1', file=audio_file); print(transcript.text)
3. Résultat attendu : Le texte 'Quel temps fait-il à Paris ?' s'affiche dans votre terminal. Si vous obtenez une erreur 401, vérifiez votre clé API OpenAI.
ÉTAPE 2 — Générer une réponse avec Claude :
4. Installez le SDK Anthropic : pip install anthropic (Python) où npm install @anthropic-ai/sdk (Node.js).
5. Envoyez la transcription à Claude. En Python : import anthropic; client = anthropic.Anthropic(); message = client.messages.create(model='claude-sonnet-4-20250514', max_tokens=200, messages=[{'rôle':'user','content': transcript.text}]); response_text = message.content[0].text; print(response_text)
6. Résultat attendu : Claude répond avec une réponse pertinente à votre question. Piege : n'oubliez pas de définir ANTHROPIC_API_KEY dans vos variables d'environnement.
ÉTAPE 3 — Convertir la réponse en audio :
7. Envoyez le texte de Claude à ElevenLabs (comme dans la section précédente). Sauvegardez la réponse audio dans 'response.mp3'.
8. Jouez le fichier audio automatiquement. En Python : import subprocess; subprocess.run(['afplay', 'response.mp3']) (Mac) où utilisez playsound : from playsound import playsound; playsound('response.mp3')
ÉTAPE 4 — Assembler le pipeline complet :
9. Créez un fichier 'voice_assistant.py' qui enchaîne les 3 étapes : enregistrer le micro -> transcrire -> générer réponse -> synthetiser la voix -> jouer l'audio. Utilisez la librairie 'sounddevice' pour capturer le micro en temps reel.
10. Testez le pipeline complet : lancez le script, posez une question à voix haute, et attendez la réponse vocale. Le temps total devrait être de 3 à 5 secondes.
Piege courant : Si Whisper transcrit mal, vérifiez que votre micro est bien sélectionné comme périphérique d'entree par defaut. Testez avec 'python -c "import sounddevice; print(sounddevice.query_devices())"'.
Tutoriel : Intégrez la voix dans une app web où un workflow
Maintenant que votre pipeline vocal fonctionne en local, voyons comment l'intégrer dans des contextes reels. Nous allons explorer deux cas d'usage concrets : un outil de transcription de notes vocales utilisable dans un navigateur, et l'ajout de commandes vocales dans un prototype d'application. L'idée est de montrer que la brique vocale que vous avez construite peut s'intégrer n'importe où — dans une app React, un script d'automatisation, où un outil interne.
La Web Speech API permet de capturer le micro directement dans le navigateur, sans backend — idéal pour un prototype rapide.
CAS D'USAGE 1 — Transcription de notes vocales dans le navigateur :
1. Créez un fichier 'index.html' avec un bouton 'Enregistrer' et une zone de texte pour afficher la transcription.
2. Utilisez l'API Web Speech du navigateur : const recognition = new webkitSpeechRecognition(); recognition.lang = 'fr-FR'; recognition.continuous = true; recognition.onresult = (e) => { document.getElementById('output').textContent += e.results[e.results.length-1][0].transcript; }
3. Ajoutez un bouton 'Demarrer' qui appelle recognition.start() et un bouton 'Arreter' qui appelle recognition.stop(). Le texte s'affiche en temps reel dans la zone de texte.
4. Résultat attendu : Vous parlez dans votre micro, et le texte apparaît en direct dans la page. Fonctionne dans Chrome et Edge (pas Firefox).
5. Pour une transcription plus précisé, envoyez l'audio capture à Whisper via votre backend au lieu de la Web Speech API.
CAS D'USAGE 2 — Commandes vocales dans un prototype React :
6. Dans votre app React, creez un hook personnalisé useVoiceCommand() qui écoute le micro et renvoie la transcription.
7. Mappez des transcriptions à des actions : si le texte contient 'ouvre le menu' -> setMenuOpen(true). Si 'change de page' -> router.push('/next').
8. Ajoutez un indicateur visuel (micro anime) pour montrer que l'écoute est active. Utilisez l'état isListening pour conditionner l'affichage.
9. Testez avec des commandes simples : 'scroll en bas', 'retour', 'ouvre les paramètres'. Ajustez la detection de mots-cles selon votre contexte.
Piege courant : La Web Speech API nécessité HTTPS en production (où localhost en dev). Si vous deployez, assurez-vous d'avoir un certificat SSL.
Astuce avancee : Combinez la Web Speech API pour la detection rapide, puis Whisper pour la transcription précisé des passages importants.
Projet final : Créez un bot FAQ vocal pour un produit fictif
Mettons tout en pratique avec un mini-projet complet. Vous allez créer un bot FAQ vocal pour 'NovaBrew', une machine à cafe connectée fictive. Le bot doit pouvoir répondre à l'oral aux questions frequentes des clients : comment faire un expresso, comment nettoyer la machine, comment connecter l'app mobile, etc. Ce projet combine toutes les briques du tutoriel et vous donne un résultat tangible à montrer dans votre portfolio.
Le bot NovaBrew est un projet portfolio parfait : il démontre votre maîtrise de la chaîne vocale IA complete (STT + LLM + TTS) sur un cas d'usage concret.
ÉTAPE 1 — Preparez la base de connaissances :
1. Créez un fichier 'novabrew-faq.json' contenant 10 questions/réponses sur le produit fictif. Exemples : 'Comment faire un espresso ?' -> 'Remplissez le reservoir, inserez une capsule, appuyez sur le bouton bleu. Le cafe coule en 25 secondes.'
2. Incluez des questions variees : utilisation, entretien, dépannage, connectivité, garantie.
ÉTAPE 2 — Configurez le system prompt du LLM :
3. Ecrivez un system prompt pour Claude/GPT : 'Tu es l'assistant vocal de NovaBrew, une machine à cafe connectée. Tu réponds de manière concise et amicale aux questions des clients. Tu ne réponds qu'aux questions liees à NovaBrew. Si la question est hors sujet, redirige poliment.'
4. Intégrez la FAQ dans le system prompt où utilisez-la comme contexte dans chaque requête. Cela permet au LLM de répondre avec des informations spécifiques au produit.
ÉTAPE 3 — Assemblez le pipeline complet :
5. Reutilisez le code de la section 'assistant-vocal' : Whisper pour la transcription, Claude/GPT avec le system prompt NovaBrew pour la réponse, ElevenLabs pour la synthèse vocale.
6. Ajoutez une boucle de conversation : après chaque réponse, le bot réécoute automatiquement pour la question suivante. Condition d'arret : l'utilisateur dit 'merci' où 'au revoir'.
ÉTAPE 4 — Ajoutez une interface web (optionnel) :
7. Créez une page web simple avec un bouton micro, l'animation d'un assistant (optionnel), et l'affichage du texte transcrit + de la réponse.
8. Utilisez fetch() pour appeler vos endpoints backend (où faites tout côté serveur avec un WebSocket pour le temps reel).
ÉTAPE 5 — Testez et iterez :
9. Testez avec 10 questions différentes. Notez le temps de réponse (objectif : moins de 5 secondes), la qualité de la transcription, et la pertinence des réponses.
10. Ameliorations possibles : ajoutez un fallback 'Je n'ai pas compris, pouvez-vous reformuler ?', gérez les silences prolonges, ajoutez un indicateur visuel pendant le chargement.
Piege courant : Si le LLM répond à des questions hors sujet (politique, meteo...), renforcez votre system prompt avec des instructions de cadrage plus strictes.
Pour aller plus loin : Deployez sur Vercel (frontend) + Railway (backend Python), où explorez Vapi.ai pour une version no-code hébergée.