RecursosSDK

SDK de React Native

SDK de ElevenAgents: implementa agentes de voz personalizados e interactivos en minutos para apps de React Native.

Consulta la visión general de ElevenAgents para entender cómo funciona ElevenAgents.

Instalación

Instala el paquete y sus dependencias en tu proyecto de React Native.

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

Puedes encontrar una aplicación de ejemplo que usa este SDK con Expo aquí

¿Estás actualizando desde una versión anterior? Ejecuta npx skills add elevenlabs/packages para instalar la skill elevenlabs:sdk-migration para tu agente de programación con IA, que automatiza los cambios de importación, la integración de ConversationProvider y las actualizaciones de la API.

Requisitos

  • React Native con dependencias de LiveKit
  • Permisos de micrófono configurados para tu plataforma
  • Compatibilidad con Expo (solo compilaciones de desarrollo)
  • React Native 0.79.0 o superior, o Metro configurado para resolver "exports" de package.json en versiones anteriores

Este SDK se ha diseñado y desarrollado para usarse con el framework Expo. Debido a su dependencia de la implementación WebRTC de LiveKit, requiere compilaciones de desarrollo y no puede usarse con Expo Go.

@elevenlabs/react-native resuelve su punto de entrada de React Native mediante el campo "exports" de package.json. Metro solo resuelve "exports" de forma predeterminada a partir de Metro 0.82.0, incluido en React Native 0.79.0 (publicado el 8 de abril de 2025). Si utilizas una versión de React Native anterior a la 0.79, configura resolver.unstable_enablePackageExports = true en tu metro.config.js para que este paquete se resuelva correctamente:

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

Configuración

Configuración del proveedor

Envuelve tu aplicación con ConversationProvider para activar la funcionalidad de ElevenAgents.

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

@elevenlabs/react-native vuelve a exportar ConversationProvider y todos los hooks de @elevenlabs/react. La API es idéntica a la del SDK de React para web; consulta la documentación del SDK de React para ver la referencia completa de la API.

Uso

Todos los hooks del SDK de React están disponibles mediante @elevenlabs/react-native:

  • useConversation: hook práctico que combina todo el estado y los métodos
  • useConversationControls: métodos de acción (startSession, endSession, etc.)
  • useConversationStatus: estado de la conexión
  • useConversationInput: estado de silencio
  • useConversationMode: estado de habla/escucha
  • useConversationFeedback: disponibilidad y envío de comentarios
  • useConversationClientTool: registro dinámico de herramientas del cliente
  • useRawConversation: instancia de conversación sin procesar

Iniciar una conversación

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

Para agentes privados, autenticación, herramientas de cliente, anulaciones y todas las demás funciones, consulta la documentación del SDK de React.

Ejemplo de implementación

Aquí tienes un ejemplo completo de un componente de React Native que usa el SDK de 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;

Consideraciones específicas de cada plataforma

iOS

Asegúrate de que los permisos de micrófono estén configurados correctamente en tu Info.plist:

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

Android

Añade permisos de micrófono a tu android/app/src/main/AndroidManifest.xml:

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

Valora solicitar permisos de tiempo de ejecución antes de iniciar una conversación:

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