Contrôle Vocal pour Cline : VS Code + MCP ElevenLabs

Introduction

Cline est un puissant agent de codage IA au sein de VS Code. Bien que la saisie de texte soit standard, ne serait-il pas pratique de donner des commandes vocalement ? Ce tutoriel montre comment nous avons ajouté des capacités de commande vocale à Cline en créant une extension VS Code dédiée (cline-voice-assistant) qui s'appuie sur un serveur MCP (Model Context Protocol) ElevenLabs pour une transcription parole-texte (STT) précise.

Ce que cette solution apporte :

Interaction Mains Libres : Déclenchez l'enregistrement vocal via une commande ou un raccourci clavier.
Transcription Précise : Utilise l'API STT d'ElevenLabs via un serveur MCP local.
Intégration Transparente : Envoie le texte transcrit directement à l'extension Cline principale pour traitement.

Comment ça marche :

Un utilisateur déclenche la commande Cline: Start Voice Command dans VS Code (fournie par cline-voice-assistant).
L'extension utilise l'outil en ligne de commande sox pour enregistrer l'audio depuis le microphone par défaut, le sauvegardant dans un fichier temporaire.
L'extension se connecte à un elevenlabs-mcp-server exécuté localement en utilisant le SDK MCP.
Elle appelle l'outil elevenlabs_stt sur le serveur MCP, en passant le chemin du fichier audio enregistré.
Le serveur MCP envoie l'audio à l'API ElevenLabs et retourne la transcription.
L'extension cline-voice-assistant récupère l'API exportée par l'extension Cline principale (saoudrizwan.claude-dev).
Elle utilise la méthode sendMessage de l'API Cline pour envoyer le texte transcrit à l'interface de chat Cline principale.
Cline traite le texte comme s'il avait été tapé, et la réponse apparaît dans la fenêtre de chat.

Ce tutoriel se concentre sur l'entrée vocale. La réponse de Cline sera toujours textuelle dans la fenêtre de chat. Ajouter une sortie vocale (Text-to-Speech) pour les réponses de Cline nécessiterait des modifications supplémentaires, potentiellement dans l'extension Cline principale elle-même.

Guide Étape par Étape

Parcourons les étapes clés impliquées dans la création de cette configuration d'assistant vocal.

Prérequis

Extension Cline : L'extension VS Code Cline principale (saoudrizwan.claude-dev) doit être installée.
Node.js & npm : Requis pour exécuter les serveurs MCP et construire les extensions.
sox : Un utilitaire audio en ligne de commande. Installez-le (par ex., sur macOS : brew install sox).
Compte ElevenLabs & Clé API : Inscrivez-vous sur ElevenLabs et obtenez une clé API.
Projet Saiku : Ce tutoriel suppose que vous travaillez dans la structure du projet Saiku (/Users/macbookpro/Developer/saiku dans cet exemple).

Créer le Serveur MCP ElevenLabs

Nous avons besoin d'un serveur pour gérer les requêtes STT en utilisant l'API ElevenLabs.

Créer le Projet Serveur :

cd /chemin/vers/vos/serveurs/mcp # ex: /Users/macbookpro/Documents/Cline/MCP
npx @modelcontextprotocol/create-server elevenlabs-mcp-server
cd elevenlabs-mcp-server
npm install elevenlabs form-data node-fetch@2 @types/node-fetch@2

Implémenter le Serveur (src/index.ts) : Créez src/index.ts avec du code Node.js pour :
- Importer les modules nécessaires (@modelcontextprotocol/sdk, elevenlabs, fs, path, os, child_process, form-data, node-fetch).
- Lire la ELEVENLABS_API_KEY depuis les variables d'environnement.
- Définir les outils MCP : elevenlabs_stt, elevenlabs_tts, elevenlabs_tts_and_play.
- Implémenter la fonction handleSttRequest :
  - Prend un argument filePath.
  - Lit le fichier audio.
  - Crée FormData avec le fichier et model_id: 'scribe_v1'.
  - Fait une requête POST à https://api.elevenlabs.io/v1/speech-to-text avec la clé API et les données du formulaire.
  - Analyse la réponse JSON et retourne le texte transcrit.
- Implémenter les gestionnaires pour les outils TTS (en utilisant le SDK elevenlabs ou fetch).
- Démarrer le serveur en utilisant StdioServerTransport. (Référez-vous au journal de développement pour le code complet du serveur)

Construire le Serveur :

npm run build --prefix /chemin/vers/vos/serveurs/mcp/elevenlabs-mcp-server

Configurer dans les Paramètres Cline : Ajoutez le serveur à votre fichier cline_mcp_settings.json (généralement dans .../User/globalStorage/saoudrizwan.claude-dev/settings/) :

{
  "mcpServers": {
    // ... autres serveurs
    "elevenlabs-mcp-server": {
      "command": "node",
      "args": ["/chemin/complet/vers/elevenlabs-mcp-server/build/index.js"],
      "env": {
        "ELEVENLABS_API_KEY": "VOTRE_CLE_API_ELEVENLABS"
      },
      "disabled": false,
      "autoApprove": []
    }
  }
}

Remplacez le chemin et la clé API en conséquence. Cline devrait démarrer ce serveur automatiquement.

Créer l'Extension VS Code Voice Assistant

Cette extension gère l'enregistrement et orchestre le processus STT.

Échafauder l'Extension (Manuel) : Comme yo code a posé problème, nous avons créé la structure manuellement dans /Users/macbookpro/Developer/saiku/extensions/ :
- Créer le répertoire cline-voice-assistant.
- Créer package.json (définir nom, commande cline-voice-assistant.startVoiceCommand, point d'entrée principal ./out/extension.js, dépendances comme @modelcontextprotocol/sdk, devDependencies comme @types/vscode, typescript).
- Créer tsconfig.json (configurer tsc pour compiler dans le répertoire out/, module commonjs).
- Créer le répertoire src/.
- Copier cline.d.ts depuis extensions/cline/src/exports/ vers extensions/cline-voice-assistant/src/.
- Créer des fichiers README.md et .gitignore basiques. (Référez-vous au journal de développement pour le contenu exact des fichiers)

Installer les Dépendances :

npm install --prefix extensions/cline-voice-assistant

Implémenter la Logique de l'Extension (src/extension.ts) : Créez src/extension.ts avec du code pour :
- Importer vscode, path, os, fs, exec, le Client MCP, StdioClientTransport, et le type ClineAPI copié.
- Définir des constantes pour le chemin du fichier audio temporaire et l'ID de l'extension Cline principale.
- Implémenter la fonction activate :
  - Obtenir l'API exportée par l'extension Cline principale (vscode.extensions.getExtension(...).activate()). Gérer les erreurs si non trouvée ou API invalide.
  - Lire le fichier partagé cline_mcp_settings.json pour trouver la configuration du serveur elevenlabs-mcp-server (commande, args, env). Gérer les erreurs si non trouvée.
  - Instancier le Client MCP.
  - Instancier StdioClientTransport en utilisant la configuration lue depuis les paramètres (fusionner process.env avec l'env spécifique au serveur, ajouter --stdio aux args).
  - Connecter le client au transport. Gérer les erreurs de connexion.
  - Enregistrer la commande cline-voice-assistant.startVoiceCommand :
    - Vérifier si le client MCP et l'API Cline sont disponibles.
    - Exécuter sox -d /tmp/cline_command.wav silence 1 0.1 1% 1 1.0 1% pour enregistrer l'audio. Gérer les erreurs.
    - Appeler mcpClient.callTool({ name: 'elevenlabs_stt', arguments: { file_path: ... } }). Gérer les erreurs et analyser le résultat.
    - Appeler clineApi.sendMessage(transcribedText). Gérer les erreurs.
  - Enregistrer le disposable de la commande et la logique de fermeture du transport pour la désactivation.
- Exporter les fonctions activate et deactivate. (Référez-vous au journal de développement pour le code complet de l'extension)

Compiler l'Extension :

npm run compile --prefix extensions/cline-voice-assistant

Empaqueter et Installer

Installer vsce :
```
npm install -g vsce
```
Empaqueter :
```
cd extensions/cline-voice-assistant
vsce package
```
(Vous devrez peut-être confirmer 'y' s'il avertit de l'absence de LICENSE/README). Cela crée cline-voice-assistant-0.0.1.vsix.
Installer :
```
code --install-extension extensions/cline-voice-assistant/cline-voice-assistant-0.0.1.vsix --force
```
Alternativement, installez manuellement via la vue Extensions (... > "Installer depuis VSIX...").
Redémarrer VS Code : Redémarrez VS Code complètement.

Utilisation

Assurez-vous que sox est installé et que elevenlabs-mcp-server est en cours d'exécution.
Ouvrez la Palette de Commandes (Cmd+Shift+P ou Ctrl+Shift+P).
Exécutez Cline: Start Voice Command.
Prononcez votre commande.
Le texte transcrit apparaît dans la fenêtre de chat Cline, suivi de la réponse textuelle de Cline. Vérifiez la Console des Outils de Développement (Aide > Afficher les outils de développement > Console) pour les logs ou les erreurs.

Conclusion

En créant une extension VS Code dédiée et en exploitant un serveur MCP ElevenLabs, nous avons réussi à activer la commande vocale pour Cline. Cette configuration utilise sox pour l'enregistrement, le serveur MCP pour le STT ElevenLabs, et l'API de l'extension Cline principale pour traiter le texte transcrit. Bien que la réponse reste textuelle, cela offre une commodité significative pour une interaction mains libres.

Possibilités Futures

Cette configuration fournit une base solide pour l'entrée vocale. Voici quelques prochaines étapes potentielles :

Sortie Vocale : Modifier l'extension Cline principale (extensions/cline/) pour vérifier si l'entrée provenait de la voix et, si oui, utiliser l'outil MCP elevenlabs_tts_and_play pour énoncer la réponse au lieu de simplement afficher du texte. Cela nécessite de comprendre et de modifier la logique de base de l'extension Cline.
STT Alternatif : Remplacer le serveur MCP ElevenLabs par un autre utilisant un service STT différent (comme Whisper, soit localement via whisper.cpp, soit l'API OpenAI).
Enregistrement Intégré : Remplacer la dépendance sox en implémentant l'enregistrement directement dans l'extension VS Code à l'aide des API Webview (MediaRecorder), rendant la configuration plus autonome.
Bouton UI : Ajouter un bouton microphone à l'interface utilisateur de Cline au lieu de dépendre de la Palette de Commandes.

Si vous souhaitez améliorer les capacités de Cline, envisagez de :

Forker le Projet : Explorez la base de code Saiku (https://github.com/nooqta/saiku) et expérimentez avec vos propres modifications.
Contribuer : Si vous développez des améliorations, envisagez de contribuer au projet principal en suivant leurs directives de contribution.

Bon codage vocal !