Перейти к основному контенту

Как построить визуальный no-code редактор воронок на React поверх Metabot

Этот урок — про то, как поверх Metabot (который сам по себе полный low-code/full-code backend для чат-ботов и ассистентов) построить новый продукт: визуальный конструктор чат-ботов.

То есть вы создадите реальный продуктовый интерфейс — свой ManyChat / BotHelp, но умнее и современнее.

Главная идея:

Metabot — это ядро.
Пройдя этот урок, вы научитесь строить целые продукты поверх ядра, создавая собственный фронт, визуальный редактор, AI-функции и конструкторы.

Часть 1. Что будет в этом уроке — и чего здесь не будет

Чтобы вы сразу понимали рамки: этот урок — это фундамент, первая версия конструктора, на котором вы сможете дальше строить полноценный продукт. Здесь мы создаём работающий скелет визуального редактора и настраиваем импорт в Metabot.

А теперь — по пунктам.

Что будет в уроке

1. Создадим собственный JSON-формат воронки

Вы:

  • придумаете свой формат,

  • определите структуру шагов воронки,

  • создадите свои типы команд,

  • добавите свои параметры и опции.

То есть вы спроектируете свой DSL (domain-specific language) — язык описания воронок вашего продукта.

2. Разберётесь, как работает Mapper

Мы подробно посмотрим, как:

  • входящий JSON обрабатывается,

  • шаги проверяются,

  • неподдерживаемые типы фильтруются,

  • нужные команды собираются,

  • создаются переходы, кнопки, логгирование, LLM-вызовы и так далее.

То есть вы поймёте логику трансформации вашего формата → формат Metabot.

Вы получите исходный код Mapper'а.

3. Разберётесь, как работает Builder

Мы детально пройдём по механике:

  • создания секции/папки скриптов в Metabot,

  • создания скриптов,

  • добавления low-code команд в скрипт,

  • создания переходов и menu-кнопок,

  • удаления старых версий воронки.

И главное — вы увидите, как Builder напрямую манипулирует базой данных Metabot (PostgreSQL) через PHP/V8.

Это даёт понимание того, как работает ядро платформы и как можно строить свои надстройки.

Вы получите исходный код Builder'а.

4. Научитесь подключать Metabot как backend

Вы увидите, как:

  • передавать JSON в Metabot через API,

  • запускать импорт,

  • пересобирать воронку целиком,

  • структурировать код для своего продукта.

То есть Metabot превращается для вас в backend-as-a-platform, который вы можете использовать под любые проекты.

5. Сделаем визуальный редактор на React (с помощью V0 + Cursor)

Мы:

  • создадим canvas и интерфейс узлов,

  • свяжем их с JSON,

  • добавим  импорт и экспорт в/из файла,

  • добавим базовые настройки шагов и валидации,

  • подготовим front-end архитектуру.

Вы получите:

  • исходный код редактора,

  • архитектуру компонентов,

  • промпты, с помощью которых редактор собирался (это важно — это обучает самостоятельному созданию продуктов).

6. Настроим рабочий цикл разработки

Первые итерации будут такие:

1) создаём JSON вручную → 
2) отправляем через Postman → 
3) смотрим, как Metabot создал воронку →
4) фиксируем ошибки →
5) делаем свои команды →
6) строим визуальный редактор, который уже генерит нужный JSON →
7) импортируем в Metabot одной кнопкой

Это честный, практичный, продуктовый процесс.

7. Вы получите всё, чтобы создать свой продукт

В итоге у вас будет:

  • работающий визуальный редактор,

  • свой JSON-формат,

  • свой набор команд,
  • сохранение в файл и загрузка из файла,

  • исходники маппера/билдера,

  • связка React → JSON → Metabot.

На этом можно строить:

  • no-code конструктор,

  • CJM-редактор,

  • AI-конструктор цепочек,

  • бизнесовый продукт поверх Metabot.

🚫 Чего в этом уроке НЕ будет

Чтобы не вводить в заблуждение — сразу фиксируем:

1. Не будет двусторонней синхронизации

Мы делаем только импорт из вашего конструктора → Metabot.

То есть:

  • если воронка существует — она удаляется и создаётся заново,

  • мы не читаем текущую структуру из Metabot,

  • мы не отображаем её обратно в редактор.

Это осознанное упрощение.

Вторую сторону можно сделать, но это отдельный блок задач:
читать данные Metabot → конвертировать → отображать → синхронизировать версии.

Мы это оставляем для следующего урока, если будет запрос.

2. Не будет полноценного менеджмента трафика

Это очень важный момент.

В реальной жизни по ранее импортированной воронке уже могут идти живые пользователи.
Если вы меняете воронку, возникают вопросы:

  • что делать с активными пользователями?

  • надо ли их перенаправлять в новую версию?

  • надо ли блокировать обновления?

  • нужно ли создавать копии воронок?

  • нужно ли делать миграции шагов?

  • как правильно писать стратегию версионирования?

Это целая философия, и у каждого продукта — свой подход.
Мы эту сложность сознательно не включаем в этот урок.

Но если понадобится понадобится помощь — дайте знать, попробуем помочь.

3. Не будет полноценной "платформенности"

В этом уроке:

  • нет авторизации и регистрации — импорт по API токену пользователя, привязанному к боту.
  • нет совместной работы.

Мы делаем первую версию конструктора, но она уже рабочая и расширяемая.