Создание голосового ИИ-компаньона с нуля: подробное руководство для начинающих

Прежде чем писать код, нужно чётко определить задачу. Допустим, мы хотим создать ИИ-компаньона, который по голосовому запросу пользователя будет генерировать идеи для коротких обучающих видео. Пользователь звонит боту, обсуждает тему, а итоговая идея (название, описание) автоматически сохраняется в личном кабинете на сайте.

Архитектура решения будет состоять из пяти ключевых компонентов:

1. Голосовой интерфейс (VAPI): Принимает звонок, распознаёт речь, управляет диалогом.

2. Языковая модель (GPT-4o): Понимает запрос, ведёт осмысленный разговор, генерирует структурированный ответ.

3. Синтезатор речи (Eleven Labs): Превращает текстовые ответы модели в естественную человеческую речь.

4. База данных (Terso Cloud): Хранит результаты каждого успешного диалога.

5. Веб-приложение (Astro): Показывает пользователю сохранённые идеи в виде списка.

Поток данных будет выглядеть так: Звонок → VAPI → GPT-4o → Eleven Labs (озвучка) → VAPI (ответ пользователю) → Astro API → База данных → Astro UI (отображение).

Выбор и настройка инструментов

Шаг 1: «Мозг» компаньона — OpenAI GPT-4o

GPT-4o — одна из самых продвинутых и доступных моделей для понимания контекста и ведения диалога. Нам не потребуется писать сложный код для работы с ней напрямую, так как VAPI возьмёт эту задачу на себя. Главное, что нужно подготовить, — это системный промпт.

• Где взять: OpenAI Platform

• Что делаем: Создаём API-ключ (в разделе «API Keys»). Этот ключ позже добавим в настройки VAPI. Промпт может выглядеть так: *«Ты — креативный помощник для создания контента. Твоя задача — в дружеской беседе помочь пользователю сгенерировать идею для 100-секундного обучающего видео. Уточни тему, целевую аудиторию, ключевой посыл. В конце диалога сформируй чёткий итог: название видео и его краткое описание (2-3 предложения).»*

Шаг 2: Голос и диалог — платформа VAPI

VAPI — это сервис, который избавляет нас от сложностей с телефонией, WebRTC, распознаванием речи (STT) и управлением диалогом.

• Где взять: VAPI.ai

• Что делаем:

  1. Регистрируемся и создаём нового ассистента («Create Assistant»).

  2. В поле «Model» выбираем gpt-4o.

  3. В «System Prompt» вставляем текст, подготовленный на предыдущем шаге.

  4. В разделе «Voice» выбираем интеграцию с Eleven Labs. Потребуется API-ключ от Eleven Labs.

  5. В «First Message» пишем приветственную фразу: «Привет! Я твой креативный помощник. О чём вы хотите сделать короткое обучающее видео?»

  6. Важно: В настройках «End-of-Call» задаём, как диалог будет считаться успешным. Например, можно указать, что после получения структурированного итога (название + описание) звонок завершается, и эти данные отправляются на наш веб-сервер (webhook).

Шаг 3: Живой голос — Eleven Labs

Чтобы бот звучал не как робот, а как человек, используем Eleven Labs. Сервис позволяет клонировать голоса или использовать премиальные готовые.

• Где взять: ElevenLabs.io

• Что делаем:

  1. Создаём аккаунт, получаем API-ключ в разделе «Profile».

  2. В «Voice Lab» можно создать новый голос или выбрать из библиотеки (например, «Adam», «Ethan» для английского, или «Аркадий» для русского).

  3. Копируем voice_id выбранного голоса.

  4. Возвращаемся в VAPI, в настройках голоса ассистента указываем API-ключ и voice_id от Eleven Labs.

Шаг 4: Хранилище идей — Terso Cloud

Нам нужна простая облачная база данных для хранения идей. Terso Cloud (ранее TersoDB) отлично подходит для быстрого старта.

• Где взять: Terso Cloud

• Что делаем:

  1. Регистрируемся, создаём новый проект.

  2. Создаём таблицу video_ideas с колонками: id (автоинкремент), title (текст), description (текст), created_at (дата-время).

  3. Получаем URL базы данных и API-ключ для доступа. Они понадобятся для нашего серверного кода.

Шаг 5: Личный кабинет — фреймворк Astro

Astro — современный фреймворк для создания быстрых веб-сайтов. Он отлично работает с серверным рендерингом и API-роутами.

• Где взять: Astro.build

• Что делаем:

  1. Устанавливаем Astro: npm create astro@latest my-ai-companion.

  2. Создаём серверный API-роут для приёма данных от VAPI: src/pages/api/save-idea.js (или .ts).

  3. В этом роуте пишем логику: проверяем секретный ключ (чтобы только VAPI мог отправлять данные), парсим входящий JSON (где будут title и description) и сохраняем их в Terso Cloud с помощью fetch -запроса.

  4. Создаём страницу для отображения идей: src/pages/ideas.astro. В её серверной части (Astro.glob или прямо в разметке) делаем запрос к Terso Cloud, чтобы получить все записи из video_ideas, и рендерим их в виде списка.

Сборка пазла — интеграция

Это самый ответственный этап. Нужно соединить все сервисы между собой.

1. Настраиваем Webhook в VAPI. В настройках ассистента находим поле «Webhook URL». Указываем URL нашего Astro API-роута, который мы создали (например, https://наш-сайт.com/api/save-idea). Также указываем секретный ключ (например, в заголовке Authorization), который будем проверять на стороне Astro.

2. Пишем код API-роута в Astro.

   import { TersoClient } from ‘terso-client’; // Примерный клиент

   export async function post({ request }) {
   // 1. Проверяем ключ (например, из заголовка)
   const authHeader = request.headers.get(‘Authorization’);
   if (authHeader !== ‘Bearer наш-секретный-ключ’) {
   return new Response(‘Unauthorized’, { status: 401 });
   }

   // 2. Получаем данные от VAPI
   const data = await request.json();
   const { title, description } = data; // VAPI отправит их в том формате, который мы задали в End-of-Call

   // 3. Сохраняем в Terso Cloud
   const client = new TersoClient({ apiKey: ‘ВАШ_API_КЛЮЧ_TERSO’ });
   await client.insert(‘video_ideas’, { title, description, created_at: new Date() });

   // 4. Отвечаем VAPI, что всё ок
   return new Response(JSON.stringify({ success: true }), { status: 200 });
   }

3. Тестируем поток. Берем номер телефона, предоставленный VAPI, и звоним ему. Проводим диалог. После завершения звонка проверяем:

   • Логи VAPI на предмет ошибок.

   • Базу данных Terso Cloud — появилась ли новая запись?

   • Страницу /ideas в нашем Astro-приложении — отображается ли идея?