Implémentation du streaming en temps réel avec VAPI : amélioration du support client avec Voice AI

DEV - 08/01
Implémentation du streaming en temps réel avec VAPI : amélioration du support client avec Voice AI...

Implémentation du streaming en temps réel avec VAPI : amélioration du support client avec Voice AI

TL;DR

La plupart des implémentations d’IA vocale échouent lorsque les flux audio s’arrêtent ou que les réponses sont en retard. Le streaming WebSocket de VAPI élimine ce problème en traitant des morceaux audio en temps réel au lieu d'attendre des énoncés complets. Vous créerez un agent de support client qui interrompt le milieu d'une phrase, gère les discours qui se chevauchent et maintient une latence inférieure à 500 ms. Stack : VAPI pour l'orchestration vocale, Twilio pour l'intégration PSTN, Node.js pour la gestion de WebSocket. Résultat : des appels d'assistance qui semblent naturels et non robotiques.

Conditions préalables

Clés API et informations d'identification

Vous avez besoin d'une clé API VAPI (générée à partir de Dashboard.vapi.ai) et d'un compte Twilio avec jeton d'authentification et SID de compte. Conservez-les dans.env:

VAPI_API_KEY=votre_clé_ici TWILIO_ACCOUNT_SID=votre_sid TWILIO_AUTH_TOKEN=votre_token
Entrer en mode plein écran Quitter le mode plein écran

Exigences du système et du SDK

Node.js 16+ avec npm/yarn. Installer les dépendances :

npm installer axios dotenv ws
Entrer en mode plein écran Quitter le mode plein écran

Configuration du réseau

Un serveur accessible au public (ngrok pour les tests locaux) pour recevoir les webhooks VAPI. VAPI nécessite des points de terminaison HTTPS avec des certificats SSL valides : les certificats auto-signés échoueront en production.

Hypothèses de connaissances

Familiarité avec les API REST, async/await et les bases de WebSocket. Vous devez comprendre les codes d'état HTTP et les charges utiles JSON. Aucune expérience préalable VAPI ou Twilio n'est requise, mais une compétence de base en Node.js est obligatoire.

Navigateur et outils

Navigateur moderne avec prise en charge WebSocket. Postman ou curl pour tester les appels API. Un numéro de téléphone (Twilio) pour tester les appels entrants.

VAPI : Démarrer avec VAPI → Obtenir VAPI

Tutoriel étape par étape

Configuration et installation

La plupart des implémentations de streaming en temps réel échouent parce que les développeurs ignorent le regroupement de connexions WebSocket. Voici la configuration de production :

// Initialisation du serveur avec gestion des connexions const express = require('express'); const WebSocket = require('ws'); const app = express(); const config = { port : process.env.PORT || 3000, vapiApiKey : process.env.VAPI_API_KEY, twilioAccountSid : process.env.TWILIO_ACCOUNT_SID, twilioAuthToken : process.env.TWILIO_AUTH_TOKEN, webhookSecret : process.env.VAPI_WEBHOOK_SECRET, maxConnections : 100, connectionTimeout : 30000 } ; // Pool de connexions pour éviter les fuites de mémoire const activeSessions = new Map(); const SESSION_TTL = 3 600 000 ; // 1 heure app.use(express.json()); app.use(express.urlencoded({ extended : true }));
Entrer en mode plein écran Quitter le mode plein écran

Critique : définimaxConnexionsen fonction de la RAM de votre serveur. Chaque connexion WebSocket consomme environ 2 à 4 Mo. Une instance de 2 Go atteint un maximum d'environ 400 flux simultanés avant d'appuyer sur l'échange.

Architecture et flux

organigramme LR A[Appel client] --> B[Twilio Inbound] B --> C[Assistant VAPI] C --> D[WebSocket Stream] D --> E[Votre serveur] E --> F[Process Audio] F --> G[API externe] G --> H[Response Stream] H --> C C --> A
Entrer en mode plein écran Quitter le mode plein écran

Le flux gère l'audio bidirectionnel : Twilio capture l'audio PCM 16 kHz → VAPI traite STT → Votre serveur reçoit des transcriptions via WebSocket → Vous envoyez des réponses → VAPI synthétise TTS → Twilio lit l'audio.

Mise en œuvre étape par étape

Étape 1 : Créer l'assistant

Utilisez le tableau de bord pour créer un assistant avec le streaming activé. Configurez le modèle et le fournisseur de voix :

// Configuration de l'assistant (définie via le tableau de bord ou l'API) const assistantConfig = { modèle : { fournisseur : "openai", modèle : "gpt-4", température : 0,7, maxTokens : 150 }, voix : { fournisseur : "11labs", voiceId : "21m00Tcm4TlvDq8ikWAM" }, transcripteur : { fournisseur : "deepgram", modèle : "nova-2", langue : "en" }, serverUrl : "https://your-domain.ngrok.io/webhook/vapi", // VOTRE serveur reçoit les webhooks ici serverUrlSecret : process.e...
[Courte citation de 8% de l'article original]
Loading...