कॉन्टेंट पर जाएं
लॉग इन करेंसाइन अप करें
संपर्क करेंलॉग इन करें
ब्लॉगElevenAPI

ElevenAgents React SDK v1.0

लेखक
Photograph of Kræn Hansen facing the camera.
Kræn Hansen, Developer Experience Engineer

ElevenAgents React SDK v1.0: JavaScript और React SDK का नया आर्किटेक्चर, जिसमें डिटेल्ड हुक्स, वेब और React Native के लिए एक जैसा API, और एक स्थिर पब्लिक API है।

ElevenAgents React SDK v1.0
डॉक्स पढ़ेंGitHub पर देखें

ElevenAgents JavaScript और React SDK का वर्शन 1.0.0 अब उपलब्ध है। यह रिलीज़ @elevenlabs/client, @elevenlabs/react, और @elevenlabs/react-native पैकेज का पूरी तरह से नया आर्किटेक्चर है, जिसमें रेंडर परफॉर्मेंस, वेब और React Native के लिए एक जैसा API, और एक स्थिर पब्लिक API पर फोकस किया गया है। यह एक बड़ा बदलाव है, लेकिन पुराना useConversation हुक अभी भी मौजूद है, और अपग्रेड को ऑटोमेट करने के लिए एक कोडिंग एजेंट स्किल भी उपलब्ध है।

नया मेजर वर्शन क्यों

तीन समस्याओं की वजह से यह रिलीज़ आई है।

वेब और React Native पर अलग-अलग API

React और React Native में अलग-अलग API, फीचर्स और कॉन्फ़िगरेशन ऑप्शन्स थे। कोड और जानकारी दोनों प्लेटफॉर्म्स पर ट्रांसफर नहीं हो पाती थी, और AI कोडिंग टूल्स अक्सर ऐसे API सजेस्ट करते थे जो सिर्फ एक ही प्लेटफॉर्म पर होते थे। React Native में WebSocket कनेक्शन मोड भी नहीं था।

अंदरूनी तौर पर, ऐसा इसलिए हुआ क्योंकि React Native SDK ने थर्ड-पार्टी React Native SDK को रैप किया था, न कि @elevenlabs/client पर बनाया था। फीचर्स और फिक्सेस दोनों जगह अलग-अलग भेजने पड़ते थे, जिससे दोनों प्लेटफॉर्म्स में फर्क बढ़ता गया।

खराब रेंडर परफॉर्मेंस

कोई भी स्टेट चेंज (जैसे स्टेटस, मोड, म्यूट, वॉल्यूम) होने पर हर वो कंपोनेंट री-रेंडर होता था जो conversation स्टेट यूज़ करता था। सिर्फ जरूरत के हिस्से को सब्सक्राइब करने का तरीका नहीं था। अगर आपके कंपोनेंट को सिर्फ कनेक्शन स्टेटस चाहिए, तब भी म्यूट स्टेट बदलने पर री-रेंडर हो जाता था।

ऐसा इसलिए था क्योंकि SDK ने एक ही context provider में सारी conversation स्टेट रखी थी, जिसमें सिर्फ मोटे हुक्स और कॉलबैक्स ऑप्शन्स ऑब्जेक्ट्स के जरिए पास होते थे।

कमज़ोर अपग्रेड्स

SDK को अपग्रेड करने पर आपके कोड के टूटने का रिस्क था। इंटरनल क्लासेज़ जैसे इनपुट, आउटपुट, और कनेक्शन पब्लिक API का हिस्सा थीं, और डेवलपर्स सीधे ब्राउज़र प्रिमिटिव्स जैसे conversation.output.gain.gain.value (वॉल्यूम के लिए) और conversation.input.analyser (ऑडियो विज़ुअलाइज़ेशन के लिए) पर निर्भर करते थे। कोई भी इंटरनल बदलाव इन एक्सेस पैटर्न्स को तोड़ सकता था।

हमारी तरफ से, इनहेरिटेंस-बेस्ड क्लास हायरार्की की वजह से इसे धीरे-धीरे ठीक करना मुश्किल था, इसलिए एक साफ ब्रेक जरूरी था।

क्या नया है

सभी प्लेटफॉर्म्स पर एक जैसा API

@elevenlabs/react-native अब @elevenlabs/react को एक पतली प्लेटफॉर्म स्ट्रैटेजी लेयर के साथ री-एक्सपोर्ट करता है: अब सिर्फ 40 लाइन कोड, पहले हजार से ज्यादा थी। वही ConversationProvider, वही हुक्स, वही मेथड्स। वेब के लिए लिखा कोड React Native पर सिर्फ इम्पोर्ट पाथ बदलकर चलता है, जानकारी सीधे ट्रांसफर होती है, और AI कोडिंग टूल्स अब प्लेटफॉर्म-स्पेसिफिक API नहीं सजेस्ट करते।

// On React Native, change this import to '@elevenlabs/react-native'.
import {
  ConversationProvider,
  useConversationControls,
  useConversationStatus,
} from '@elevenlabs/react';

function App() {
  return (
    <ConversationProvider>
      <Agent />
    </ConversationProvider>
  );
}

function Agent() {
  const { startSession, endSession } = useConversationControls();
  const { status } = useConversationStatus();

  if (status === 'connected') {
    return <button onClick={endSession}>End</button>;
  }

  return (
    <button onClick={() => startSession({ agentId: 'agent_7101k5zvyjhmfg983brhmhkd98n6' })}>
      Start
    </button>
  );
}

रेंडर परफॉर्मेंस के लिए ग्रैन्युलर हुक्स

अब छह नए हुक्स हैं, जो conversation स्टेट के अलग-अलग हिस्सों को सब्सक्राइब करते हैं। कंपोनेंट्स सिर्फ तब री-रेंडर होते हैं जब उनका डेटा बदलता है।

Hook
Returns
Re-renders on
useConversationControls
Action methods (startSession, endSession, sendUserMessage, ...)
Never (stable references)
useConversationStatus
status, message
Connection status changes
useConversationInput
isMuted, setMuted
Mute state changes
useConversationMode
mode, isSpeaking, isListening
Mode changes
useConversationFeedback
canSendFeedback, sendFeedback
Feedback availability changes
useConversationClientTool
(registers a tool handler)
Never

पहले जो स्टेटस इंडिकेटर हर स्टेट चेंज पर री-रेंडर होता था, अब सिर्फ कनेक्शन स्टेटस बदलने पर ही री-रेंडर होगा:

import { useConversationStatus } from '@elevenlabs/react';

function StatusBadge() {
  const { status } = useConversationStatus();
  return <span>{status}</span>;
}

useConversation अभी भी है

पुराना useConversation हुक अभी भी मौजूद है और वही डेटा देता है: स्टेटस, मोड, म्यूट स्टेट, और सभी कंट्रोल मेथड्स। यह ऊपर बताए गए ग्रैन्युलर हुक्स का एक आसान रैपर है। मौजूदा यूज़र्स पहले ConversationProvider + useConversation का इस्तेमाल कर सकते हैं, फिर जहां रेंडर परफॉर्मेंस जरूरी हो वहां धीरे-धीरे ग्रैन्युलर हुक्स अपना सकते हैं।

import { useConversation } from '@elevenlabs/react';

function Agent() {
  const { status, isSpeaking, isMuted, setMuted, startSession, endSession } = useConversation();
  // Same API shape as before, just requires a ConversationProvider ancestor.
}

डायनामिक क्लाइंट टूल्स

useConversationClientTool React कंपोनेंट्स को ऐसे टूल्स रजिस्टर करने देता है जिन्हें एजेंट चला सकता है। टूल्स कंपोनेंट लाइफसाइकल से जुड़े होते हैं: माउंट पर रजिस्टर, अनमाउंट पर अनरजिस्टर, और हमेशा लेटेस्ट क्लोजर वैल्यू यूज़ करते हैं।

import { useConversationClientTool } from '@elevenlabs/react';
import { useState } from 'react';

function MapComponent() {
  const [location, setLocation] = useState({ lat: 0, lng: 0 });

  useConversationClientTool('getLocation', () => {
    return `${location.lat},${location.lng}`;
  });

  useConversationClientTool('setLocation', (params: { lat: number; lng: number }) => {
    setLocation(params);
    return 'Location updated';
  });

  return <Map center={location} />;
}

यह तब काम आता है जब टूल के हैंडलर को कंपोनेंट स्टेट या प्रॉप्स चाहिए जो प्रोवाइडर लेवल पर उपलब्ध नहीं हैं।

स्थिर API सरफेस

इंटरनल क्लासेज़ (इनपुट, आउटपुट, wake lock) अब प्राइवेट हैं। पब्लिक API अब डॉक्युमेंटेड मेथड्स देता है, सीधे ब्राउज़र प्रिमिटिव्स नहीं:

  • setVolume({ volume }) अब conversation.output.gain.gain.value = v
  • getInputByteFrequencyData() अब conversation.input.analyser.getByteFrequencyData()
  • setMicMuted(true) अब conversation.input.setMuted(true)

इसका मतलब है कि ऑडियो इम्प्लीमेंटेशन को (जैसे ट्रांसपोर्ट लेयर बदलना) बिना यूज़र कोड तोड़े बदला जा सकता है।

कंट्रोल्ड स्टेट

ConversationProvider अब isMuted और onMutedChange प्रॉप्स एक्सेप्ट करता है ताकि बाहरी स्टेट मैनेजमेंट हो सके। यह म्यूट स्टेट को सेशन्स में बनाए रखने या ऐप-लेवल स्टेट के साथ सिंक करने के लिए काम आता है।

import { ConversationProvider } from '@elevenlabs/react';
import { useState } from 'react';

function App() {
  const [muted, setMuted] = useState(false);

  return (
    <ConversationProvider isMuted={muted} onMutedChange={setMuted}>
      <YourComponents />
    </ConversationProvider>
  );
}

अगर ये प्रॉप्स नहीं दिए, तो म्यूट स्टेट पहले की तरह इंटरनली मैनेज होती है।

स्मार्ट कनेक्शन टाइप इंफरेंस

अब वॉइस कन्वर्सेशन डिफॉल्ट रूप से WebRTC और सिर्फ टेक्स्ट कन्वर्सेशन डिफॉल्ट रूप से WebSocket पर चलते हैं। ज्यादातर मामलों में connectionType मैन्युअली सेट करने की जरूरत नहीं है। अगर आपको कोई खास कनेक्शन टाइप चाहिए, तो आप उसे एक्सप्लिसिटली पास कर सकते हैं।

अपग्रेड करना

यह एक बड़ा बदलाव है, जिसके लिए मौजूदा इंटीग्रेशन में अपडेट्स जरूरी हैं। मुख्य बदलाव एक नजर में:

  • Conversation अब एक नेमस्पेस ऑब्जेक्ट और टाइप एलियास है, क्लास नहीं। instanceof चेक और सबक्लासिंग अब काम नहीं करेंगे।
  • useConversation के लिए ConversationProvider एंसेस्टर जरूरी है।
  • इनपुट और आउटपुट क्लासेज़ अब conversation इंस्टेंस पर डॉक्युमेंटेड मेथड्स से रिप्लेस हो गई हैं।
  • React Native पर, ElevenLabsProvider को ConversationProvider से रिप्लेस किया गया है @elevenlabs/react-native में।

सभी बड़े बदलावों की पूरी लिस्ट के लिए देखें changelog।

अपने कोडिंग एजेंट से ऑटोमेटेड माइग्रेशन

अपग्रेड को ऑटोमेट करने के लिए एक खास स्किल उपलब्ध है। यह स्किल आपकी मौजूदा इंटीग्रेशन पढ़ती है, जरूरी API बदलाव करती है, और इम्पोर्ट्स अपडेट करती है। यह माइग्रेशन का सारा मैकेनिकल काम संभालती है ConversationProvider, हटाए गए क्लास रेफरेंस को बदलना, और मेथड कॉल्स अपडेट करना।

यह स्किल खासकर बड़े कोडबेस के लिए फायदेमंद है, जहां माइग्रेशन कई फाइल्स में करना हो।

npx skills add elevenlabs/packages

अपडेटेड डॉक्स

SDK डॉक्स को नए API के हिसाब से अपडेट किया गया है:

शुरुआत कैसे करें

अपने प्लेटफॉर्म के लिए पैकेज इंस्टॉल करें:

# React (web)
npm install @elevenlabs/react

# React Native (Expo)
npx expo install @elevenlabs/react-native @livekit/react-native @livekit/react-native-webrtc

# Vanilla JavaScript
npm install @elevenlabs/client

@elevenlabs/react सब कुछ री-एक्सपोर्ट करता है @elevenlabs/client से, तो दोनों इंस्टॉल करने की जरूरत नहीं है।

अपने ऐप को ConversationProvider में रैप करें, हुक्स से सेशन शुरू करें, और पूरी API रेफरेंस के लिए देखें SDK डॉक्स।

और जैसा कि हमने शुरुआत में बताया, अपग्रेड को ऑटोमेट करने के लिए कोडिंग एजेंट स्किल उपलब्ध है:

npx skills add elevenlabs/packages

फीडबैक

अगर आपको कोई समस्या आए या सुझाव हो, तो GitHub पर इश्यू खोलें। SDK को एक्टिवली मेंटेन किया जाता है और हम हर रिपोर्ट देखते हैं।

ElevenLabs टीम के लेखों को देखें

उच्चतम गुणवत्ता वाले AI ऑडियो के साथ बनाएं

सेल्स से संपर्क करेंसाइन अप करें