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

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

Контекст и цель урока

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

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

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

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

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

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

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

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

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

Вы:

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

    определите структуру шагов (steps),

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

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

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

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

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

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

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

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

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

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

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

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

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

        создания секции в Metabot,

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

        добавления low-code команд,

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

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

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

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

        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. Не будет полноценной "платформенности"

                      В этом уроке:

                        нет marketplace узлов,

                        нет ролей,

                        нет multi-workspace,

                        нет двунаправленных связок с LLM.

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

                        Но что важно — вы получаете фундамент

                        После этого урока вы сможете:

                          сами добавить загрузку из Metabot,

                          сами добавить версионирование воронок,

                          сами расширить маппер,

                          сами сделать AI-генерацию блоков,

                          сами превратить это в SaaS-продукт.

                          То есть вы получите скелет, к которому легко прикручивать любые фичи.

                          Если хочешь — могу теперь собрать:

                            финальную версию главы 1 полностью

                            главу 2 — архитектура маппера/билдера

                            главу 3 — создание JSON-формата

                            главу 4 — разработка визуального редактора

                            Как двигаемся?