# Open Lovable — Clone and Recreate Any Website as a React App

> An open-source tool by Firecrawl that scrapes any website and uses AI to recreate it as a modern React application with Tailwind CSS.

## Install

Save in your project root:

# Open Lovable — Clone and Recreate Any Website as a React App

## Quick Use
```bash
git clone https://github.com/firecrawl/open-lovable.git
cd open-lovable
npm install
npm run dev
# Open http://localhost:3000 and paste any URL
```

## Introduction
Open Lovable is an open-source tool from the Firecrawl team that takes any website URL and recreates it as a clean, modern React application. It combines web scraping with AI code generation to produce deployable React + Tailwind CSS projects in seconds.

## What Open Lovable Does
- Scrapes any website and extracts its visual design and structure
- Uses AI to generate equivalent React component code
- Outputs clean Tailwind CSS styling matching the original design
- Produces a complete, runnable React project ready for deployment
- Supports single pages and multi-page site cloning

## Architecture Overview
The tool uses Firecrawl for web scraping to capture page structure, styles, and assets. The scraped data is fed to an LLM that generates React components with Tailwind CSS classes matching the original visual appearance. The output is a standard Vite + React project with proper component structure, ready to run or deploy.

## Self-Hosting & Configuration
- Clone the repository and install dependencies with npm
- Set your AI provider API key in the environment variables
- Run the dev server and access the web interface locally
- Configure output preferences like TypeScript vs JavaScript
- Optionally deploy the generated projects to Vercel or Netlify

## Key Features
- One-command website-to-React conversion
- Clean Tailwind CSS output matching original designs
- Complete project scaffolding with proper component hierarchy
- Web-based UI for easy URL input and preview
- Open source and self-hostable with no usage limits

## Comparison with Similar Tools
- **Screenshot to Code** — converts screenshots; Open Lovable works from live URLs
- **Firecrawl** — the scraping engine underneath; Open Lovable adds AI code generation
- **Bolt.new** — generates apps from prompts; Open Lovable clones existing sites
- **GPT Engineer** — generates from descriptions; Open Lovable uses real sites as input

## FAQ
**Q: Does it handle dynamic JavaScript-rendered sites?**
A: Yes. Firecrawl uses headless browser rendering to capture the final DOM state.

**Q: What AI provider does it use?**
A: It supports OpenAI and Anthropic APIs. Configure your preferred provider via environment variables.

**Q: Is the output production-ready?**
A: The generated code is a solid starting point. Complex interactions and backend logic may need manual refinement.

**Q: Can I clone sites behind authentication?**
A: Basic auth and cookie-based sessions are supported through Firecrawl configuration.

## Sources
- https://github.com/firecrawl/open-lovable


---
Source: https://tokrepo.com/en/workflows/asset-e5ca7ace
Author: AI Open Source