Создайте клон Lovable за один день с помощью Lizard Sandboxes

Клону Lovable нужно место для запуска сгенерированного кода. Модель пишет файлы, устанавливает зависимости, проверяет сборки и запускает сервер превью. Каждому проекту клиента требуется собственное рабочее пространство.

С помощью Lizard Sandboxes ваш бэкенд создает это пространство через Lizard SDK, отправляет туда файлы, выполняет команды и возвращает URL приватного превью. Вы можете начать работу без покупки серверов или резервирования парка машин.

Для разработчика, который знает React и Node.js и начинает с шаблона приложения, один день — вполне реальный срок для небольшого MVP. Пользователь вводит промпт, генерирует React-приложение, открывает его превью и просит внести изменения. Платежи, командный доступ и полноценный продукт для деплоя потребуют больше времени.

Что мы протестировали на Lizard

15 октября 2026 года мы проверили запуск приложения в Small Firecracker Sandboxes в регионе us-east-1, используя Lizard SDK 0.1.69.

Первый успешный запуск занял около 22 секунд от создания песочницы до получения рабочего превью. Сюда вошли установка Node.js и npm, загрузка стартового шаблона, установка зависимостей и сборка приложения. Мы проверили этот сценарий один раз. Для оценки скорости запуска нужна серия замеров.

Тест также выявил две ошибки в первом черновике. Объект песочницы предоставляет свой ID как sandbox.sandboxId. А полученная нами песочница interpreter не содержала Node.js или npm. Приведенный ниже код устанавливает фиксированную версию Node.js перед запуском сборки.

Мы протестировали процесс выполнения и превью. Приведенное ниже расписание на один день — это план разработки. Мы не засекали время создания полноценного SaaS-продукта и не проверяли качество вывода внешней модели.

Сделайте первую версию небольшой

Начните с одного шаблона React и Vite. Позвольте пользователям создавать простые дашборды, лендинги или внутренние инструменты с тестовыми данными.

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

Зафиксируйте список зависимостей. Предоставьте модели известный набор пакетов и разрешите редактировать несколько исходных файлов. Это упростит исправление неудачных сборок.

Полезный первый запрос:

Build a dashboard for a small gym. Show monthly revenue,
active members, and upcoming classes. Use sample data.

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

Оставьте управление за вашим бэкендом

Ваш бэкенд управляет подключением к модели, API-ключом Lizard и связью между пользователями и проектами.

User prompt
    |
Your backend: sign-in, project access, model calls
    |
Lizard SDK
    |
Sandbox: source files, dependencies, build, preview
    |
Private preview URL returned to the project owner

Храните владельца, ID песочницы, историю переписки и версию сохраненного файла в вашей базе данных. Проверяйте права доступа перед каждой операцией, включая чтение логов и открытие превью.

Храните учетные данные платформы на бэкенде. Сгенерированному коду не нужны ваш API-ключ Lizard или ключ провайдера модели.

Для первой версии попросите модель возвращать структурированный вывод с appTsx и appCss. Валидируйте обе строки и установите лимит на размер ответа. Ваш бэкенд записывает их по фиксированным путям, src/App.tsx и src/App.css. Он контролирует файлы пакетов, lock-файл и скрипты сборки.

Сообщите модели, какие импорты поддерживает стартовый шаблон. Если сборка падает, верните соответствующий вывод ошибки и разрешите не более двух попыток исправления. Затем покажите ошибку пользователю.

Создание песочницы и открытие превью

Установите протестированную версию SDK в вашем Node.js бэкенде:

npm install @lizard-build/sdk@0.1.69

Создайте ключ, ограниченный проектом Lizard, который использует ваш билдер:

lizard keys create lovable-builder --project YOUR_PROJECT_ID --json

Задайте LIZARD_API_KEY и LIZARD_PROJECT_ID в окружении бэкенда. SDK не читает ваш логин Lizard CLI и не загружает файл .env самостоятельно.

Подготовьте проверенный стартовый шаблон React и Vite с lock-файлом и рабочим скриптом npm run build. В нашем тесте использовались React 19.2.0, Vite 7.1.12, TypeScript 5.9.3 и Python 3.11.16. Поддерживайте актуальность зависимостей в вашем шаблоне и проводите повторное тестирование при их обновлении.

Приведенная ниже функция принимает этот шаблон в виде карты относительных путей к содержимому файлов. Загружайте его из файлов, которые вы контролируете. Не принимайте starterFiles от модели или из неаутентифицированного запроса.

Шаг настройки ориентирован на песочницу Linux x64, использованную в этом тесте. Он скачивает Node.js 22.23.3 с nodejs.org и проверяет архив по контрольной сумме релиза. Выполните настройку перед передачей рабочего пространства сгенерированному коду.

import { Lizard } from '@lizard-build/sdk'
import { setTimeout as delay } from 'node:timers/promises'

const project = process.env.LIZARD_PROJECT_ID
if (!project) throw new Error('LIZARD_PROJECT_ID is required')

const lizard = new Lizard({ project })

export async function createPreview(
  starterFiles: Record<string, string>,
  appTsx: string,
  appCss: string,
) {
  const sandbox = await lizard.create('interpreter', {
    size: 'small',
    timeoutMs: 10 * 60 * 1000,
    metadata: { purpose: 'lovable-article-smoke-20261015' },
  })

  try {
    const info = await sandbox.getInfo()
    if (info.runtime !== 'firecracker') {
      throw new Error('This workflow requires Firecracker')
    }

    const setup = await sandbox.process.exec(['/bin/bash', '-lc', `
set -euo pipefail
version=v22.23.3
archive=node-$version-linux-x64.tar.xz
if [ "$(node --version 2>/dev/null || true)" != "$version" ] || ! command -v npm >/dev/null; then
  cd /tmp
  curl -fsSLO "https://nodejs.org/dist/$version/$archive"
  curl -fsSL "https://nodejs.org/dist/$version/SHASUMS256.txt" | grep "  $archive$" | sha256sum -c -
  tar -xJf "$archive" -C /usr/local --strip-components=1
fi
node --version
npm --version
python --version
`], { timeoutMs: 120_000 })
    if (setup.exitCode !== 0) throw new Error(setup.stderr || setup.stdout)

    for (const [path, content] of Object.entries(starterFiles)) {
      await sandbox.fs.write(`/workspace/app/${path}`, content)
    }
    await sandbox.fs.write('/workspace/app/src/App.tsx', appTsx)
    await sandbox.fs.write('/workspace/app/src/App.css', appCss)

    for (const command of [['npm', 'ci'], ['npm', 'run', 'build']]) {
      const result = await sandbox.process.exec(command, {
        workdir: '/workspace/app',
        timeoutMs: 120_000,
      })
      if (result.exitCode !== 0) {
        throw new Error(result.stderr || result.stdout)
      }
    }

    const server = await sandbox.process.exec(
      ['/bin/bash', '-lc', 'nohup python -m http.server 3000 --bind 0.0.0.0 ' +
      '--directory dist > /tmp/preview.log 2>&1 < /dev/null &'],
      { workdir: '/workspace/app' },
    )
    if (server.exitCode !== 0) throw new Error(server.stderr)

    const route = await sandbox.exposePort(3000)
    for (let attempt = 0; attempt < 15; attempt++) {
      const response = await fetch(`https://${route.hostname}`, {
        headers: { 'X-Lizard-Access-Token': route.accessToken },
        signal: AbortSignal.timeout(3_000),
      }).catch(() => null)

      const ready = response?.ok
      await response?.body?.cancel()
      if (ready) {
        return { sandboxId: sandbox.sandboxId, previewUrl: route.url }
      }
      await delay(500)
    }
    throw new Error('Preview did not become ready')
  } catch (error) {
    await sandbox.kill()
    throw error
  }
}

Вызовите createPreview(starterFiles, result.appTsx, result.appCss) после валидации ответа модели. Сохраните полученный sandboxId в привязке к проекту пользователя и возвращайте previewUrl только после проверки доступа.

URL включает токен доступа. Не допускайте его попадания в публичные логи и аналитику. Он дает доступ к открытым портам песочницы, поэтому относитесь к нему как к учетным данным.

В этом примере собранный фронтенд раздается с помощью HTTP-сервера Python. Используйте его для приватного превью при разработке. Держите начальное приложение на одном маршруте или используйте hash-маршрутизацию. Продакшен-хостинг должен быть отдельным деплоем.

Справочник по Lizard SDK описывает команды, файлы, приватные порты и операции жизненного цикла песочницы.

Обработка последующих изменений и сохраненных проектов

Переподключитесь к песочнице проекта через lizard.connect(sandboxId). Прочитайте утвержденные исходные файлы, отправьте их вместе со следующим запросом пользователя к модели, провалидируйте ответ, запишите изменения и снова запустите сборку.

В нашем тесте мы изменили заголовок и добавили тестового участника. После пересборки и перезагрузки того же URL превью браузер показал новую версию, и ее фильтр работал.

Сохраняйте исходные файлы после каждой успешной сборки. Используйте приватный бакет для хранения архивов с исходным кодом в Managed Object Storage и храните записи о проектах в Managed Postgres. Эти бэкенд-сервисы работают отдельно от рабочего пространства превью.

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

Persistent Volumes — еще один вариант сохранения файлов рабочего пространства. Каждый том подключается только к одной песочнице одновременно. Храните внешнюю копию ценных файлов, так как хранилище находится на одном узле. Подробности о хранилище песочниц

Изоляция сгенерированного кода с помощью Firecracker

Lizard Sandboxes поддерживают микровиртуальные машины Firecracker с собственным ядром. Пример проверяет среду выполнения перед установкой зависимостей или запуском приложения.

Старые тома или снапшоты могут использовать контейнерную среду выполнения. Если вашему продукту требуется Firecracker, сохраните проверку среды выполнения при добавлении поддержки восстановления или томов. Подробности о среде выполнения

Создавайте отдельную песочницу для каждого активного проекта клиента. Храните учетные данные продакшен-базы и ключи платформы за пределами этого рабочего пространства. Песочница может выполнять сетевые запросы, поэтому сгенерированный код способен отправить наружу любой секрет, который вы в нее поместите.

Раздавайте превью на отдельном origin в браузере, отличном от вашего основного приложения. Для MVP открытие приватного превью в новой вкладке упрощает интеграцию. Проверьте разрешения iframe и валидируйте сообщения, если позже будете встраивать превью.

Перед приглашением пользователей проведите тестирование с двумя аккаунтами. Изменение ID проекта не должно позволять одному аккаунту читать файлы, логи или URL превью другого. Firecracker управляет границей выполнения; ваше приложение управляет доступом пользователей.

Во сколько обходится запуск клона Lovable?

Тариф Small стоит $0.0162 в час за 2 vCPU, 4 ГБ RAM и 5 ГБ локального диска. Lizard тарифицирует время работы посекундно.

При десяти минутах на сессию:

Это оценки стоимости вычислений. Подписка Lizard Pro стоит $19 в месяц и включает использование на сумму $19; использование сверх этого объема оплачивается по модели pay as you go. Семидневный пробный период включает использование на $5 и требует привязки карты. Цены проверены 15 октября 2026 года. Текущие цены

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

Вы избегаете покупки серверов или резервирования мощностей до того, как найдете пользователей. Работа в режиме простоя все равно стоит денег. Приостанавливайте или завершайте неиспользуемые сессии; за сохраненное хранилище также может взиматься плата.

В примере установлено время жизни в десять минут. Команды не продлевают этот срок. Добавьте остановку простаивающих сессий и обработчик кнопки «Стоп» на бэкенде, а также вызывайте sandbox.kill() при завершении сессии после сохранения ее исходного кода. Справочник по жизненному циклу

План создания MVP за один день

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

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

Начните с одного шаблона и рабочего превью. Lizard Sandboxes и Lizard SDK обеспечивают выполнение, работу с файлами и управление жизненным циклом для этого первого релиза.