React Native SDK | ElevenLabs Documentation

Eine Erklärung der Funktionsweise von ElevenAgents finden Sie in der ElevenAgents-Übersicht.

Installation

Installieren Sie das Paket und seine Abhängigkeiten in Ihrem React-Native-Projekt.

npm install @elevenlabs/react-native @livekit/react-native @livekit/react-native-webrtc livekit-client

Eine Beispiel-App, die dieses SDK mit Expo verwendet, finden Sie hier.

Upgrade von einer früheren Version? Führen Sie npx skills add elevenlabs/packages aus, um den Skill elevenlabs:sdk-migration für Ihren KI-Coding-Agent zu installieren. Er automatisiert Änderungen an Importen, die Einbettung mit ConversationProvider und API-Updates.

Anforderungen

React Native mit LiveKit-Abhängigkeiten
Für Ihre Plattform konfigurierte Mikrofonberechtigungen
Expo-Kompatibilität (nur Entwicklungs-Builds)
React Native 0.79.0+ oder Metro, das bei älteren Versionen package.json-"exports" auflösen kann

Dieses SDK wurde für die Verwendung mit dem Expo-Framework entwickelt. Aufgrund seiner Abhängigkeit von der WebRTC-Implementierung von LiveKit sind Entwicklungs-Builds erforderlich und es kann nicht mit Expo Go verwendet werden.

@elevenlabs/react-native löst seinen React-Native-Einstiegspunkt über das Feld package.json "exports" auf. Metro löst "exports" standardmäßig erst ab Metro 0.82.0 auf, das mit React Native 0.79.0 ausgeliefert wurde (veröffentlicht am 8. April 2025). Wenn Sie eine React-Native-Version älter als 0.79 verwenden, setzen Sie resolver.unstable_enablePackageExports = true in Ihrer metro.config.js, damit dieses Paket korrekt aufgelöst wird:

const { getDefaultConfig } = require("metro-config");
const config = getDefaultConfig(__dirname);
config.resolver.unstable_enablePackageExports = true;
module.exports = config;

Einrichtung

Provider-Einrichtung

Umschließen Sie Ihre App mit ConversationProvider, um die ElevenAgents-Funktionen zu aktivieren.

import { ConversationProvider } from "@elevenlabs/react-native";
import React from "react";
function App() {
  return (
    <ConversationProvider>
      <YourAppComponents />
    </ConversationProvider>
  );
}

@elevenlabs/react-native exportiert ConversationProvider und alle Hooks aus @elevenlabs/react erneut. Die API ist identisch mit dem React-Web-SDK — die vollständige API-Referenz finden Sie in der React-SDK- Dokumentation.

Verwendung

Alle Hooks des React SDK sind über @elevenlabs/react-native verfügbar:

useConversation — praktischer Hook, der alle Statuswerte und Methoden kombiniert
useConversationControls — Aktionsmethoden (startSession, endSession usw.)
useConversationStatus — Verbindungsstatus
useConversationInput — Stummschaltungsstatus
useConversationMode — Sprech-/Zuhörstatus
useConversationFeedback — Verfügbarkeit und Übermittlung von Feedback
useConversationClientTool — dynamische Registrierung von Client-Tools
useRawConversation — rohe Konversationsinstanz

Eine Konversation starten

import { useConversationControls, useConversationStatus } from "@elevenlabs/react-native";
import React from "react";
import { View, Text, Button } from "react-native";
function ConversationComponent() {
  const { startSession, endSession } = useConversationControls();
  const { status } = useConversationStatus();
  const handleStart = async () => {
    await startSession({
      agentId: "agent_7101k5zvyjhmfg983brhmhkd98n6",
    });
  };
  return (
    <View>
      <Text>Status: {status}</Text>
      <Button
        title={status === "connected" ? "End" : "Start"}
        onPress={status === "connected" ? endSession : handleStart}
      />
    </View>
  );
}

Informationen zu privaten Agents, Authentifizierung, Client-Tools, Überschreibungen und allen weiteren Funktionen finden Sie in der React-SDK-Dokumentation.

Beispielimplementierung

Hier ist ein vollständiges Beispiel für eine React-Native-Komponente mit dem ElevenLabs Agents SDK:

import { ConversationProvider, useConversation } from "@elevenlabs/react-native";
import React, { useState } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
function ConversationScreen() {
  const [isConnected, setIsConnected] = useState(false);
  const conversation = useConversation({
    onConnect: () => {
      console.log("Connected to conversation");
      setIsConnected(true);
    },
    onDisconnect: () => {
      console.log("Disconnected from conversation");
      setIsConnected(false);
    },
    onMessage: (message) => {
      console.log("Message received:", message);
    },
    onError: (error) => {
      console.error("Conversation error:", error);
    },
  });
  const startConversation = async () => {
    try {
      await conversation.startSession({
        agentId: "agent_7101k5zvyjhmfg983brhmhkd98n6",
      });
    } catch (error) {
      console.error("Failed to start conversation:", error);
    }
  };
  const endConversation = async () => {
    try {
      await conversation.endSession();
    } catch (error) {
      console.error("Failed to end conversation:", error);
    }
  };
  return (
    <View style={styles.container}>
      <Text style={styles.status}>Status: {conversation.status}</Text>
      <Text style={styles.speaking}>
        Agent is {conversation.isSpeaking ? "speaking" : "not speaking"}
      </Text>
      <TouchableOpacity
        style={[styles.button, isConnected && styles.buttonActive]}
        onPress={isConnected ? endConversation : startConversation}
      >
        <Text style={styles.buttonText}>
          {isConnected ? "End Conversation" : "Start Conversation"}
        </Text>
      </TouchableOpacity>
      {conversation.canSendFeedback && (
        <View style={styles.feedbackContainer}>
          <TouchableOpacity
            style={styles.feedbackButton}
            onPress={() => conversation.sendFeedback(true)}
          >
            <Text>👍</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.feedbackButton}
            onPress={() => conversation.sendFeedback(false)}
          >
            <Text>👎</Text>
          </TouchableOpacity>
        </View>
      )}
    </View>
  );
}
function App() {
  return (
    <ConversationProvider>
      <ConversationScreen />
    </ConversationProvider>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  status: {
    fontSize: 16,
    marginBottom: 10,
  },
  speaking: {
    fontSize: 14,
    marginBottom: 20,
    color: "#666",
  },
  button: {
    backgroundColor: "#007AFF",
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 8,
    marginBottom: 20,
  },
  buttonActive: {
    backgroundColor: "#FF3B30",
  },
  buttonText: {
    color: "white",
    fontSize: 16,
    fontWeight: "600",
  },
  feedbackContainer: {
    flexDirection: "row",
    gap: 10,
  },
  feedbackButton: {
    backgroundColor: "#F2F2F7",
    padding: 10,
    borderRadius: 8,
  },
});
export default App;

Plattformspezifische Hinweise

iOS

Stellen Sie sicher, dass die Mikrofonberechtigungen in Ihrer Info.plist korrekt konfiguriert sind:

<key>NSMicrophoneUsageDescription</key>
<string>This app needs microphone access to enable voice conversations with AI agents.</string>

Android

Fügen Sie Mikrofonberechtigungen zu Ihrer android/app/src/main/AndroidManifest.xml hinzu:

<uses-permission android:name="android.permission.RECORD_AUDIO" />

Sie sollten Laufzeitberechtigungen anfordern, bevor Sie eine Konversation starten:

import { PermissionsAndroid, Platform } from "react-native";
const requestMicrophonePermission = async () => {
  if (Platform.OS === "android") {
    const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, {
      title: "Microphone Permission",
      message: "This app needs microphone access to enable voice conversations.",
      buttonNeutral: "Ask Me Later",
      buttonNegative: "Cancel",
      buttonPositive: "OK",
    });
    return granted === PermissionsAndroid.RESULTS.GRANTED;
  }
  return true;
};