О чём урок
Прежде чем писать какой-либо код, вызовите навык /agents, чтобы изучить правильные шаблоны ElevenLabs SDK. Добавьте зависимости @elevenlabs/react и @elevenlabs/elevenlabs-js. Защищенный маршрут, который создает или загружает голосового агента. Никогда не раскрывайте 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 }. Защищенный GET endpoint, который возвращает свежий токен беседы для заданного agentId. Никогда не раскрывайте ELEVENLABS_API_KEY клиенту. Минимальная страница голосового агента Next.js. Используйте ConversationProvider из @elevenlabs/react. Используйте гранулярные хуки беседы useConversationControls и useConversationStatus. Покажите кнопку Create Agent и редактируемый ввод agent-id. Автоматически заполняйте при создании; разрешите вставлять другой id для его загрузки. Начинайте голосовые сессии со свежим токеном из /api/conversation-token. Запросите доступ к микрофону перед началом. Полагайтесь на вывод типа соединения SDK при запуске сессии; не прописывайте жестко connectionType: "webrtc", если нет особой причины. Покажите переключатель Старт/Стоп, статус соединения и текущую стенограмму беседы (добавляйте сообщения, не заменяйте). Обрабатывайте ошибки корректно и разрешайте переподключение. Сохраняйте UI простым и voice-first.
План урока
- 1. package.json
- 2. app/api/agent/route.ts
- 3. app/api/conversation-token/route.ts
- 4. app/page.tsx
Урок входит в полный доступ. Полный текст и видео открываются после оплаты. Первые уроки каждого курса бесплатны.