> This is a page from the ElevenLabs documentation. For a complete page index, fetch https://elevenlabs.io/docs/llms.txt. For the full documentation in a single file, fetch https://elevenlabs.io/docs/llms-full.txt.

# Vite (JavaScript)

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.

> **Note**
>
> Möchten Sie mit React/Next.js entwickeln? Lesen Sie unseren [Next.js Leitfaden](/docs/de/eleven-agents/guides/quickstarts/next-js)

## Voraussetzungen

1. Ein ElevenLabs-Agent, erstellt nach [diesem Leitfaden](/docs/de/eleven-agents/quickstart)
2. `npm`, installiert auf Ihrem lokalen System
3. Grundkenntnisse in JavaScript

## Projekt einrichten

#### Projektverzeichnis erstellen

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

```bash
mkdir elevenlabs-conversational-ai
cd elevenlabs-conversational-ai
```

#### npm initialisieren und Abhängigkeiten installieren

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

```bash
npm init -y
npm install vite @elevenlabs/client
```

#### Grundlegende Projektstruktur einrichten

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

**`package.json`**

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

Erstellen Sie die folgende Dateistruktur:

```shell {2,3}
elevenlabs-conversational-ai/
├── index.html
├── script.js
├── package-lock.json
├── package.json
└── node_modules
```

## Voice-Chat-Oberfläche implementieren

#### HTML-Oberfläche erstellen

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

![](/docs/_fern-img/5ad9dea65eddc50beaf444e5d319dc5094df0f4183e50f7ed01900394b3ff9d2.webp)

**`index.html`**

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

#### Unterhaltungslogik implementieren

Implementieren Sie die Funktionalität in `script.js`:

**`script.js`**

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

#### Frontend-Server starten

```shell
npm run dev:frontend
```

> **Note**
>
> Ersetzen Sie `'YOUR_AGENT_ID'` durch Ihre tatsächliche Agent-ID aus ElevenLabs.

#### (Optional) Mit einer signierten URL authentifizieren

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

#### Umgebungsvariablen erstellen

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

**`.env`**

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

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

#### Backend einrichten

1. Installieren Sie zusätzliche Abhängigkeiten:

```bash
npm install express cors dotenv
```

2. Erstellen Sie einen neuen Ordner mit dem Namen `backend`:

```shell {2}
elevenlabs-conversational-ai/
├── backend
...
```

#### Server erstellen

**`backend/server.js`**

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

#### Client-Code aktualisieren

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

**`script.js`**

```javascript script.js {2-10,16,19,20}
// ... 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 ...
```

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

#### package.json aktualisieren

**`package.json`**

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

#### Anwendung ausführen

Starten Sie die Anwendung mit:

```bash
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

> **Info**
>
> Weitere erweiterte Funktionen und Anpassungsoptionen finden Sie im
> Paket [@elevenlabs/client](https://www.npmjs.com/package/@elevenlabs/client).