Bubble Lab - Визуальный AI-конструктор, который пишет чистый TypeScript за вас

01 дек 2025
1,093
182
5
5 месяцев

Знакомая ситуация? Вы начинаете проект по автоматизации на модной no-code или low-code платформе. Сначала всё идёт прекрасно: перетаскиваете блоки, соединяете стрелочками, и магия работает. Но как только задача усложняется, начинаются проблемы. Отладка превращается в ад, версионирование — в ручной труд, а любая нестандартная логика требует костылей. В итоге вы оказываетесь заперты в "чёрном ящике" с проприетарным форматом данных.

А что, если бы можно было взять лучшее из двух миров? Удобство визуального редактора и полный контроль, который даёт настоящий код. Именно эту идею и реализует Bubble Lab — open-source платформа для создания AI-воркфлоу, которая ставит разработчика на первое место.

Редактирование процесса в Bubble Lab

Что такое Bubble Lab и зачем он нужен?

Если коротко, Bubble Lab — это конструктор для автоматизации процессов, но с одним ключевым отличием: он не создаёт очередной JSON-файл, который можно запустить только внутри этой же платформы. Вместо этого он компилирует ваши визуальные схемы в чистый, читаемый и готовый к работе TypeScript-код.

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

  • Хранить в Git и отслеживать изменения.
  • Интегрировать в существующую кодовую базу.
  • Отлаживать стандартными инструментами.
  • Запускать где угодно: локально, на сервере, в CI/CD пайплайне.

Проект идеально подходит для разработчиков, которые хотят создавать сложные AI-агенты и процессы, но не хотят жертвовать контролем, прозрачностью и возможностью кастомизации.

Реклама

Ключевые возможности, которые цепляют

Давайте разберёмся, что делает Bubble Lab таким интересным инструментом.

1. Код — ваш главный актив

Это, пожалуй, самая важная особенность. Вместо того чтобы быть заложником платформы, вы получаете на выходе аккуратный TypeScript-класс. Посмотрите на пример воркфлоу, который собирает посты с Reddit и делает по ним саммари с помощью AI:

export class RedditNewsFlow extends BubbleFlow<'webhook/http'> {
  async handle(payload: RedditNewsPayload) {
    const subreddit = payload.subreddit || 'worldnews';
    const limit = payload.limit || 10;

    // Шаг 1: Скрейпим посты с Reddit
    const scrapeResult = await new RedditScrapeTool({
      subreddit: subreddit,
      sort: 'hot',
      limit: limit,
    }).action();

    const posts = scrapeResult.data.posts;

    // Шаг 2: AI анализирует и суммирует посты
    const summaryResult = await new AIAgentBubble({
      message: `Analyze these top ${posts.length} posts from r/${subreddit}:
        ${postsText}

        Provide: 1) Summary of top news, 2) Key themes, 3) Executive summary`,
      model: { model: 'google/gemini-1.5-flash' },
    }).action();

    return {
      subreddit,
      postsScraped: posts.length,
      summary: summaryResult.data?.response,
      status: 'success',
    };
  }
}

Всего 50 строк понятного, типизированного кода. Каждый шаг — это вызов "пузырька" (Bubble), будь то инструмент для скрейпинга или AI-агент. Никакой магии, только последовательное выполнение асинхронных действий.

2. Полная наблюдаемость и отладка

Раз уж мы имеем дело с кодом, то и отладка должна быть на уровне. Bubble Lab предоставляет встроенные инструменты для трассировки выполнения. Вы видите не только логи каждого шага, но и более интересные метрики:

  • Сколько времени занял каждый "пузырёк".
  • Сколько токенов было потрачено на AI-запросы.
  • Пиковое потребление памяти.
Запуск и отладка процесса в Bubble Lab

Это бесценно, когда вы пытаетесь оптимизировать свои AI-агенты или просто понять, почему что-то пошло не так.

3. AI-ассистент, который помогает строить

Интересная фича — "Prompt to Workflow". Вы можете описать желаемый процесс на естественном языке, и AI-ассистент по имени Pearl сам набросает для вас рабочий воркфлоу из готовых "пузырьков" (интеграций, утилит и логических узлов). Это отличная отправная точка, которую потом можно доработать в визуальном редакторе или прямо в коде.

4. Лёгкий старт и миграция

Начать работу с Bubble Lab очень просто. Можно воспользоваться облачной версией app.bubblelab.ai без какой-либо установки. А если вы хотите запустить всё локально, потребуется всего две команды:

# 1. Устанавливаем зависимости
pnpm install

# 2. Запускаем всё
pnpm run dev

Скрипт сам настроит окружение, создаст .env файлы и поднимет фронтенд с бэкендом.

Кстати, для тех, кто уже использует популярный инструмент n8n, есть приятный бонус: Bubble Lab умеет импортировать его JSON-схемы и автоматически преобразовывать их в свою архитектуру "пузырьков".

Как это работает под капотом?

Bubble Lab построен на современном технологическом стеке и имеет модульную архитектуру.

  • Фронтенд (Bubble Studio): React + Vite. Это визуальный редактор, где вы строите свои процессы.
  • Бэкенд (API): Bun + Hono. Быстрый и легковесный сервер для хранения и выполнения воркфлоу.
  • Ядро: Всё написано на TypeScript, что обеспечивает строгую типизацию.
  • Архитектура: Проект представляет собой монорепозиторий, управляемый с помощью pnpm. Основная логика вынесена в переиспользуемые пакеты, такие как @bubblelab/bubble-core (движок) и @bubblelab/bubble-runtime (среда выполнения).

Такой подход не только делает проект гибким, но и позволяет сообществу легко добавлять новые "пузырьки"-интеграции.

Кому и зачем стоит попробовать Bubble Lab?

Этот проект — настоящая находка для определённого круга разработчиков. Я бы порекомендовал его, если вы:

  • Создаёте сложных AI-агентов. Когда логика становится нетривиальной, возможность работать с ней как с кодом, а не как со схемой, спасает массу времени и нервов.
  • Цените контроль и прозрачность. Вы хотите точно знать, что происходит на каждом шаге, и иметь возможность вмешаться в любой момент.
  • Интегрируете автоматизацию в существующие проекты. Экспорт в TypeScript позволяет бесшовно встроить воркфлоу в вашу CI/CD систему или вызвать его как обычный модуль из вашего бэкенда.
  • Ищете альтернативу "чёрным ящикам". Если вас утомляет vendor lock-in и ограничения no-code платформ, Bubble Lab предлагает глоток свежего воздуха.

Bubble Lab нащупал очень правильный баланс между простотой визуального конструирования и мощью полноценного кода. Это не просто "ещё один" инструмент автоматизации. Это платформа, созданная разработчиками для разработчиков, которая уважает наше желание контролировать код, отлаживать его и владеть им.

Проект активно развивается, и сообщество в Discord всегда готово помочь. Если вы ищете современный, гибкий и прозрачный способ автоматизации AI-процессов, обязательно загляните на GitHub Bubble Lab и попробуйте его в деле. Возможно, это именно тот инструмент, которого вам не хватало.

🍪 Мы используем файлы cookie и сервис аналитики Яндекс.Метрика, чтобы сайт работал лучше. Продолжая пользоваться devtrends.ru, вы соглашаетесь с обработкой данных согласно Политике конфиденциальности.