04ideaSep 2026

Website in, React app out

Standing up the open-source site-to-React builder, and the five things it does not ship with

Point it at a URL, get a modern React app you can then edit by chatting at it. MIT licensed, roughly fifteen minutes to run locally, and the setup below is taken from the project’s own README rather than second-hand. Worth being clear-eyed about two things: upstream calls it an example app, not a product, and what it hands you is a builder with no login, no billing and no usage cap — which is the difference between a demo and something you can charge for.

ReactMITSelf-hostedScrapingNext.jsSandboxesThe repo ↗Firecrawl ↗Vercel AI Gateway ↗E2B ↗Morph ↗Google AI Studio ↗

What it is

An open-source builder that scrapes a website and rebuilds it as a modern React app, which you then refine by chatting with it. It is MIT licensed, so you can run it, modify it, host it and charge for it. One thing worth knowing up front, because it changes your expectations: the project describes itself as an example app built by the team behind the scraping API it uses, and points at the commercial product for a full cloud solution. It is a working demonstration, not a finished SaaS.

The loop

Four steps, then you are editing

1

Scrape — read the source site

The scraping API pulls the page content and structure into something a model can work from.

2

Convert — rebuild it as React

An AI model of your choosing turns that layout into React components.

3

Preview — run it in a sandbox

The result boots in a hosted sandbox so you see the live app rather than a code dump.

4

Edit — change it by asking

From there it is conversational: describe the change and it rewrites the components.

Step 1

Clone and install

pnpm is what the project uses; npm and yarn work equally well.

terminal3 lines

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

Step 2

Create .env.local in the project root

You need the scraper key, exactly one AI provider, and one sandbox provider. Everything else is optional.

.env.local26 lines

# ---- Required ----
FIRECRAWL_API_KEY=your_firecrawl_api_key

# ---- AI provider: pick one ----
GEMINI_API_KEY=your_gemini_api_key
ANTHROPIC_API_KEY=your_anthropic_api_key
OPENAI_API_KEY=your_openai_api_key
GROQ_API_KEY=your_groq_api_key

# ---- Sandbox: vercel (default) or e2b ----
SANDBOX_PROVIDER=vercel

# Vercel, method A — run `vercel link` then `vercel env pull`
VERCEL_OIDC_TOKEN=auto_generated_by_vercel_env_pull

# Vercel, method B — personal access token, for production
# VERCEL_TEAM_ID=team_xxxxxxxxx
# VERCEL_PROJECT_ID=prj_xxxxxxxxx
# VERCEL_TOKEN=vercel_xxxxxxxxxxxx

# Or E2B instead
# SANDBOX_PROVIDER=e2b
# E2B_API_KEY=your_e2b_api_key

# ---- Optional: faster edits ----
MORPH_API_KEY=your_morphllm_api_key

The keys, and where each comes from

KeyWhat forNeeded?

FIRECRAWL_API_KEYScraping the source site. This is the one genuinely required key.Yes

GEMINI / ANTHROPIC / OPENAI / GROQThe model that writes the React. You only need one of the four.One of

AI_GATEWAY_API_KEYA gateway key that fronts several models at once. When set, it is used instead of the individual provider keys above.Alternative

SANDBOX_PROVIDEREither the default hosted sandbox or the alternative. Decides which credentials below apply.Yes

VERCEL_OIDC_TOKENGenerated for you by linking the project and pulling its environment — the easy path for local work.One of

VERCEL_TEAM_ID / PROJECT_ID / TOKENThe manual alternative, for production or where the token flow is unavailable.One of

E2B_API_KEYOnly if you switch the sandbox provider to the alternative.If used

MORPH_API_KEYSpeeds up applying edits. Everything works without it.No

Do not copy .env.example verbatim

Two traps in the shipped example file. It contains a stray “=======” line left over from an unresolved merge, which is not a valid entry and will confuse anything that parses it. It also lists a gateway key the README’s own template omits, and that key silently takes precedence over your individual provider keys when present — so if you paste the whole file and wonder why your chosen model is being ignored, that is why. Use the README’s template as the base and add only what you need.

Step 3

Run it

Then open http://localhost:3000.

terminal1 lines

pnpm dev   # or npm run dev / yarn dev

The licence

What MIT actually lets you do

This is the part that makes the whole thing interesting, and it is genuinely permissive — confirmed against the LICENSE file in the repository.

You mayYou must

Copy it, modify it, host it, rename it, and sell access to it.Keep the copyright notice and licence text with the source.

Keep all the revenue. No share, no royalty, no permission needed.That is the entire obligation. There is nothing else.

The gap

What the repository does not give you

None of this is a criticism — it is a demo of a builder, and these are the parts a business needs that a demo has no reason to include.

✗No authentication. Anyone who reaches the URL can use it.✗No user database, so no accounts, no saved projects, no history per person.✗No billing or subscriptions of any kind.✗No persistent deployment of what it generates — the sandbox is ephemeral.✗No usage metering or caps, which is the one that costs you money.

Before anyone pays you

The three additions that turn it into a product

01·LOGIN

Authentication first, always

A hosted auth provider is an afternoon of work and both of the obvious ones have a free tier. This is not the interesting part, but it is the part that has to exist before anything else matters.

02·PAYMENTS

A billing layer

Standard payment processing, wired to whatever plan shape you choose. Nothing exotic is required here.

03·CAPS

Usage limits per account

Every generation calls a model and a scraper on your keys. Without a per-user ceiling, one enthusiastic user — or one bot — drains the account. Cap first, tune later.

Honest assessment

Who this actually suits

WhoWhy it works, or does not

An agency, internallyThe strongest case by far. Run it behind your own login, skip the per-seat fees on the commercial equivalent, and keep client work in-house. None of the missing billing infrastructure matters when there are no external customers.

A niche builderDefensible if you narrow it hard — one industry, one template language, one opinionated output. Competing head-on with the funded original is not the play.

Personal useNothing to think about. Clone it, add your keys, use it. The licence questions and the missing infrastructure are all irrelevant at this scale.

The one mistake that costs real money

Put the login in before it goes on a public URL — not after, not once you have a few users, not next week. An open instance means every generation anyone runs is billed to your provider accounts, and a builder that scrapes and calls models on demand is exactly the sort of endpoint that gets found and abused. This is the single highest-consequence step in the entire setup.

Provenance

The setup steps, environment template and localhost address here come from the project’s own README and example environment file rather than second-hand, and the MIT licence was confirmed against the LICENSE in the repository on 16 September 2026, along with the merge-marker and gateway-key quirks noted above. Figures quoted elsewhere about the commercial product’s valuation and revenue were left out, as they were not independently verifiable.

← previous

A sales agent that stays up

next →

One command, one local agent

← all experiments