Skip to navigation
HandleidingenSnelstarts

Next.JS

Leer hoe je een webapplicatie maakt die spraakgesprekken met ElevenLabs AI-agenten mogelijk maakt

Deze tutorial begeleidt je bij het maken van een webclient die kan communiceren met een ElevenLabs-agent. Je leert hoe je realtime spraakgesprekken implementeert, zodat gebruikers kunnen praten met een AI-agent die kan luisteren, begrijpen en op natuurlijke wijze reageren met spraaksynthese.

Wat je nodig hebt

  1. Een ElevenLabs-agent die je hebt gemaakt volgens deze handleiding
  2. npm geïnstalleerd op je lokale systeem.
  3. We gebruiken Typescript voor deze tutorial, maar je kunt Javascript gebruiken als je dat liever doet.

Op zoek naar een volledig voorbeeld? Bekijk onze Next.js-demo op GitHub.

Instellen

1

Maak een nieuw Next.js-project

Open een terminalvenster en voer de volgende opdracht uit:

npm create next-app my-conversational-agent

Je krijgt enkele vragen over hoe je je project wilt opzetten. Voor deze tutorial volgen we de standaardsuggesties.

2

Ga naar de projectmap

cd my-conversational-agent
3

Installeer de ElevenLabs-afhankelijkheid

npm install @elevenlabs/react
4

Test de installatie

Voer de volgende opdracht uit om de ontwikkelserver te starten en open de opgegeven URL in je browser:

npm run dev

Implementeer ElevenLabs Agents

1

Maak het gesprekscomponent

Maak een nieuw bestand app/components/conversation.tsx:

app/components/conversation.tsx
'use client';
import { useConversation } from '@elevenlabs/react';
import { useCallback } from 'react';
export function Conversation() {
  const conversation = useConversation({
    onConnect: () => console.log('Connected'),
    onDisconnect: () => console.log('Disconnected'),
    onMessage: (message) => console.log('Message:', message),
    onError: (error) => console.error('Error:', error),
  });
  const startConversation = useCallback(async () => {
    try {
      // Request microphone permission
      await navigator.mediaDevices.getUserMedia({ audio: true });
      // Start the conversation with your agent
      await conversation.startSession({
        agentId: 'YOUR_AGENT_ID', // Replace with your agent ID
        userId: 'YOUR_CUSTOMER_USER_ID', // Optional field for tracking your end user IDs
      });
    } catch (error) {
      console.error('Failed to start conversation:', error);
    }
  }, [conversation]);
  const stopConversation = useCallback(async () => {
    await conversation.endSession();
  }, [conversation]);
  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex gap-2">
        <button
          onClick={startConversation}
          disabled={conversation.status === 'connected'}
          className="px-4 py-2 bg-blue-500 text-white rounded disabled:bg-gray-300"
        >
          Start Conversation
        </button>
        <button
          onClick={stopConversation}
          disabled={conversation.status !== 'connected'}
          className="px-4 py-2 bg-red-500 text-white rounded disabled:bg-gray-300"
        >
          Stop Conversation
        </button>
      </div>
      <div className="flex flex-col items-center">
        <p>Status: {conversation.status}</p>
        <p>Agent is {conversation.isSpeaking ? 'speaking' : 'listening'}</p>
      </div>
    </div>
  );
}
2

Werk de hoofdpagina bij

Vervang de inhoud van app/page.tsx door:

app/page.tsx
'use client';
import { ConversationProvider } from '@elevenlabs/react';
import { Conversation } from './components/conversation';
export default function Home() {
  return (
    <ConversationProvider>
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm">
          <h1 className="text-4xl font-bold mb-8 text-center">
            ElevenLabs Agents
          </h1>
          <Conversation />
        </div>
      </main>
    </ConversationProvider>
  );
}

Deze authenticatiestap is alleen vereist voor privéagenten. Als je een openbare agent gebruikt, kun je deze sectie overslaan en de agentId rechtstreeks gebruiken in de aanroep van startSession.

Als je een privéagent gebruikt die authenticatie vereist, moet je vanaf je server een ondertekende URL genereren. In deze sectie wordt uitgelegd hoe je dit instelt.

Wat je nodig hebt

  1. Een ElevenLabs-account en API-sleutel. Registreer je hier.
1

Maak omgevingsvariabelen

Maak een .env.local-bestand in de hoofdmap van je project:

.env.local
ELEVENLABS_API_KEY=your-api-key-here
NEXT_PUBLIC_AGENT_ID=your-agent-id-here
  1. Zorg dat je .env.local toevoegt aan je .gitignore-bestand om te voorkomen dat je gevoelige inloggegevens per ongeluk naar versiebeheer commit.
  2. Stel je API-sleutel nooit bloot in client-side code. Bewaar deze altijd veilig op de server.
2

Maak een API-route

Maak een nieuw bestand app/api/get-signed-url/route.ts:

app/api/get-signed-url/route.ts
import { NextResponse } from 'next/server';
export async function GET() {
  try {
    const response = await fetch(
      `https://api.elevenlabs.io/v1/convai/conversation/get-signed-url?agent_id=${process.env.NEXT_PUBLIC_AGENT_ID}`,
      {
        headers: {
          'xi-api-key': process.env.ELEVENLABS_API_KEY!,
        },
      }
    );
    if (!response.ok) {
      throw new Error('Failed to get signed URL');
    }
    const data = await response.json();
    return NextResponse.json({ signedUrl: data.signed_url });
  } catch (error) {
    return NextResponse.json(
      { error: 'Failed to generate signed URL' },
      { status: 500 }
    );
  }
}
3

Werk het Conversation-component bij

Pas je conversation.tsx aan om de ondertekende URL op te halen en te gebruiken:

app/components/conversation.tsx
// ... existing imports ...
export function Conversation() {
  // ... existing conversation setup ...
  const getSignedUrl = async (): Promise<string> => {
    const response = await fetch("/api/get-signed-url");
    if (!response.ok) {
      throw new Error(`Failed to get signed url: ${response.statusText}`);
    }
    const { signedUrl } = await response.json();
    return signedUrl;
  };
  const startConversation = useCallback(async () => {
    try {
      // Request microphone permission
      await navigator.mediaDevices.getUserMedia({ audio: true });
      const signedUrl = await getSignedUrl();
      // Start the conversation with your signed url
      await conversation.startSession({
        signedUrl,
      });
    } catch (error) {
      console.error('Failed to start conversation:', error);
    }
  }, [conversation]);
  // ... rest of the component ...
}

Ondertekende URL’s verlopen na korte tijd. Gesprekken die vóór het verlopen zijn gestart, lopen echter zonder onderbreking door. Implementeer in een productieomgeving goede foutafhandeling en logica om URL’s te vernieuwen voor het starten van nieuwe gesprekken.

Volgende stappen

Nu je een basisimplementatie hebt, kun je:

  1. Visuele feedback voor spraakactiviteit toevoegen
  2. Foutafhandeling en logica voor opnieuw proberen implementeren
  3. Een weergave van de chatgeschiedenis toevoegen
  4. De UI aanpassen aan je merk

Bekijk voor geavanceerdere functies en aanpassingsopties het pakket @elevenlabs/react.