The Problem
Building a React app from a static website or screenshot normally requires manual extraction of structure, styles, and content, followed by hand-writing components. Teams evaluating AI code generation tools also need a working reference implementation, not just API docs. open-lovable addresses both: it turns a URL into a running React app through an AI-driven pipeline, and it serves as a production-quality example of how to wire Firecrawl's scraping APIs to an LLM and a sandboxed build environment.
What This Does
The repo is a full-stack Next.js application that scrapes a target website, sends the extracted content to an LLM (Gemini, Anthropic, OpenAI, or Groq), and streams generated React code back into a sandboxed environment. The core logic lives in app/api/: scrape-website/route.ts handles ingestion, generate-ai-code-stream/route.ts produces the code, and apply-ai-code-stream/route.ts applies edits. Sandbox management—create, install, run, monitor, kill—is split across create-ai-sandbox-v2/route.ts, install-packages-v2/route.ts, run-command-v2/route.ts, and sandbox-status/route.ts.
The front end is a polished marketing site (components/app/(home)/) plus a builder UI (app/builder/page.tsx) and a generation view (app/generation/page.tsx). The components/shared/ directory contains reusable UI primitives—buttons, icons, flame effects, header navigation—that are largely cosmetic but well organized.
How To Use It
Setup: Clone and install with pnpm install (or npm/yarn). The repo uses bun.lock, so Bun works too.
Configuration: Create .env.local and populate it per the README. Required: FIRECRAWLAPIKEY, one LLM key (GEMINIAPIKEY, ANTHROPICAPIKEY, OPENAIAPIKEY, or GROQAPIKEY), and a sandbox provider. Default is Vercel, which needs either VERCELOIDCTOKEN (auto-generated via vercel env pull) or VERCELTOKEN plus team/project IDs. E2B is the alternative (E2BAPIKEY).
Running it: pnpm dev
Open http://localhost:3000, enter a URL, and the pipeline runs: scrape, generate, sandbox, preview. The app/api/ routes are the integration points if you want to call the pipeline programmatically.
Real-World Use
A product team evaluating AI code generation could deploy this as an internal tool: paste a competitor's landing page URL, get a working React component in minutes, then iterate in the builder. The analyze-edit-intent/route.ts and apply-ai-code/route.ts endpoints support conversational refinement—ask for a darker theme or a new section, and the app applies the change and rebuilds the sandbox. The extract-brand-styles/route.ts endpoint is useful for design-system extraction from an existing site.
Code Health & Issues
High - No tests detected - the entire codebase (132 TSX, 45 TS files) has zero test files. The AI code-generation pipeline is exactly where regressions hurt most. High - No CI/CD pipeline - no .github/ workflows or CI config. Nothing gates builds or runs static analysis. Medium - Heavy API surface without centralized error handling - 25+ API routes, each handling sandbox lifecycle, scraping, and LLM calls independently. Error handling is likely duplicated or inconsistent. Medium - Environment variable sprawl - .env.example lists 10+ keys across providers. Misconfiguration (e.g., missing VERCELTEAM_ID when using a token) will fail at runtime, not startup. Low - .cursor/mcp.json and atoms/sheets.ts - editor-specific config and a single atom file suggest some scaffolding is leftover or experimental. Harmless, but noise.
The Bottom Line
This is a well-structured reference implementation of an AI-powered website-to-React pipeline. It's genuinely useful for teams wanting to understand Firecrawl's API surface or build a similar tool. It is not production-ready as-is—the missing tests and CI are real blockers for any serious deployment—but as a starting point or learning resource, it's solid. Use it to prototype an internal tool or as architecture guidance; don't ship it without adding test coverage and a build pipeline.