ElevenAgents Stories
eDreams ODIGEO scales agentic AI with ElevenLabs to power the future of conversational travel
Achieving double-digit improvements in resolution speed and transfer rates across five languages
ElevenAgents React SDK v1.0
ElevenAgents React SDK v1.0.0: eine grundlegende Überarbeitung des JavaScript- und React-SDKs mit granularen Hooks, einer einheitlichen API für Web und React Native sowie einer stabilen öffentlichen API.
Version 1.0.0 des ElevenAgents JavaScript- und React-SDKs ist jetzt verfügbar. Dieses Release ist eine komplette Neuentwicklung der @elevenlabs/client, @elevenlabs/react und @elevenlabs/react-native-Pakete, mit Fokus auf Render-Performance, einer einheitlichen API für Web und React Native sowie einer stabilen öffentlichen API. Es handelt sich um eine inkompatible Änderung, aber der bekannte useConversation-Hook bleibt erhalten und eine Coding-Agent-Funktion steht zur Verfügung, um das Upgrade zu automatisieren.
Warum eine neue Hauptversion
Drei Probleme haben dieses Release notwendig gemacht.
Unterschiedliche APIs auf Web und React Native
React und React Native hatten unterschiedliche APIs, verschiedene Funktionsumfänge und unterschiedliche Konfigurationsmöglichkeiten. Code und Wissen waren nicht zwischen den Plattformen übertragbar, und KI-Coding-Tools schlugen oft APIs vor, die nur auf einer Plattform existierten. In React Native fehlte zudem der WebSocket-Modus komplett.
Intern lag das daran, dass das React Native SDK ein Drittanbieter-SDK umschloss, statt auf @elevenlabs/client aufzubauen. Features und Fehlerbehebungen mussten doppelt ausgeliefert werden, und die Plattformen entfernten sich mit jeder Version weiter voneinander.
Schlechte Render-Performance
Jede Statusänderung (Status, Modus, Stummschaltung, Lautstärke) führte dazu, dass alle Komponenten, die den Gesprächsstatus nutzten, neu gerendert wurden. Es gab keine Möglichkeit, nur einen bestimmten Teil zu abonnieren. Selbst wenn eine Komponente nur am Verbindungsstatus interessiert war, wurde sie bei jeder Änderung des Stummschaltungsstatus neu gerendert.
Das lag daran, dass das SDK einen einzigen Context-Provider für den gesamten Gesprächsstatus nutzte, mit nur groben Hooks und Callbacks über Options-Objekte.
Fragile Upgrades
Ein Upgrade des SDKs konnte dazu führen, dass Ihr Code nicht mehr funktionierte. Interne Klassen wie Eingabe, Ausgabe und Verbindung waren Teil der öffentlichen API, und Entwickler nutzten direkte Browser-Primitiven wie conversation.output.gain.gain.value für die Lautstärke und conversation.input.analyser für die Audio-Visualisierung. Jede interne Änderung konnte diese Zugriffsmuster unterbrechen.
Auf unserer Seite erschwerte eine Vererbungshierarchie die schrittweise Behebung, daher war ein klarer Schnitt notwendig.
Was ist neu
Eine API für alle Plattformen
@elevenlabs/react-native exportiert jetzt @elevenlabs/react mit einer schlanken Plattform-Schicht: etwa 40 Zeilen Code statt über tausend. Der gleiche ConversationProvider, die gleichen Hooks, die gleichen Methoden. Code, der für das Web geschrieben wurde, funktioniert in React Native mit nur einer Anpassung des Importpfads. Wissen ist direkt übertragbar und KI-Coding-Tools schlagen keine plattformspezifischen APIs mehr vor.
| 1 | // On React Native, change this import to '@elevenlabs/react-native'. |
| 2 | import { |
| 3 | ConversationProvider, |
| 4 | useConversationControls, |
| 5 | useConversationStatus, |
| 6 | } from '@elevenlabs/react'; |
| 7 | |
| 8 | function App() { |
| 9 | return ( |
| 10 | <ConversationProvider> |
| 11 | <Agent /> |
| 12 | </ConversationProvider> |
| 13 | ); |
| 14 | } |
| 15 | |
| 16 | function Agent() { |
| 17 | const { startSession, endSession } = useConversationControls(); |
| 18 | const { status } = useConversationStatus(); |
| 19 | |
| 20 | if (status === 'connected') { |
| 21 | return <button onClick={endSession}>End</button>; |
| 22 | } |
| 23 | |
| 24 | return ( |
| 25 | <button onClick={() => startSession({ agentId: 'agent_7101k5zvyjhmfg983brhmhkd98n6' })}> |
| 26 | Start |
| 27 | </button> |
| 28 | ); |
| 29 | } |
Granulare Hooks für bessere Performance
Sechs neue Hooks abonnieren jeweils einen bestimmten Teil des Gesprächsstatus. Komponenten werden nur neu gerendert, wenn sich die von ihnen genutzten Daten ändern.
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
Ein Statusindikator, der zuvor bei jeder Statusänderung neu gerendert wurde, wird jetzt nur noch bei Änderung des Verbindungsstatus aktualisiert:
| 1 | import { useConversationStatus } from '@elevenlabs/react'; |
| 2 | |
| 3 | function StatusBadge() { |
| 4 | const { status } = useConversationStatus(); |
| 5 | return <span>{status}</span>; |
| 6 | } |
useConversation bleibt erhalten
Der bekannte useConversation-Hook existiert weiterhin und liefert die gleiche Datenstruktur: Status, Modus, Stummschaltung und alle Steuerungsmethoden. Er ist ein Komfort-Wrapper über die oben beschriebenen granularen Hooks. Bestehende Nutzer können zunächst auf ConversationProvider + useConversation umsteigen und dann schrittweise granulare Hooks einsetzen, wo Performance wichtig ist.
| 1 | import { useConversation } from '@elevenlabs/react'; |
| 2 | |
| 3 | function Agent() { |
| 4 | const { status, isSpeaking, isMuted, setMuted, startSession, endSession } = useConversation(); |
| 5 | // Same API shape as before, just requires a ConversationProvider ancestor. |
| 6 | } |
Dynamische Client-Tools
useConversationClientTool ermöglicht es React-Komponenten, Tools zu registrieren, die vom Agenten aufgerufen werden können. Tools sind an den Lebenszyklus der Komponente gebunden: Sie werden beim Mount registriert, beim Unmount entfernt und nutzen immer den aktuellen Wert der Closure.
| 1 | import { useConversationClientTool } from '@elevenlabs/react'; |
| 2 | import { useState } from 'react'; |
| 3 | |
| 4 | function MapComponent() { |
| 5 | const [location, setLocation] = useState({ lat: 0, lng: 0 }); |
| 6 | |
| 7 | useConversationClientTool('getLocation', () => { |
| 8 | return `${location.lat},${location.lng}`; |
| 9 | }); |
| 10 | |
| 11 | useConversationClientTool('setLocation', (params: { lat: number; lng: number }) => { |
| 12 | setLocation(params); |
| 13 | return 'Location updated'; |
| 14 | }); |
| 15 | |
| 16 | return <Map center={location} />; |
| 17 | } |
Das ist nützlich, wenn ein Tool Zugriff auf Komponentenstatus oder Props benötigt, die auf Provider-Ebene nicht verfügbar sind.
Stabile API-Oberfläche
Interne Klassen (Eingabe, Ausgabe, Wake Lock) sind jetzt privat. Die öffentliche API stellt dokumentierte Methoden bereit, statt direkter Browser-Primitiven:
setVolume({ volume })ersetztconversation.output.gain.gain.value = vgetInputByteFrequencyData()ersetztconversation.input.analyser.getByteFrequencyData()setMicMuted(true)ersetztconversation.input.setMuted(true)
Das bedeutet, dass die zugrundeliegende Audio-Implementierung (z. B. Austausch der Transport-Layer) ersetzt werden kann, ohne dass Nutzer-Code angepasst werden muss.
Gesteuerter Status
ConversationProvider akzeptiert isMuted und onMutedChange-Props für externes State-Management. Das ist nützlich, um den Stummschaltungsstatus über Sitzungen hinweg zu speichern oder mit dem Anwendungsstatus zu synchronisieren.
| 1 | import { ConversationProvider } from '@elevenlabs/react'; |
| 2 | import { useState } from 'react'; |
| 3 | |
| 4 | function App() { |
| 5 | const [muted, setMuted] = useState(false); |
| 6 | |
| 7 | return ( |
| 8 | <ConversationProvider isMuted={muted} onMutedChange={setMuted}> |
| 9 | <YourComponents /> |
| 10 | </ConversationProvider> |
| 11 | ); |
| 12 | } |
Wenn diese Props nicht gesetzt sind, wird der Stummschaltungsstatus wie bisher intern verwaltet.
Intelligente Verbindungserkennung
Sprachgespräche nutzen jetzt standardmäßig WebRTC, textbasierte Gespräche WebSocket. In den meisten Fällen muss connectionType nicht mehr manuell gesetzt werden. Falls ein bestimmter Verbindungstyp benötigt wird, kann er weiterhin explizit angegeben werden.
Upgrade
Dies ist eine inkompatible Änderung, die Anpassungen bestehender Integrationen erfordert. Die wichtigsten Änderungen im Überblick:
Conversationist jetzt ein Namespace-Objekt und ein Typalias, keine Klasse mehr.instanceof-Prüfungen und Vererbung funktionieren nicht mehr.useConversationbenötigt einenConversationProvider-Vorfahren.EingabeundAusgabe-Klassen werden durch dokumentierte Methoden auf der Conversation-Instanz ersetzt.- In React Native wird
ElevenLabsProviderdurchConversationProvideraus@elevenlabs/react-nativeersetzt.
Die vollständige Liste der Änderungen finden Sie im Changelog.
Automatisierte Migration mit Ihrem Coding-Agenten
Eine spezielle Funktion steht zur Verfügung, um das Upgrade zu automatisieren. Die Funktion liest Ihre bestehende Integration, passt die notwendigen API-Änderungen an und aktualisiert die Importe. Sie übernimmt die mechanische Arbeit der Migration auf ConversationProvider, ersetzt entfernte Klassenreferenzen und aktualisiert Methodenaufrufe.
Die Funktion ist besonders hilfreich bei größeren Codebasen, in denen die Migration mehrere Dateien betrifft.
| 1 | npx skills add elevenlabs/packages |
Aktualisierte Dokumentation
Die SDK-Dokumentation wurde an die neue API angepasst:
Erste Schritte
Installieren Sie das Paket für Ihre Plattform:
| 1 | # React (web) |
| 2 | npm install @elevenlabs/react |
| 3 | |
| 4 | # React Native (Expo) |
| 5 | npx expo install @elevenlabs/react-native @livekit/react-native @livekit/react-native-webrtc |
| 6 | |
| 7 | # Vanilla JavaScript |
| 8 | npm install @elevenlabs/client |
@elevenlabs/react exportiert alles von @elevenlabs/client, Sie müssen also nicht beide installieren.
Umgeben Sie Ihre App mit einem ConversationProvider, nutzen Sie die Hooks, um eine Sitzung zu starten, und sehen Sie in die SDK-Dokumentation für die vollständige API-Referenz.
Wie eingangs erwähnt, steht eine Coding-Agent-Funktion zur Verfügung, um das Upgrade zu automatisieren:
| 1 | npx skills add elevenlabs/packages |
Feedback
Wenn Sie auf Probleme stoßen oder Vorschläge haben, eröffnen Sie ein Issue auf GitHub. Das SDK wird aktiv gepflegt und jeder Bericht wird geprüft.
Entdecken Sie Artikel des ElevenLabs-Teams
Customer Stories
.webp&w=3840&q=95)
ElevenLabs partners with IBM to bring premium voice to watsonx Orchestrate
ElevenLabs' integration with IBM watsonx Orchestrate will help businesses to deliver natural, multilingual conversational experiences at scale