Голосовой агент в мобильном приложении

Урок 2 из 20 курса «ElevenLabs: примеры»: официальный курс ElevenLabs Cookbook (Илевен Лабс) на русском языке. Этот урок бесплатный.

Прежде чем писать какой-либо код, вызовите навык /agents, чтобы изучить правильные паттерны ElevenLabs SDK.

app/api/agent+api.ts

Защищенный API маршрут Expo Router, который создает или загружает голосового агента. Никогда не раскрывайте ELEVENLABS_API_KEY клиенту.

  • POST создает нового голосового агента с разумными значениями по умолчанию (имя, системный prompt, первое сообщение, голос TTS). Используйте CLI шаблон voice-only в качестве эталона для структуры агента.
  • GET загружает существующего агента по параметру запроса agentId.
  • Настройте как voice-first: реальный голос и модель TTS, только текст отключен, текстовый ввод виджета отключен.
  • Для англоязычных агентов (language: "en") используйте tts.modelId: "eleven_flash_v2". Не используйте eleven_flash_v2_5 для агентов, работающих только на английском языке, иначе создание агента может не пройти валидацию.
  • Включите клиентские события, необходимые для рендеринга транскрипта и аудио.
  • Возвращает { agentId, agentName }.

app/api/conversation-token+api.ts

Защищенный GET endpoint, который возвращает WebRTC токен беседы для заданного agentId с использованием getWebrtcToken. Никогда не раскрывайте ELEVENLABS_API_KEY клиенту. Возвращает { token } в формате JSON.

app/index.tsx

Минимальный экран голосового агента Expo Router.

  • Используйте @elevenlabs/react и хук useConversation для веб-интерфейса.
  • Покажите кнопку Create Agent и редактируемое поле ввода agent-id. Автоматически заполняйте при создании; позвольте вставлять другой id для его загрузки.
  • Начните WebRTC сессии с токеном из /api/conversation-token, используя startSession({ conversationToken, connectionType: "webrtc" }). Запросите доступ к микрофону перед началом.
  • Покажите переключатель Start/Stop, статус соединения и текущий транскрипт беседы (добавляйте сообщения, не заменяйте).
  • Изящно обрабатывайте ошибки и разрешайте переподключение. Сохраняйте UI простым и voice-first.
  • Сохраняйте проверенный путь web-first: используйте относительные вызовы fetch для Expo web и отображайте краткое нативное сообщение о резервном варианте вместо попытки неподдерживаемого серверного потока в приложении.

Полезные гиды