Construye un clon de Lovable en un día con Lizard Sandboxes

Un clon de Lovable necesita un lugar donde ejecutar el código que genera. El modelo escribe archivos, instala dependencias, verifica las compilaciones e inicia un servidor de vista previa. Cada proyecto de cliente necesita su propio espacio de trabajo.

Con Lizard Sandboxes, tu backend crea ese espacio de trabajo a través de Lizard SDK, le envía archivos, ejecuta comandos y devuelve una URL de vista previa privada. Puedes empezar sin comprar servidores ni reservar una flota de máquinas.

Para un desarrollador que conoce React y Node.js y comienza con una plantilla de aplicación, un día es un objetivo razonable para un MVP pequeño: ingresar un prompt, generar una aplicación en React, abrir su vista previa y pedir cambios. Los pagos, el acceso para equipos y un producto de despliegue completo requieren más trabajo.

Qué probamos en Lizard

El 15 de octubre de 2026, ejecutamos el flujo de trabajo en Small Firecracker Sandboxes en us-east-1 usando Lizard SDK 0.1.69.

La primera ejecución exitosa tardó unos 22 segundos desde la creación del sandbox hasta recibir una vista previa funcional. Eso incluyó instalar Node.js y npm, subir la plantilla inicial, instalar dependencias y compilar la aplicación. Esta es una prueba de humo, no un benchmark de inicio.

La prueba también detectó dos errores en el primer borrador. El objeto sandbox expone su ID como sandbox.sandboxId. Y el sandbox interpreter que recibimos no contenía Node.js ni npm. El código a continuación instala una versión fija de Node.js antes de ejecutar la compilación.

Probamos el flujo de ejecución y la vista previa. El cronograma de un día a continuación es un plan de construcción; no medimos el tiempo de creación de un producto SaaS completo ni probamos la calidad de salida de un modelo externo.

Mantén la primera versión pequeña

Empieza con una plantilla de React y Vite. Permite a los usuarios crear paneles de control simples, páginas de destino o herramientas internas con datos de muestra.

La primera versión necesita inicio de sesión, una lista de proyectos, una caja de chat, la salida de la compilación y una vista previa funcional. Guarda los archivos fuente para que los usuarios puedan volver más tarde.

Mantén fija la lista de dependencias. Dale al modelo un conjunto conocido de paquetes y permite que edite unos pocos archivos fuente. Esto facilita la corrección de compilaciones fallidas.

Una primera solicitud útil es:

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

Después de que la vista previa funcione, envía una solicitud de seguimiento para agregar o cambiar un filtro de membresía. Eso te da un camino concreto para probar.

Mantén el control en tu backend

Tu backend controla la conexión con el modelo, la clave de API de Lizard y la relación entre usuarios y proyectos.

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

Almacena el propietario, el ID del sandbox, la conversación y la versión del archivo guardado en tu base de datos. Verifica la propiedad antes de cada operación, incluyendo la lectura de registros y la apertura de una vista previa.

Mantén las credenciales de la plataforma en tu backend. El código generado no necesita tu clave de API de Lizard ni la clave del proveedor del modelo.

Para la primera versión, pide al modelo que devuelva una salida estructurada con appTsx y appCss. Valida ambas cadenas y establece un límite de tamaño para la respuesta. Tu backend las escribe en rutas fijas, src/App.tsx y src/App.css. Este controla los archivos de paquetes, el archivo de bloqueo y los scripts de compilación.

Indícale al modelo qué importaciones soporta la plantilla inicial. Si una compilación falla, devuelve la salida de error relevante y permite como máximo dos intentos de reparación. Luego, muestra el error al usuario.

Crea un sandbox y abre su vista previa

Instala la versión probada del SDK en tu backend de Node.js:

npm install @lizard-build/sdk@0.1.69

Crea una clave limitada al proyecto de Lizard que usa tu constructor:

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

Configura LIZARD_API_KEY y LIZARD_PROJECT_ID en el entorno del backend. El SDK no lee tu inicio de sesión de Lizard CLI ni carga un archivo .env por sí solo.

Prepara una plantilla inicial confiable de React y Vite con un archivo de bloqueo y un script npm run build funcional. Nuestra prueba usó React 19.2.0, Vite 7.1.12, TypeScript 5.9.3 y Python 3.11.16. Mantén las dependencias actualizadas en tu propia plantilla y vuelve a probar cuando las actualices.

La siguiente función acepta esa plantilla inicial como un mapa de rutas de archivo relativas a contenidos de archivo. Cárgala desde archivos que controles. No aceptes starterFiles del modelo ni de una solicitud no autenticada.

El paso de configuración apunta al sandbox Linux x64 usado en esta prueba. Descarga Node.js 22.23.3 desde nodejs.org y verifica el archivo contra el checksum de la versión. Ejecuta la configuración antes de pasar el espacio de trabajo al código generado.

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
  }
}

Llama a createPreview(starterFiles, result.appTsx, result.appCss) después de validar la respuesta del modelo. Guarda el sandboxId devuelto en el proyecto del usuario y devuelve previewUrl solo después de verificar el acceso.

La URL incluye un token de acceso. Mantenlo fuera de los registros públicos y analíticas. Otorga acceso a los puertos expuestos del sandbox, así que trátalo como una credencial.

Este ejemplo sirve el frontend compilado con el servidor HTTP de Python. Úsalo para una vista previa de desarrollo privada. Mantén la aplicación inicial en una sola ruta o usa enrutamiento por hash. El alojamiento en producción debería ser un despliegue separado.

La referencia de Lizard SDK cubre comandos, archivos, puertos privados y operaciones del ciclo de vida del sandbox.

Maneja cambios de seguimiento y proyectos guardados

Vuelve a conectarte al sandbox del proyecto a través de lizard.connect(sandboxId). Lee los archivos fuente aprobados, envíalos con la siguiente solicitud del usuario al modelo, valida la respuesta, escribe los cambios y ejecuta la compilación de nuevo.

Nuestra prueba cambió el encabezado y agregó un miembro de muestra. Después de recompilar y recargar la misma URL de vista previa, el navegador mostró la nueva versión y su filtro funcionó.

Guarda los archivos fuente después de cada compilación exitosa. Usa un bucket privado para almacenar los paquetes de código en Managed Object Storage y mantén los registros del proyecto en Managed Postgres. Esos servicios de backend se ejecutan por separado del espacio de trabajo de vista previa.

Un usuario que regresa después de que el sandbox expira necesita un nuevo sandbox. Restaura el código guardado y la plantilla inicial, luego recompila. Verificamos esto cargando el código editado en un segundo sandbox y abriendo la aplicación resultante en un navegador.

Persistent Volumes son otra opción para retener los archivos del espacio de trabajo. Cada volumen se adjunta a un sandbox a la vez. Mantén una copia externa de los archivos valiosos porque el almacenamiento reside en un solo nodo. Detalles de almacenamiento del sandbox

Aísla el código generado con Firecracker

Lizard Sandboxes soportan microVMs de Firecracker con su propio kernel. El ejemplo verifica el entorno de ejecución antes de instalar dependencias o ejecutar la aplicación.

Los volúmenes o instantáneas más antiguos pueden usar el entorno de ejecución de contenedores. Si tu producto requiere Firecracker, mantén la verificación del entorno de ejecución al agregar soporte para restauración o volúmenes. Detalles del entorno de ejecución

Crea un sandbox separado para cada proyecto de cliente activo. Mantén las credenciales de la base de datos de producción y las claves de la plataforma fuera de ese espacio de trabajo. Un sandbox puede hacer solicitudes de red, por lo que el código generado podría enviar cualquier secreto que pongas dentro.

Sirve las vistas previas en un origen de navegador separado de tu aplicación principal. Para un MVP, abrir la vista previa privada en una nueva pestaña mantiene la integración simple. Revisa los permisos de los iframes y valida los mensajes si incrustas las vistas previas más adelante.

Antes de invitar a los usuarios, prueba con dos cuentas. Cambiar un ID de proyecto no debe permitir que una cuenta lea los archivos, registros o la URL de vista previa de la otra. Firecracker maneja el límite de ejecución; tu aplicación maneja el acceso de los usuarios.

¿Cuánto cuesta ejecutar un clon de Lovable?

Small cuesta $0.0162 por hora por 2 vCPU, 4 GB de RAM y 5 GB de disco local. Lizard factura el tiempo de ejecución por segundo.

A diez minutos por sesión:

Estas son estimaciones de cómputo. Lizard Pro cuesta $19 al mes con $19 de uso incluido; el uso por encima de eso es pay as you go. La prueba de siete días incluye $5 de uso y requiere una tarjeta. Precios verificados el 15 de octubre de 2026. Precios actuales

Los tokens del modelo, el alojamiento del backend, las bases de datos y el almacenamiento persistente también afectan tu total. Rastrea el uso del modelo y el tiempo del sandbox por proyecto antes de establecer tus propios precios.

Evitas comprar servidores o reservar capacidad antes de encontrar usuarios. El tiempo de inactividad en ejecución sigue costando dinero. Pausa o finaliza las sesiones no utilizadas; el almacenamiento retenido aún puede generar cargos.

El ejemplo establece un tiempo de vida de diez minutos. Los comandos no extienden ese límite. Agrega una política de sesiones inactivas y un botón de detener a tu backend, y llama a sandbox.kill() cuando una sesión termine después de guardar su código. Referencia del ciclo de vida

Un plan de MVP de un día

Este cronograma asume que ya tienes una plantilla de aplicación web con autenticación.

Verifica el recorrido completo del usuario antes de invitar a los probadores: crea una aplicación, solicita un cambio, cierra la sesión y vuelve a abrir el proyecto guardado. Una compilación fallida debería producir un error útil y liberar su sandbox.

Empieza con una plantilla y una vista previa funcional. Lizard Sandboxes y Lizard SDK proporcionan los controles de ejecución, archivos y ciclo de vida para esa primera versión.