Визуальный конструктор чат-ботов с экспортом в код — Umbot Flow

Umbot Flow: бесплатный визуальный конструктор чат-ботов и навыков Алисы с экспортом в код

Разбираемся, как собрать сценарий бота на холсте, проверить его в симуляторе и получить настоящий TypeScript-проект для Telegram, Алисы, VK, MAX и других платформ.

У визуальных конструкторов чат-ботов одна и та же проблема: собрать бота легко, а вот уйти из конструктора — почти невозможно. Сценарий живёт на чужой платформе, исходников нет, и когда понадобится интеграция, которой нет в блоках, бота приходится писать заново. Umbot Flow устроен иначе: это редактор, в котором вы собираете сценарий мышкой, а на выходе получаете обычный проект на TypeScript — ваш, без привязки к сервису. Разберём, что умеет редактор, как выглядит путь от схемы до работающего бота и где у подхода границы.

Что такое Umbot Flow

Umbot Flow — визуальный редактор сценариев для фреймворка umbot. Основные свойства:

• Бесплатный и с открытым кодом. Регистрация не нужна, работает в браузере.
• Семь платформ из одного сценария: Telegram, Яндекс.Алиса, VK, Маруся, Viber, MAX и Сбер SmartApp.
• Симулятор чата прямо в редакторе — логику можно проверить до генерации кода.
• Данные остаются у вас. Редактор никуда не отправляет сценарий и токены; результат — файл flow.json, который вы скачиваете.
• Экспорт в код. Из flow.json одна команда CLI собирает готовый проект, который дальше развивается как обычный код.

Из каких блоков собирается сценарий

В текстах можно подставлять переменные: Привет, {{userName}}! превратится в приветствие по имени, которое пользователь ввёл на одном из шагов. Состояние хранится в хранилище голосовой платформы, в файлах или в MongoDB — это выбирается в настройках сценария.

От схемы до работающего бота: пошагово

1. Откройте flow.maxim-m.ru, выберите платформы и соберите сценарий на холсте.
2. Проверьте диалог во встроенном симуляторе: пройдите все ветки, включая ошибки ввода.
3. Экспортируйте сценарий — скачается файл flow.json.
4. Установите Node.js 22+ и сгенерируйте проект:

   npx umbot create from-flow flow.json --output ./my-bot
   cd my-bot
   npm install
   npm run build
   npm start

5. Впишите токены платформ в файл .env проекта — он создаётся автоматически. В сгенерированном README.md описано, как подключить каждую выбранную платформу.

Файл сценария можно проверить отдельно, до генерации: npx umbot validate flow.json. А если бот должен работать без собственного сервера, добавьте флаг --usecloud — проект соберётся под Yandex Cloud Functions (подробнее в статье про навык на serverless).

Что получается на выходе

Генератор создаёт обычный TypeScript-проект: точку входа src/index.ts с командами и шагами, вспомогательные функции, package.json, tsconfig.json, .env и .gitignore. Каждый блок сценария становится понятной функцией с комментарием. Например, команда с ответом превращается примерно в такой код:

bot.addCommand('prices', ['цены', 'прайс', 'сколько стоит'], (_, ctrl) => {
    setText(ctrl, 'Консультация — 1 500 ₽, диагностика — 3 000 ₽.');
    ctrl.buttons.addBtn('Записаться');
});

Генератор заранее учитывает то, что часто забывают при ручной разработке: приветствие срабатывает и на /start в Telegram, и на запуск навыка Алисы, и на кнопку «Начать» в MAX; незаконченный шаг из прошлой сессии не перехватывает начало нового диалога; HTTP-запросы выполняются с таймаутом, чтобы не превысить время ответа голосовой платформы; пароли от базы данных уходят в .env, а не в исходный код.

Чем это отличается от обычного конструктора

Честно о минусе: хостинг — ваша забота. Если нужен навык «на неделю» и сервер поднимать не хочется, облачный конструктор проще. Разница подробно разобрана в статье конструктор навыков или фреймворк.

Для кого Umbot Flow

• Для бизнеса и менеджеров продукта — собрать и показать сценарий без программиста, а потом отдать разработчику готовый проект, а не картинку.
• Для разработчиков — быстро накидать каркас на десятки команд и шагов и сразу перейти к интересной части: интеграциям и нестандартной логике.
• Для студий — согласовывать сценарий с заказчиком в наглядной схеме и не переносить его в код вручную.

Частые вопросы

Нужно ли уметь программировать? Для сборки и проверки сценария — нет. Для запуска понадобится выполнить несколько команд в терминале и разместить проект на сервере; с этим поможет сгенерированная инструкция.

Можно ли вернуться из кода обратно в редактор? Генерация односторонняя: после ручных правок в коде проект развивается как код. Поэтому сценарий удобно доводить в редакторе до генерации, а сложную логику дописывать уже после.

Можно ли сделать навык для Алисы и бота для Telegram одним сценарием? Да, отметьте обе платформы: сценарий один, форматы кнопок и ответов для каждой платформы генератор и фреймворк подберут сами.

Куда дальше

• Открыть Umbot Flow — собрать первый сценарий.
• Формат flow.json и генерируемый код — для разработчиков, которые будут дорабатывать проект.
• Разработка ботов под ключ — если сценарий готов, а запускать и дорабатывать его некому.