Open Lovable — открытый аналог Lovable от Firecrawl: клонируем любой сайт и собираем React-приложения через чат с AI

Команда Firecrawl выложила в открытый доступ Open Lovable — приложение, в котором вы общаетесь с AI в чате, а он за вас собирает современное React-приложение. Официальное описание ёмкое: «Clone and recreate any website as a modern React app in seconds». По сути, это открытая демонстрация того, как устроен популярный сервис Lovable.dev, — причём демонстрация вполне рабочая: на момент написания у проекта около 28.3 тысяч звёзд и 5.4 тысяч форков, а код распространяется под лицензией MIT.

Что такое Open Lovable

Open Lovable — это веб-приложение с чат-интерфейсом. Вы описываете, какое приложение хотите получить (или даёте ссылку на существующий сайт, который нужно воссоздать), а AI-агент генерирует код фронтенда на React. Авторы позиционируют проект как «example app» — пример того, что можно построить на базе API Firecrawl, — и прямо рекомендуют полноценное облачное решение Lovable.dev.

Такая честность подкупает: вместо маркетинговой обёртки вы получаете исходники, по которым можно изучить архитектуру AI-приложения для генерации кода — от чата до исполнения кода в песочнице. Для разработчиков, интересующихся vibe coding и устройством подобных инструментов, это редкая возможность заглянуть под капот.

Сама идея не нова: Lovable, v0 от Vercel и подобные сервисы давно показали, что «опиши — получи работающий фронтенд» — востребованный сценарий. Но закрытые сервисы не дают посмотреть, как устроен конвейер внутри. Open Lovable закрывает этот пробел.

Как это работает

Хотя README не описывает внутреннюю архитектуру подробно, структура репозитория и конфигурация говорят сами за себя. Конвейер складывается из трёх частей:

1. Сканирование сайтов через Firecrawl. Firecrawl — это API для превращения веб-страниц в чистые данные для LLM: Markdown, структурированный контент, скриншоты. Когда вы просите «клонировать» сайт, именно Firecrawl вытаскивает его содержимое, чтобы модель понимала, что воссоздавать.

2. Генерация кода через LLM на ваш выбор. Поддерживаются четыре провайдера: Google Gemini, Anthropic (Claude), OpenAI и Groq — достаточно указать соответствующий API-ключ в конфигурации.

3. Исполнение в песочнице. Сгенерированный код запускается в изолированной среде: либо в Vercel Sandbox (вариант по умолчанию), либо в E2B. Песочница позволяет безопасно выполнять код, который сгенерировала модель, и показывать живой результат.

Отдельного упоминания заслуживает Fast Apply — опциональное ускорение редактирования через Morph. Вместо полной регенерации файла при каждой правке модель применяет точечные изменения к существующему коду, что заметно быстрее в итеративном режиме «покажи — поправь — покажи снова».

Ключевые возможности

Технологический стек

Проект построен на современном фронтенд-стеке:

• Next.js (App Router — в репозитории есть next.config.ts и каталог app/)
• React и TypeScript
• Tailwind CSS для стилей
• Менеджеры пакетов: Bun и pnpm (в репозитории лежат bun.lock и pnpm-lock.yaml)
• Jotai для управления состоянием — на это указывает каталог atoms/

Структура репозитория типична для Next.js-приложения: app/, components/, hooks/, lib/, styles/, types/, utils/. Отдельный интерес представляет packages/create-open-lovable — встроенный пакет для развёртывания проекта, аналогичный create-next-app: он упрощает старт, чтобы не клонировать репозиторий вручную.

Установка и запуск

Запуск локально занимает пару минут. Понадобится Node.js и API-ключ Firecrawl — остальные ключи по ситуации.

git clone https://github.com/firecrawl/open-lovable.git
cd open-lovable
pnpm install  # or npm install / yarn install

Затем создайте файл .env.local в корне проекта. Обязательный минимум и все опции — из официального .env.example:

# =================================================================
# REQUIRED
# =================================================================
FIRECRAWL_API_KEY=your_firecrawl_api_key    # https://firecrawl.dev

# =================================================================
# AI PROVIDER - Choose your LLM
# =================================================================
GEMINI_API_KEY=your_gemini_api_key        # https://aistudio.google.com/app/apikey
ANTHROPIC_API_KEY=your_anthropic_api_key  # https://console.anthropic.com
OPENAI_API_KEY=your_openai_api_key        # https://platform.openai.com
GROQ_API_KEY=your_groq_api_key            # https://console.groq.com

# =================================================================
# FAST APPLY (Optional - for faster edits)
# =================================================================
MORPH_API_KEY=your_morphllm_api_key    # https://morphllm.com/dashboard

# =================================================================
# SANDBOX PROVIDER - Choose ONE: Vercel (default) or E2B
# =================================================================
SANDBOX_PROVIDER=vercel  # or S0

После этого запускайте дев-сервер:

pnpm dev  # or npm run dev / yarn dev

Приложение откроется на http://localhost:3000.

Настройка песочницы

Провайдера песочницы выбирает переменная SANDBOX_PROVIDER — vercel (по умолчанию) или e2b.

Vercel Sandbox. Для разработки авторы рекомендуют OIDC-токен: выполните vercel link, затем vercel env pull — и VERCEL_OIDC_TOKEN подтянется автоматически. Для продакшена или когда OIDC недоступен, можно использовать personal access token, указав VERCEL_TEAM_ID, VERCEL_PROJECT_ID и VERCEL_TOKEN из дашборда Vercel.

E2B. Альтернативный вариант — песочницы E2B: достаточно раскомментировать E2B_API_KEY и получить ключ на e2b.dev.

Гибкость с песочницами — приятная деталь: вы не привязаны к инфраструктуре Vercel и можете выбрать вариант, который лучше вписывается в ваш стек.

Open Lovable и Lovable.dev

Важно понимать соотношение проектов. Lovable.dev — коммерческий облачный продукт «всё в одном»: хостинг, деплой, интеграции, команда поддержки. Open Lovable — открытый пример от команды Firecrawl, показывающий механику такого подхода и активно использующий Firecrawl API для сканирования сайтов.

Практический вывод:

• нужен готовый инструмент «сел и работает» без возни с ключами и деплоем — берите Lovable.dev;
• хотите изучить, как строить AI-генераторы фронтенда, доработать под себя или встроить в свой продукт — Open Lovable даёт полную свободу под лицензией MIT.

Кому это интересно

Open Lovable пригодится нескольким категориям разработчиков:

• Изучающим AI-инженерию. Рабочий пример конвейера «сканирование → генерация → исполнение в песочнице» ценнее любых туториалов.
• Командам, создающим свои AI-инструменты. Форк под свою задачу — легальный путь к собственному продукту класса «AI builder».
• Фронтендерам на React/Next.js. Можно подсмотреть паттерны организации чат-интерфейса, работы с песочницами и несколькими LLM-провайдерами одновременно.
• Пользователям Lovable и подобных сервисов, которым не хватает контроля, прозрачности или возможности доработать инструмент под специфические требования.

Активность и зрелость проекта

Проект живой и развивается: в репозитории около 59 коммитов, при этом 101 открытый issue и 44 pull request'а — типичная картина для репозитория, к которому пришла большая аудитория быстрее, чем авторы успевают обрабатывать обращения. Такое соотношение стоит учитывать, если планируете использовать Open Lovable в реальных задачах: рассчитывайте на собственные силы при отладке и, возможно, на контрибьюции вверх по потоку.

Итоги

Open Lovable — удачный пример того, как open-source демистифицирует модную категорию продуктов. Клон Lovable от команды Firecrawl не претендует на роль замены облачному сервису, но отлично справляется с ролью учебного пособия и отправной точки: понятный стек (Next.js, TypeScript, Tailwind), свобода выбора LLM-провайдера, продуманная работа с песочницами и лицензия MIT. Почти 28 тысяч звёзд говорят о том, что сообщество оценило этот подход.

Репозиторий: github.com/firecrawl/open-lovable