Implementación de un agente de voz (Expo)

Antes de escribir cualquier código, invoca la habilidad /agents para aprender los patrones correctos del SDK de ElevenLabs.

app/api/agent+api.ts

Ruta segura de la API de Expo Router que crea o carga un agente de voz. Nunca expongas ELEVENLABS_API_KEY al cliente.

• POST crea un nuevo agente de voz con valores predeterminados sensatos (nombre, prompt del sistema, primer mensaje, voz TTS). Usa la plantilla voice-only de la CLI como referencia para la forma del agente.
• GET carga un agente existente por el parámetro de consulta agentId.
• Configúralo como voz-primero: voz y modelo TTS reales, texto-solamente deshabilitado, entrada de texto del widget deshabilitada.
• Para agentes en inglés (language: "en"), usa tts.modelId: "eleven_flash_v2". No uses eleven_flash_v2_5 para agentes solo en inglés, o la creación del agente podría fallar la validación.
• Habilita los eventos del cliente necesarios para la renderización de transcripciones y audio.
• Devuelve { agentId, agentName }.

app/api/conversation-token+api.ts

Endpoint GET seguro que devuelve un token de conversación WebRTC para un agentId dado usando getWebrtcToken. Nunca expongas ELEVENLABS_API_KEY al cliente. Devuelve { token } como JSON.

app/index.tsx

Pantalla mínima del agente de voz de Expo Router.

• Usa @elevenlabs/react y el hook useConversation para la experiencia web.
• Muestra un botón Create Agent y una entrada editable para el ID del agente. Rellena automáticamente al crear; permite pegar un ID diferente para cargarlo en su lugar.
• Inicia sesiones WebRTC con un token de /api/conversation-token usando startSession({ conversationToken, connectionType: "webrtc" }). Solicita acceso al micrófono antes de iniciar.
• Muestra un interruptor de Inicio/Parada, estado de conexión y transcripción de la conversación en curso (añade mensajes, no reemplaces).
• Maneja los errores con elegancia y permite la reconexión. Mantén la interfaz de usuario simple y voz-primero.
• Mantén la ruta verificada como web-primero: usa llamadas de fetch relativas para Expo web y renderiza una breve nota de respaldo nativa en lugar de intentar un flujo de servidor en la aplicación no compatible.