ElevenAgents React SDK v1.0

Eleven का वर्ज़न 1.0.0 Agents JavaScript और React SDK अब उपलब्ध है। यह रिलीज़ @elevenlabs/client, @elevenlabs/react, और @elevenlabs/react-native पैकेजों का शुरू से किया गया नया आर्किटेक्चर है। इसका फोकस render performance, वेब और React Native में एक जैसे API और स्थिर पब्लिक API पर है। यह एक breaking change है, लेकिन परिचित useConversation hook बना हुआ है और अपग्रेड को ऑटोमेट करने के लिए एक coding agent skill उपलब्ध है।

नया प्रमुख वर्ज़न क्यों

इस रिलीज़ के पीछे तीन समस्याएं थीं।

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

React और React Native के API, फीचर सेट और कॉन्फ़िगरेशन विकल्प अलग थे। कोड और जानकारी एक प्लेटफ़ॉर्म से दूसरे पर ट्रांसफर नहीं हो पाते थे, और AI coding tools अक्सर ऐसे API सुझाते थे जो सिर्फ़ एक प्लेटफ़ॉर्म पर मौजूद थे। React Native में WebSocket connection mode भी बिल्कुल नहीं था।

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

कमज़ोर render performance

state में कोई भी बदलाव (status, mode, mute, volume) conversation state इस्तेमाल करने वाले हर component को फिर से render करता था। सिर्फ़ ज़रूरी हिस्से को subscribe करने का कोई तरीका नहीं था। अगर आपके component को सिर्फ़ connection status की परवाह थी, तब भी mute state बदलने पर वह फिर से render होता था।

ऐसा इसलिए था क्योंकि SDK सभी conversation state के लिए एक ही context provider इस्तेमाल करता था, जिसमें options objects के ज़रिए सिर्फ़ सीमित hooks और callbacks दिए जाते थे।

नाज़ुक अपग्रेड

SDK अपग्रेड करने पर आपका कोड टूटने का जोखिम था। Input, Output, और Connection जैसी अंदरूनी classes पब्लिक API का हिस्सा थीं, और डेवलपर volume के लिए conversation.output.gain.gain.value और ऑडियो visualization के लिए conversation.input.analyser जैसे raw browser primitives पर निर्भर थे। कोई भी अंदरूनी बदलाव इन access patterns को तोड़ सकता था।

हमारी तरफ़, inheritance-आधारित class hierarchy के कारण इसे धीरे-धीरे ठीक करना मुश्किल था, इसलिए साफ़ तौर पर अलग शुरुआत ज़रूरी थी।

क्या नया है

हर प्लेटफ़ॉर्म पर एक API

@elevenlabs/react-native अब @elevenlabs/react को एक पतली platform strategy layer के साथ फिर से export करता है: अब कोड की करीब 40 lines हैं, जो पहले एक हज़ार से ज़्यादा थीं। वही ConversationProvider, वही hooks, वही methods। वेब के लिए लिखा कोड सिर्फ़ import path बदलकर React Native पर चलता है, जानकारी सीधे प्लेटफ़ॉर्म के बीच ट्रांसफर होती है, और AI coding tools अब प्लेटफ़ॉर्म-विशिष्ट 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>
  );
}

बेहतर render performance के लिए ग्रैन्युलर hooks

छह नए hooks में से हर एक conversation state के अलग हिस्से को subscribe करता है। Components सिर्फ़ तब फिर से render होते हैं, जब उनका इस्तेमाल किया गया डेटा बदलता है।

जो status indicator पहले हर state बदलाव पर फिर से render होता था, अब सिर्फ़ connection status बदलने पर ही render होता है:

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

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

useConversation अब भी मौजूद है

परिचित useConversation hook अब भी मौजूद है और डेटा का वही रूप लौटाता है: status, mode, mute state और सभी control methods। यह ऊपर बताए गए ग्रैन्युलर hooks के ऊपर एक सुविधाजनक wrapper है। मौजूदा यूज़र पहले चरण में ConversationProvider + useConversation पर माइग्रेट कर सकते हैं, फिर जहां render performance ज़रूरी हो वहां धीरे-धीरे ग्रैन्युलर hooks अपना सकते हैं।

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

डायनामिक client tools

useConversationClientTool React components को ऐसे tools register करने देता है जिन्हें agent invoke कर सकता है। Tools component lifecycle से जुड़े होते हैं: mount होने पर register होते हैं, unmount होने पर unregister होते हैं और हमेशा नवीनतम closure value इस्तेमाल करते हैं।

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} />;
}

यह तब उपयोगी है जब किसी tool के handler को component state या props की ज़रूरत हो, जो provider स्तर पर उपलब्ध नहीं हैं।

स्थिर API surface

अंदरूनी classes (Input, Output, wake lock) अब private हैं। पब्लिक API raw browser primitives की जगह documented methods देता है:

• setVolume({ volume }) इसकी जगह लेता है: conversation.output.gain.gain.value = v
• getInputByteFrequencyData() इसकी जगह लेता है: conversation.input.analyser.getByteFrequencyData()
• setMicMuted(true) इसकी जगह लेता है: conversation.input.setMuted(true)

इसका मतलब है कि यूज़र कोड तोड़े बिना, अंदरूनी ऑडियो implementation बदला जा सकता है (जैसे transport layers बदलना)।

नियंत्रित state

ConversationProvider बाहरी state management के लिए isMuted और onMutedChange props स्वीकार करता है। यह sessions के बीच mute state बनाए रखने या उसे application-level state के साथ sync करने के लिए उपयोगी है।

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

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

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

जब ये props नहीं दिए जाते, तो पहले की तरह mute state अंदरूनी रूप से manage होती है।

स्मार्ट connection type inference

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

अपग्रेड करना

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

• Conversation अब class नहीं, बल्कि namespace object और type alias है। instanceof checks और subclassing अब काम नहीं करते।
• useConversation के लिए एक ancestor ConversationProvider ज़रूरी है।
• Input और Output classes को conversation instance पर मौजूद documented methods से बदला गया है।
• React Native पर, ElevenLabsProvider को ConversationProvider से बदला गया है, जो @elevenlabs/react-native से मिलता है।

breaking changes की पूरी सूची के लिए changelog देखें।

अपने coding agent के साथ ऑटोमेटेड माइग्रेशन

अपग्रेड को ऑटोमेट करने के लिए एक खास skill उपलब्ध है। यह skill आपके मौजूदा integration को पढ़ती है, ज़रूरी API बदलाव लागू करती है और imports अपडेट करती है। यह ConversationProvider पर माइग्रेट करने, हटाए गए class references को बदलने और method calls अपडेट करने का तकनीकी काम संभालती है।

यह skill खासकर बड़े codebases के लिए उपयोगी है, जहां माइग्रेशन कई files को प्रभावित करता है।

npx skills add elevenlabs/packages

अपडेटेड डॉक्यूमेंटेशन

SDK डॉक्यूमेंटेशन को नए API के अनुरूप अपडेट किया गया है:

• JavaScript SDK
• React SDK
• React Native SDK

शुरू करें

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

# 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 की हर चीज़ फिर से export करता है, इसलिए आपको दोनों इंस्टॉल करने की ज़रूरत नहीं है।

अपने ऐप को ConversationProvider में wrap करें, session शुरू करने के लिए hooks इस्तेमाल करें और पूरी API रेफरेंस के लिए SDK डॉक्यूमेंटेशन देखें।

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

npx skills add elevenlabs/packages

फ़ीडबैक

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