← Home

Turning Claude Code into Lovable

I recently listened to Anton Osika on Framgångspodden and it took me back. Some time in 2021 we went for lunch in Stockholm, back when he was CTO at Depict.

Since then he co-founded Lovable, which crossed $100M ARR eight months after launch, allegedly the fastest climb to that number in software history. Whatever you think of vibe coding, Lovable has clearly democratised building web apps, and lots of people love it.

It was more than a year since I first tried Lovable, so I thought I’d give it another go and vibe away. I had a basic app idea: make it easier for students to find scholarships and automatically draft the applications.

This post is about my second experience with Lovable, and the setup I ended up with instead. It keeps the part of Lovable I liked most, iterating from my phone, while reusing my Claude subscription and personal domain, and staying in control of both code and infra. Let’s dive in.

First impressions

I started in chat mode on the free plan and had a long back-and-forth about the idea and how it should work. Then I asked it to build, starting with just a frontend and a small JSON index of a few example scholarships.

The one-shot result was honestly a bit sloppy. The UI mixed Swedish and English, and it didn’t feel like the long planning chat before it had made much difference.

The one-shot app, in Lovable's phone editor

Under the hood, the matching “engine” was a pile of hard-coded if statements and magic numbers, overfitted to KTH:

function isKTH(p: StudentProfile) {
  return /kth|kungl.*tekniska/i.test(p.university);
}

// ...
if (!s.universities.includes("any") && s.universities.includes("KTH") && !isKTH(p))
  return { excluded: "other" };
// ...
let score = 50;
if (isKTH(p) && s.universities.includes("KTH"))
  reasons.push(L("Open to KTH students", "Öppet för KTH-studenter"));
// GPA check
} else if (p.gpa < s.minGpa) {
  score -= 25;
} else {
  const t = Math.min(1, (p.gpa - s.minGpa) / Math.max(0.1, 5 - s.minGpa));
  score += Math.round((s.bonus.gpa ?? 10) * (0.4 + 0.6 * t));
}

That surprised me. The first build is the moment a new user decides whether the product is magic or not. I’d expect Lovable to put its strongest model on it to impress, even on the free tier. Maybe I’m just bad at prompting.

Then half a prompt into my first follow-up, I’d used up all 5 of my free daily credits, and the build “paused”, asking me to pay more.

Lovable's "Upgrade to keep building" pop-up

What I actually wanted

The credits stung, but they made me think about what I was actually paying for. My list was short:

  1. Iterate from my phone. This is what Lovable does really well in its iOS app, and I didn’t want to give it up.
  2. Control of code and infra. Lovable can sync code to GitHub too, but I wanted to choose where the app runs and be free to move it later.
  3. My own domain and private previews. Password-protected preview apps for feature branches.
  4. Cheap. I already pay for a Claude subscription, which includes Claude Code. Paying for a second AI subscription to do the same job felt wrong.

What I looked at first

Claude artifacts were my first stop. They’re great for quick one-off pages, but the code doesn’t sync to GitHub, and that was the one thing I wasn’t willing to give up.

Then I remembered Simon Willison’s Raccoon Heist post. He builds from the Claude iPhone app and previews with GitHub Pages: point Pages at the branch Claude pushes to, and each push is live within about 30 seconds. It’s simple and fast, and great for throwaway projects. But every new branch means going back to Settings, choosing “Deploy from a branch”, picking the branch and hitting Save. It also doesn’t give you password-protected previews, and you still probably want to pay for your own domain. If you already have one, a subdomain does the job.

The setup

I disconnected the app from Lovable and asked Claude Code to help me move it to Cloudflare Workers. Some Cloudflare and GitHub click ops later, I had a loop that looks like this:

  1. I describe a change in the Code tab of the Claude iPhone app.
  2. Claude works in a cloud sandbox and pushes a branch.
  3. Cloudflare builds that branch and its bot comments a preview URL on the pull request.
  4. I open the preview on my phone. It sits behind a Cloudflare login, so only I can see it.
  5. Not right? I prompt again, Claude pushes, a new preview builds.
  6. Happy? I tell Claude to merge, and the prod domain updates.

The Cloudflare Access login in front of a preview

Compared to Simon’s trick, every branch gets its own preview URL automatically, previews are private, and production lives on my own domain. Getting there had a few snags worth knowing about:

Once it worked, I moved this blog onto the same loop with one small pull request, and drafted this post that way.

Limits, costs and drawbacks

An honest comparison per dollar is hard: Lovable sells credits, and Anthropic only gives rough Claude usage limits. Here are the list prices:

LovableMy setup
AIPro: £22/month for 100 credits (pricing)Claude Pro: £18/month, includes Claude Code, limits shared with chat (pricing)
HostingPublishing is in the plan; Cloud usage (database, functions) uses creditsCloudflare free plan: 100,000 requests a day, static files free (limits)
BuildsEvery change uses credits3,000 build minutes a month, one at a time (limits)
Private previewsBuilt into the editorCloudflare Access, free up to 50 users
Custom domainIncluded on ProOne domain you own covers every app as a subdomain, or use a free workers.dev URL

One real number: the Claude Code session that moved my app off Lovable, set up Cloudflare and shipped two pull requests would have cost about £3 at API prices. I already pay for Claude, so it cost me nothing extra. The only thing I’ve paid Cloudflare so far is my domain, about £8 for a year.

The backend is where Lovable earns its money. Lovable Cloud gives every project a managed database, auth, storage and server functions, built on Supabase. It also comes with ready-made integrations, like payments with Stripe and LLM calls through Lovable’s built-in AI gateway. My app doesn’t need a database yet, and I haven’t tested a backend in this loop. Cloudflare has its own database (D1), key-value store (KV) and file storage (R2), all with free tiers. You could also point Claude at Supabase, or at AWS if you want to own your infrastructure. In every case you set it up and manage the secrets yourself, including any Stripe or LLM keys.

Other drawbacks to be honest about:

So, should you leave Lovable?

Not necessarily. If you don’t want to touch GitHub or a Cloudflare dashboard, or manage your own infrastructure, Lovable is still the fastest way from idea to live app, and that’s exactly why so many people love it. The managed backend is a real feature, not a gimmick.

But if you already pay for Claude and want to own your infrastructure, this setup gives you the part of Lovable I cared about most, the phone-only loop, for close to nothing extra.

Cheers, Hannes Kindbom


← Back