SDK React Native | ElevenLabs Documentation

Consultez la présentation d’ElevenAgents pour comprendre le fonctionnement d’ElevenAgents.

Installation

Installez le package et ses dépendances dans votre projet React Native.

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

Vous trouverez ici un exemple d’application utilisant ce SDK avec Expo.

Vous effectuez une mise à niveau depuis une version antérieure ? Exécutez npx skills add elevenlabs/packages pour installer la compétence elevenlabs:sdk-migration pour votre agent de codage IA, qui automatise les modifications d’importation, l’encapsulation par ConversationProvider et les mises à jour de l’API.

Prérequis

React Native avec les dépendances LiveKit
Autorisations de microphone configurées pour votre plateforme
Compatibilité avec Expo (builds de développement uniquement)
React Native 0.79.0+, ou Metro configuré pour résoudre package.json "exports" sur les versions antérieures

Ce SDK a été conçu et développé pour le framework Expo. En raison de sa dépendance à l’implémentation WebRTC de LiveKit, il nécessite des builds de développement et ne peut pas être utilisé avec Expo Go.

@elevenlabs/react-native résout son point d’entrée React Native via le champ "exports" de package.json. Metro ne résout "exports" par défaut qu’à partir de Metro 0.82.0, fourni avec React Native 0.79.0 (publié le 8 avril 2025). Si vous utilisez une version de React Native antérieure à 0.79, définissez resolver.unstable_enablePackageExports = true dans votre metro.config.js afin que ce package soit correctement résolu :

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

Configuration

Configuration du fournisseur

Encapsulez votre application avec ConversationProvider pour activer les fonctionnalités d’ElevenAgents.

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

@elevenlabs/react-native réexporte ConversationProvider et tous les hooks de @elevenlabs/react. L’API est identique à celle du SDK React pour le web, consultez la documentation du SDK React pour consulter la référence complète de l’API.

Utilisation

Tous les hooks du SDK React sont disponibles via @elevenlabs/react-native :

useConversation : hook pratique combinant tous les états et méthodes
useConversationControls : méthodes d’action (startSession, endSession, etc.)
useConversationStatus : état de la connexion
useConversationInput : état de mise en sourdine
useConversationMode : état de parole/d’écoute
useConversationFeedback : disponibilité et envoi de commentaires
useConversationClientTool : enregistrement dynamique d’outils client
useRawConversation : instance de conversation brute

Démarrer une conversation

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

Pour les agents privés, l’authentification, les outils client, les remplacements et toutes les autres fonctionnalités, consultez la documentation du SDK React.

Exemple d’implémentation

Voici un exemple complet d’un composant React Native utilisant le SDK ElevenLabs Agents :

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;

Considérations propres aux plateformes

iOS

Vérifiez que les autorisations de microphone sont correctement configurées dans votre Info.plist :

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

Android

Ajoutez les autorisations de microphone à votre android/app/src/main/AndroidManifest.xml :

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

Envisagez de demander les autorisations d’exécution avant de démarrer une conversation :

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