Integrer un agent IA conversationnel avec Twilio vous permet de creer des interactions vocales fluides et humaines. Ce guide vous accompagnera dans le processus de configuration de votre environnement, de configuration de votre agent et d'implementation de l'integration en utilisant JavaScript.

Prerequis

Avant de commencer, assurez-vous d'avoir:

Un compte ElevenLabs
Un agent conversationnel ElevenLabs configure
Un compte Twilio avec un numero de telephone actif
Node.js 16+ installe
ngrok pour le developpement local

Configuration de l'Agent

Pour integrer avec Twilio, votre agent doit etre configure pour utiliser le format audio correct supporte par Twilio.

Configurer la Sortie TTS
- Naviguez vers les parametres de votre agent.
- Allez dans la Section Voice.
- Selectionnez "μ-law 8000 Hz" dans le menu deroulant.
Definir le Format d'Entree
- Naviguez vers les parametres de votre agent.
- Allez dans la Section Advanced.
- Selectionnez "μ-law 8000 Hz" pour le format d'entree.

Implementation

Initialiser le Projet

D'abord, configurez un nouveau projet Node.js:

mkdir conversational-ai-twilio
cd conversational-ai-twilio
npm init -y
npm pkg set type="module"

Installer les Dependances

Ensuite, installez les dependances requises pour le projet:

npm install fastify @fastify/websocket twilio dotenv

Configurer les Variables d'Environnement

Creez un fichier .env:

ELEVENLABS_AGENT_ID=your_agent_id
TWILIO_ACCOUNT_SID=your_account_sid
TWILIO_AUTH_TOKEN=your_auth_token
TWILIO_PHONE_NUMBER=your_phone_number

Creer le Serveur

// server.js
import Fastify from 'fastify';
import fastifyWebsocket from '@fastify/websocket';
import twilio from 'twilio';
import dotenv from 'dotenv';
 
dotenv.config();
 
const fastify = Fastify({ logger: true });
await fastify.register(fastifyWebsocket);
 
// Gestionnaire TwiML pour les appels entrants
fastify.all('/incoming-call', async (request, reply) => {
  const twimlResponse = `<?xml version="1.0" encoding="UTF-8"?>
    <Response>
      <Connect>
        <Stream url="wss://${request.headers.host}/media-stream" />
      </Connect>
    </Response>`;
 
  reply.type('text/xml').send(twimlResponse);
});
 
// Gestionnaire WebSocket pour le stream media
fastify.register(async (fastify) => {
  fastify.get('/media-stream', { websocket: true }, (connection, req) => {
    console.log('Client connecte');
 
    connection.socket.on('message', (message) => {
      const data = JSON.parse(message);
 
      if (data.event === 'media') {
        // Traiter les donnees audio entrantes
        const audioData = data.media.payload;
        // Envoyer a ElevenLabs pour traitement
      }
    });
 
    connection.socket.on('close', () => {
      console.log('Client deconnecte');
    });
  });
});
 
// Demarrer le serveur
const start = async () => {
  try {
    await fastify.listen({ port: 3000 });
    console.log('Serveur en cours d execution sur http://localhost:3000');
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
  }
};
 
start();

Executer le Developpement Local

Demarrez le serveur:

node server.js

Dans un nouveau terminal, demarrez ngrok:

ngrok http 3000

Configurez votre numero Twilio pour pointer vers l'URL ngrok.

Tester l'Integration

Appelez votre numero Twilio et testez la conversation avec l'agent IA.

Conclusion

Vous avez reussi a integrer un agent IA conversationnel avec Twilio. Vous pouvez maintenant avoir des conversations vocales naturelles par telephone avec votre agent IA.

Reference: Documentation Twilio | Documentation ElevenLabs