Vite (Javascript) | ElevenLabs Documentation

Den här guiden hjälper dig att skapa en webbklient som kan interagera med en ElevenLabs-agent. Du får lära dig att implementera röstsamtal i realtid, så att användare kan prata med en AI-agent som kan lyssna, förstå och svara naturligt med talsyntes.

Vill du bygga med React/Next.js? Läs vår Next.js- guide

Det här behöver du

En ElevenLabs-agent som skapats enligt den här guiden
npm installerat lokalt
Grundläggande kunskaper i JavaScript

Konfigurera projektet

Skapa en projektkatalog

Öppna en terminal och skapa en ny katalog för projektet:

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

Initiera npm och installera beroenden

Initiera ett nytt npm-projekt och installera de paket som krävs:

npm init -y
npm install vite @elevenlabs/client

Skapa en grundläggande projektstruktur

Lägg till detta i din package.json:

package.json

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

Skapa följande filstruktur:

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

Implementera röstchattgränssnittet

Skapa HTML-gränssnittet

Konfigurera ett enkelt användargränssnitt i index.html:

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>

Implementera samtalslogiken

Implementera funktionaliteten i 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);

Starta frontend-servern

npm run dev:frontend

Kom ihåg att ersätta 'YOUR_AGENT_ID' med ditt faktiska agent-ID från ElevenLabs.

(Valfritt) Autentisera med en signerad URL

Det här autentiseringssteget krävs bara för privata agenter. Om du använder en offentlig agent kan du hoppa över det här avsnittet och använda agentId direkt i anropet startSession.

Skapa miljövariabler

Skapa en .env-fil i projektets rotkatalog:

.env

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

Lägg till .env i din .gitignore-fil för att undvika att känsliga autentiseringsuppgifter råkar checkas in.

Konfigurera backend

Installera ytterligare beroenden:

npm install express cors dotenv

Skapa en ny mapp som heter backend:

elevenlabs-conversational-ai/
├── backend
...

Skapa servern

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}`);
});

Uppdatera klientkoden

Ändra script.js så att den hämtar och använder den signerade URL:en:

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 ...

Signerade URL:er upphör att gälla efter en kort tid. Samtal som har startats innan de upphör att gälla fortsätter dock utan avbrott. I en produktionsmiljö bör du implementera korrekt felhantering och logik för att uppdatera URL:en när nya samtal startas.

Uppdatera package.json

package.json

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

Kör applikationen

Starta applikationen med:

npm run dev

Nästa steg

Nu när du har en grundläggande implementering kan du:

Lägga till visuell återkoppling för röstaktivitet
Implementera felhantering och logik för nya försök
Lägga till en visning av chatthistoriken
Anpassa gränssnittet efter ditt varumärke

För mer avancerade funktioner och anpassningsalternativ, se paketet @elevenlabs/client.