LeitfädenSchnellstarts

Vite (JavaScript)

Erfahren Sie, wie Sie eine Webanwendung für Sprachunterhaltungen mit ElevenLabs-KI-Agenten erstellen

Dieses Tutorial zeigt Ihnen, wie Sie einen Web-Client erstellen, der mit einem ElevenLabs-Agenten interagieren kann. Sie erfahren, wie Sie Sprachunterhaltungen in Echtzeit implementieren, damit Nutzer mit einem KI-Agenten sprechen können, der zuhört, versteht und mithilfe von Sprachsynthese natürlich antwortet.

Möchten Sie mit React/Next.js entwickeln? Lesen Sie unseren Next.js Leitfaden

Voraussetzungen

  1. Ein ElevenLabs-Agent, erstellt nach diesem Leitfaden
  2. npm, installiert auf Ihrem lokalen System
  3. Grundkenntnisse in JavaScript

Projekt einrichten

1

Projektverzeichnis erstellen

Öffnen Sie ein Terminal und erstellen Sie ein neues Verzeichnis für Ihr Projekt:

mkdir elevenlabs-conversational-ai
cd elevenlabs-conversational-ai
2

npm initialisieren und Abhängigkeiten installieren

Initialisieren Sie ein neues npm-Projekt und installieren Sie die erforderlichen Pakete:

npm init -y
npm install vite @elevenlabs/client
3

Grundlegende Projektstruktur einrichten

Fügen Sie Folgendes zu Ihrer package.json hinzu:

package.json
{
    "scripts": {
        ...
        "dev:frontend": "vite"
    }
}

Erstellen Sie die folgende Dateistruktur:

elevenlabs-conversational-ai/
├── index.html
├── script.js
├── package-lock.json
├── package.json
└── node_modules

Voice-Chat-Oberfläche implementieren

1

HTML-Oberfläche erstellen

Richten Sie in index.html eine einfache Benutzeroberfläche ein:

index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>ElevenLabs Agents</title>
    </head>
    <body style="font-family: Arial, sans-serif; text-align: center; padding: 50px;">
        <h1>ElevenLabs Agents</h1>
        <div style="margin-bottom: 20px;">
            <button id="startButton" style="padding: 10px 20px; margin: 5px;">Start Conversation</button>
            <button id="stopButton" style="padding: 10px 20px; margin: 5px;" disabled>Stop Conversation</button>
        </div>
        <div style="font-size: 18px;">
            <p>Status: <span id="connectionStatus">Disconnected</span></p>
            <p>Agent is <span id="agentStatus">listening</span></p>
        </div>
        <script type="module" src="../images/script.js"></script>
    </body>
</html>
2

Unterhaltungslogik implementieren

Implementieren Sie die Funktionalität in script.js:

script.js
import { Conversation } from '@elevenlabs/client';
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
const connectionStatus = document.getElementById('connectionStatus');
const agentStatus = document.getElementById('agentStatus');
let conversation;
async function startConversation() {
    try {
        // Request microphone permission
        await navigator.mediaDevices.getUserMedia({ audio: true });
        // Start the conversation
        conversation = await Conversation.startSession({
            agentId: 'YOUR_AGENT_ID', // Replace with your agent ID
            onConnect: () => {
                connectionStatus.textContent = 'Connected';
                startButton.disabled = true;
                stopButton.disabled = false;
            },
            onDisconnect: () => {
                connectionStatus.textContent = 'Disconnected';
                startButton.disabled = false;
                stopButton.disabled = true;
            },
            onError: (error) => {
                console.error('Error:', error);
            },
            onModeChange: (mode) => {
                agentStatus.textContent = mode.mode === 'speaking' ? 'speaking' : 'listening';
            },
        });
    } catch (error) {
        console.error('Failed to start conversation:', error);
    }
}
async function stopConversation() {
    if (conversation) {
        await conversation.endSession();
        conversation = null;
    }
}
startButton.addEventListener('click', startConversation);
stopButton.addEventListener('click', stopConversation);
3

Frontend-Server starten

npm run dev:frontend
Ersetzen Sie 'YOUR_AGENT_ID' durch Ihre tatsächliche Agent-ID aus ElevenLabs.

Dieser Authentifizierungsschritt ist nur für private Agenten erforderlich. Wenn Sie einen öffentlichen Agenten verwenden, können Sie diesen Abschnitt überspringen und agentId direkt im Aufruf von startSession verwenden.

1

Umgebungsvariablen erstellen

Erstellen Sie im Stammverzeichnis Ihres Projekts eine .env-Datei:

.env
ELEVENLABS_API_KEY=your-api-key-here
AGENT_ID=your-agent-id-here

Fügen Sie .env unbedingt zu Ihrer .gitignore-Datei hinzu, damit sensible Zugangsdaten nicht versehentlich committet werden.

2

Backend einrichten

  1. Installieren Sie zusätzliche Abhängigkeiten:
npm install express cors dotenv
  1. Erstellen Sie einen neuen Ordner mit dem Namen backend:
elevenlabs-conversational-ai/
├── backend
...
3

Server erstellen

backend/server.js
require("dotenv").config();
const express = require("express");
const cors = require("cors");
const app = express();
app.use(cors());
app.use(express.json());
const PORT = process.env.PORT || 3001;
app.get("/api/get-signed-url", async (req, res) => {
    try {
        const response = await fetch(
            `https://api.elevenlabs.io/v1/convai/conversation/get-signed-url?agent_id=${process.env.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();
        res.json({ signedUrl: data.signed_url });
    } catch (error) {
        console.error("Error:", error);
        res.status(500).json({ error: "Failed to generate signed URL" });
    }
});
app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});
4

Client-Code aktualisieren

Passen Sie Ihre script.js an, um die signierte URL abzurufen und zu verwenden:

script.js
// ... existing imports and variables ...
async function getSignedUrl() {
    const response = await fetch('http://localhost:3001/api/get-signed-url');
    if (!response.ok) {
        throw new Error(`Failed to get signed url: ${response.statusText}`);
    }
    const { signedUrl } = await response.json();
    return signedUrl;
}
async function startConversation() {
    try {
        await navigator.mediaDevices.getUserMedia({ audio: true });
        const signedUrl = await getSignedUrl();
        conversation = await Conversation.startSession({
            signedUrl,
            // agentId has been removed...
            onConnect: () => {
                connectionStatus.textContent = 'Connected';
                startButton.disabled = true;
                stopButton.disabled = false;
            },
            onDisconnect: () => {
                connectionStatus.textContent = 'Disconnected';
                startButton.disabled = false;
                stopButton.disabled = true;
            },
            onError: (error) => {
                console.error('Error:', error);
            },
            onModeChange: (mode) => {
                agentStatus.textContent = mode.mode === 'speaking' ? 'speaking' : 'listening';
            },
        });
    } catch (error) {
        console.error('Failed to start conversation:', error);
    }
}
// ... rest of the code ...

Signierte URLs laufen nach kurzer Zeit ab. Unterhaltungen, die vor dem Ablauf gestartet wurden, werden jedoch ohne Unterbrechung fortgesetzt. Implementieren Sie in einer Produktionsumgebung eine geeignete Fehlerbehandlung und Logik zum Aktualisieren der URL, um neue Unterhaltungen zu starten.

5

package.json aktualisieren

package.json
{
    "scripts": {
        ...
        "dev:backend": "node backend/server.js",
        "dev": "npm run dev:frontend & npm run dev:backend"
    }
}
6

Anwendung ausführen

Starten Sie die Anwendung mit:

npm run dev

Nächste Schritte

Nachdem Sie nun eine grundlegende Implementierung haben, können Sie:

  1. Visuelles Feedback für Sprachaktivität hinzufügen
  2. Fehlerbehandlung und Wiederholungslogik implementieren
  3. Eine Chatverlauf-Anzeige hinzufügen
  4. Die Benutzeroberfläche an Ihre Marke anpassen

Weitere erweiterte Funktionen und Anpassungsoptionen finden Sie im Paket @elevenlabs/client.