Dans ce tutoriel, nous vous guiderons a travers le processus de creation d'une application web qui facilite les interactions vocales en temps reel avec des agents IA en utilisant Next.js et ElevenLabs. Cette application permettra aux utilisateurs de s'engager dans des conversations vocales naturelles avec un agent IA capable d'ecouter, comprendre et repondre en utilisant la synthese vocale.

Prerequis

Pour commencer, assurez-vous d'avoir:

Un agent ElevenLabs configure selon le guide officiel.
npm installe sur votre machine locale.
Connaissance basique de TypeScript ou JavaScript.

Configuration

Etape 1: Creer un Nouveau Projet Next.js

Ouvrez votre terminal et executez la commande suivante pour creer un nouveau projet Next.js:

npm create next-app my-conversational-agent

Suivez les instructions de configuration par defaut fournies par la commande.

Etape 2: Naviguer vers le Repertoire du Projet

Changez de repertoire vers le projet nouvellement cree:

cd my-conversational-agent

Etape 3: Installer la Dependance ElevenLabs

Installez le package React ElevenLabs:

npm install @11labs/react

Etape 4: Tester la Configuration

Lancez le serveur de developpement pour vous assurer que tout fonctionne:

npm run dev

Etape 5: Creer le Composant de Conversation

Creez un nouveau fichier components/Conversation.tsx:

'use client';
 
import { useConversation } from '@11labs/react';
import { useCallback, useState } from 'react';
 
export function Conversation() {
  const [transcript, setTranscript] = useState<string[]>([]);
 
  const conversation = useConversation({
    onConnect: () => console.log('Connecte'),
    onDisconnect: () => console.log('Deconnecte'),
    onMessage: (message) => {
      setTranscript((prev) => [...prev, `IA: ${message.message}`]);
    },
    onError: (error) => console.error('Erreur de conversation:', error),
  });
 
  const startConversation = useCallback(async () => {
    try {
      await navigator.mediaDevices.getUserMedia({ audio: true });
      await conversation.startSession({
        agentId: process.env.NEXT_PUBLIC_ELEVENLABS_AGENT_ID!,
      });
    } catch (error) {
      console.error('Echec du demarrage de la conversation:', error);
    }
  }, [conversation]);
 
  const stopConversation = useCallback(async () => {
    await conversation.endSession();
  }, [conversation]);
 
  return (
    <div className="flex flex-col items-center gap-6 p-6">
      <h2 className="text-2xl font-bold">Conversation Vocale en Temps Reel</h2>
 
      <div className="flex gap-4">
        <button
          onClick={startConversation}
          disabled={conversation.status === 'connected'}
          className="px-6 py-3 bg-green-500 text-white rounded-lg disabled:bg-gray-300"
        >
          Demarrer la Conversation
        </button>
        <button
          onClick={stopConversation}
          disabled={conversation.status !== 'connected'}
          className="px-6 py-3 bg-red-500 text-white rounded-lg disabled:bg-gray-300"
        >
          Terminer la Conversation
        </button>
      </div>
 
      <div className="text-center">
        <p className="text-lg">
          Statut: <span className="font-semibold">{conversation.status}</span>
        </p>
        <p className="text-sm text-gray-600">
          {conversation.isSpeaking ? 'L IA parle...' : 'En ecoute...'}
        </p>
      </div>
 
      <div className="w-full max-w-md h-64 overflow-y-auto border rounded p-4">
        {transcript.map((line, idx) => (
          <p key={idx} className="mb-2">{line}</p>
        ))}
      </div>
    </div>
  );
}

Etape 6: Mettre a Jour la Page Principale

Mettez a jour app/page.tsx pour inclure le composant de conversation:

import { Conversation } from '@/components/Conversation';
 
export default function Home() {
  return (
    <main className="min-h-screen flex items-center justify-center">
      <Conversation />
    </main>
  );
}

Etape 7: Configurer les Variables d'Environnement

Creez un fichier .env.local et ajoutez votre ID d'agent ElevenLabs:

NEXT_PUBLIC_ELEVENLABS_AGENT_ID=your_agent_id_here

Fonctionnalites

L'application finale inclut:

Speech-to-Text en temps reel: Capture de l'entree vocale utilisateur
Reponses IA: Traitement et generation de reponses intelligentes
Text-to-Speech: Synthese vocale naturelle pour les reponses
Interface utilisateur interactive: Controle simple de la conversation

Conclusion

Vous avez construit une application d'IA conversationnelle complete qui permet aux utilisateurs d'avoir des conversations vocales naturelles avec un agent IA. Vous pouvez etendre cette application en ajoutant des fonctionnalites comme l'historique des conversations, la personnalisation de l'agent et plus encore.

Reference: Documentation ElevenLabs