Vite (JavaScript)

जानें कि ElevenLabs AI एजेंट्स के साथ वॉइस बातचीत करने वाला वेब ऐप कैसे बनाएं

यह ट्यूटोरियल आपको ऐसा वेब क्लाइंट बनाने में मार्गदर्शन देगा जो ElevenLabs एजेंट के साथ इंटरैक्ट कर सके। आप रियल-टाइम वॉइस बातचीत लागू करना सीखेंगे, जिससे यूज़र AI एजेंट से बात कर सकेंगे। एजेंट सुन सकता है, समझ सकता है और वॉइस सिंथेसिस के ज़रिए स्वाभाविक रूप से जवाब दे सकता है।

React/Next.js के साथ बनाना चाहते हैं? हमारी Next.js गाइड देखें

आपको क्या चाहिए

इस गाइड के अनुसार बनाया गया ElevenLabs एजेंट
आपके लोकल सिस्टम पर npm इंस्टॉल होना चाहिए
JavaScript का बुनियादी ज्ञान

प्रोजेक्ट सेटअप

प्रोजेक्ट डायरेक्टरी बनाएं

टर्मिनल खोलें और अपने प्रोजेक्ट के लिए नई डायरेक्टरी बनाएं:

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

npm इनिशियलाइज़ करें और डिपेंडेंसी इंस्टॉल करें

नया npm प्रोजेक्ट इनिशियलाइज़ करें और ज़रूरी पैकेज इंस्टॉल करें:

npm init -y
npm install vite @elevenlabs/client

बुनियादी प्रोजेक्ट स्ट्रक्चर सेट अप करें

इसे अपने package.json में जोड़ें:

package.json

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

निम्न फ़ाइल स्ट्रक्चर बनाएं:

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

वॉइस चैट इंटरफ़ेस लागू करना

HTML इंटरफ़ेस बनाएं

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>

बातचीत की लॉजिक लागू करें

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

फ़्रंटएंड सर्वर शुरू करें

npm run dev:frontend

अपना वास्तविक एजेंट ID पाने के लिए 'YOUR_AGENT_ID' को ElevenLabs के अपने एजेंट ID से बदलना न भूलें।

(वैकल्पिक) Signed URL से प्रमाणित करें

यह प्रमाणीकरण चरण सिर्फ़ प्राइवेट एजेंट्स के लिए ज़रूरी है। अगर आप पब्लिक एजेंट इस्तेमाल कर रहे हैं, तो इस सेक्शन को छोड़कर सीधे startSession कॉल में agentId इस्तेमाल कर सकते हैं।

एनवायरनमेंट वेरिएबल्स बनाएं

अपने प्रोजेक्ट रूट में .env फ़ाइल बनाएं:

.env

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

संवेदनशील क्रेडेंशियल्स को गलती से कमिट होने से बचाने के लिए .env को अपनी .gitignore फ़ाइल में ज़रूर जोड़ें।

बैकएंड सेट अप करें

अतिरिक्त डिपेंडेंसी इंस्टॉल करें:

npm install express cors dotenv

backend नाम का नया फ़ोल्डर बनाएं:

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

सर्वर बनाएं

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

क्लाइंट कोड अपडेट करें

Signed URL फ़ेच करने और इस्तेमाल करने के लिए अपना script.js बदलें:

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

Signed URL कुछ समय बाद एक्सपायर हो जाते हैं। हालांकि, एक्सपायर होने से पहले शुरू की गई बातचीत बिना रुकावट जारी रहेगी। प्रोडक्शन एनवायरनमेंट में, नई बातचीत शुरू करने के लिए सही एरर हैंडलिंग और URL रीफ़्रेश लॉजिक लागू करें।

package.json अपडेट करें

package.json

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

ऐप्लिकेशन चलाएं

ऐप्लिकेशन शुरू करें:

npm run dev

अगले चरण

अब आपके पास एक बुनियादी इम्प्लीमेंटेशन है, आप ये कर सकते हैं:

वॉइस गतिविधि के लिए विज़ुअल फ़ीडबैक जोड़ें
एरर हैंडलिंग और रीट्राई लॉजिक लागू करें
चैट हिस्ट्री डिस्प्ले जोड़ें
अपने ब्रांड के अनुसार UI कस्टमाइज़ करें

ज़्यादा उन्नत सुविधाओं और कस्टमाइज़ेशन विकल्पों के लिए @elevenlabs/client पैकेज देखें।