How I Use Lovable + Claude Code Together

Who This Is For

This guide is for people who started building in Lovable and want more control.

Maybe you're running low on tokens. Maybe you want to understand what's actually happening in your code. Maybe you just want to own your workflow.

If that's you, keep reading. You can be up and running in 30 minutes.

A note of honesty: I've been doing this for 3-4 days. This guide might have errors or things that could be improved. I'm sharing it because it might serve as a starting point for you. If you find something that doesn't work or could be better, let me know!

The Discovery

I started vibe-coding back in April. Lovable was my gateway — it made building feel possible for someone like me who isn't traditionally technical.

Six months later, I'm a different person. I understand more. I've learned PostgreSQL. I'm exploring vector databases. I can use tools in ways I couldn't before.

And now? I'm updating my Lovable projects directly from Claude Code.

This post is how I do it.

Why I Made the Switch

Let me be honest: I had 0.03 tokens left in Lovable. That's not enough for anything. (End of the month, no tokens left — you know how it is.)

I'd been wanting to make big updates to my projects — especially rolo.pet — but I kept putting them off because of the token cost. Every iteration, every fix, every "can you also..." eats tokens.

So I tried Claude Code. And in 3-4 days, I've updated almost all of my projects.

The changes I made? Translating rolo.pet to support both Spanish and English. Core functionality updates. Things I'd been avoiding for months.

If I had done all of this in Lovable, I estimate I would have spent $500-800 in tokens. Instead, I paid for a Claude subscription.

I Still Use Lovable

I want to be clear: I'm not leaving Lovable.

I still go there to check how things look, to use the visual preview, to see the project from that perspective. Lovable is great for what it does.

But for heavy editing, iterations, and big updates? Claude Code is my new home.

What I Built With This Workflow

Here are some of the projects I've updated using this setup:

• rolo.pet — Pet care platform, now bilingual (Spanish/English)
• uglysweater.xyz — Holiday sweater generator
• carolmonroe.com — This blog you're reading right now

All updated from the terminal.

What You Need

Before we start, here's what makes this workflow possible:

1. GitHub

Even if you're not technical, learn GitHub. Seriously.

It's where your code lives. It's your backup. It's how you move projects between tools. Every Lovable project should be connected to GitHub — this is non-negotiable if you want flexibility later.

2. Supabase

I need to own my data.

In the past, I used platforms where I wasn't the owner of my data. It lived somewhere else, in someone else's system. I had no real control.

Now? Supabase is my place. It's not just a service I use — it's vital. It's where everything lives: transactions from my platforms, personal projects, automations, everything.

Just like a company has a database (not an Excel spreadsheet), I have mine. And I own it.

3. Claude Code

You can use Claude on the web, and that's fine. But I prefer the terminal.

I use it with a white theme — feels cleaner to me. The key things:

• Install it and keep it updated — it gets better constantly
• You can run multiple sessions — one for each project
• You can switch between projects — no need to close and reopen

It's just more natural. Like having different notebooks open for different things.

4. Supabase CLI + MCP

There are two ways Claude Code connects to Supabase:

Supabase MCP — This is the magic. Claude Code talks directly to your Supabase project. It can run queries, create migrations, check security issues, all from the conversation.

Supabase CLI — The supabase command you install in your terminal. Used for things like supabase db push, local development, generating types.

I use both. MCP for the AI-powered stuff, CLI for direct commands.

My Setup

Here's what my screen looks like when I'm working:

Left side: Terminal (Claude Code) in white theme

Right side: Chrome with localhost preview

That's it. Two windows. I type in the terminal, see changes in the browser. No IDE. No panels. No noise.

Each project gets its own macOS desktop:

• Desktop 1: Day-to-day stuff
• Desktop 2: uglysweater.xyz
• Desktop 3: This blog (carolmonroe.com)
• Desktop 4: rolo.pet

I swipe between desktops instead of hunting through tabs. It feels more natural — like having different physical workspaces.

Setting Up Supabase MCP

This is how Claude Code talks directly to your Supabase project.

Step 1: Get Your Access Token

Go to supabase.com/dashboard/account/tokens and create an access token.

Step 2: Configure Claude Code

Add the Supabase MCP to your Claude Code settings file (~/.claude/settings.json):

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": ["-y", "@supabase/mcp-server"],
      "env": {
        "SUPABASE_ACCESS_TOKEN": "your-access-token-here"
      }
    }
  }
}

Replace your-access-token-here with the token you created.

Step 3: Restart Claude Code

Close and reopen Claude Code. Now it can talk to your Supabase project.

Once connected, Claude can:

• Run SQL queries on your database
• Create and apply migrations
• Check security advisors
• Generate TypeScript types
• View logs

All from the conversation. No dashboard switching.

The CLAUDE.md File

This is a game-changer.

Create a CLAUDE.md file in your project root (or in your home directory for global context). This is where you tell Claude about your project:

• What stack you're using
• Your preferences (coding style, commit messages)
• Important context about the project
• Commands you use frequently
• Things to remember between sessions

Claude reads this file and remembers. It's like giving it a briefing before every conversation.

How to Bring a Lovable Project to Claude Code

Time estimate: 15-30 minutes for first setup

Before You Start: Backup

Step 1: Connect Lovable to GitHub

In your Lovable project settings, connect to GitHub. This creates a repository with all your code.

If you already did this — great, you're ahead.

Step 2: Clone the Repository

Open your terminal and clone the project:

git clone https://github.com/yourusername/your-project.git
cd your-project

Step 3: Install Dependencies

npm install

Step 4: Set Up Environment Variables

Create a .env file with your Supabase credentials:

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

You can find these in your Supabase project settings > API.

Step 5: Run Locally on a Specific Port

npm run dev -- --port 8080

This runs your app on localhost:8080. I like having consistent ports so I know which project is which:

• 8080: Main project
• 8081: Second project
• 8082: This blog

If a port is busy, Vite will automatically try the next one.

Step 6: Start Claude Code

In the same project folder, open a new terminal tab and run:

claude

Now you can talk to Claude about your codebase. It sees everything. It understands the structure. You can ask it to make changes, and see them live in your browser.

Troubleshooting Common Issues

"Port already in use"

Another app is using that port. Either:

• Close the other app
• Use a different port: npm run dev -- --port 8081
• Vite will auto-suggest the next available port

"npm install" fails

Try:

rm -rf node_modules
rm package-lock.json
npm install

If that doesn't work, check your Node version. Lovable projects usually need Node 18+.

"Module not found" errors

You might be missing a dependency. Run:

npm install

Or install the specific package:

npm install package-name

Claude doesn't see my changes

Make sure you saved the file. Claude Code watches for file changes, but only sees saved files.

Environment variables not working

• Make sure your .env file is in the project root
• Variables must start with VITE_ to be accessible in the browser
• Restart the dev server after changing .env

Security Practices

Check Your RLS Policies

Supabase uses Row Level Security (RLS) to protect your data. With the Supabase MCP, you can ask Claude to:

Check security advisors for my project

It will scan your database and flag any issues — missing policies, exposed columns, potential vulnerabilities.

Don't Commit Secrets

Your .env file contains sensitive keys. Make sure it's in your .gitignore so it never gets pushed to GitHub.

Review Before Pushing

Always look at what you're committing:

git diff

Make sure you're not accidentally including sensitive data.

Use Branches for Big Changes

For major updates, create a branch:

git checkout -b feature/new-thing

This way, if something breaks, your main branch is still safe.

The Git Workflow

After making changes in Claude Code, you need to save them to GitHub.

Check What Changed

git status

Stage Your Changes

git add .

Commit with a Message

git commit -m "Add new feature"

Push to GitHub

git push

Or you can ask Claude to do it for you — just say "commit these changes" and it'll handle the git workflow.

Deploying to Production

Once your changes are on GitHub, you have options:

Option 1: Lovable Pulls from GitHub

If your Lovable project is connected to GitHub, it can pull the latest changes. Your updates go live on your Lovable URL.

Option 2: Deploy Elsewhere

You can also deploy to:

• Vercel — connect your GitHub repo, auto-deploys on push
• Netlify — same idea, great for static sites
• Your own server — if you want full control

I'm starting to move some projects to Vercel for more control over the deployment process.

Why This Workflow?

Own Your Data

This is the big one for me.

When you build on platforms where you don't control the database, you're renting. Your data lives in their system.

With Supabase + GitHub, you own everything:

• Your code is in your GitHub
• Your data is in your Supabase
• You can move, backup, or switch tools anytime

That ownership matters.

Save Money

In the last few months, I was spending a lot on Lovable tokens. It adds up fast when you're iterating.

With Claude Code, I pay a flat subscription. I can work on multiple projects, make unlimited changes, and not worry about running out of tokens mid-feature.

Learn More

Working in the terminal teaches you things. You start understanding git, npm, environment variables, how apps actually run.

Six months ago, I was scared to touch rolo.pet — I built it when I was still learning, and I didn't want to break it.

Now I'm in there making changes confidently. That growth came from getting closer to the code.

A Personal Note

I'm writing this while recovering from knee surgery.

I've had more time at home, and honestly, I wasn't sure what I'd do with it. But I found something important: updating all the projects I'd been putting off.

In 3-4 days, I've done more than I did in months of sporadic Lovable sessions. It's been genuinely fun.

A Note on the Future of Tokens

I don't think the current token model will last.

$25 for a limited number of tokens? As AI becomes more central to how we work, that math doesn't work. People need more capacity, more flexibility.

I think subscriptions with generous limits (like Claude Code) are the future. Pay once, work freely.

Resources

• Claude Code Documentation
• Supabase Documentation
• Supabase MCP Setup
• Lovable Self-Hosting Guide

The Point

You don't have to choose between Lovable and "real" development.

Start in Lovable. Learn. Build things. Then, when you're ready, bring those projects to Claude Code. Keep building. Keep learning.

The terminal isn't scary. It's just a notebook that responds.

If you have questions, feedback, or something I should add to this guide — I'd love to hear it. Drop a comment below.

*This guide was written from Claude Code, while updating this very blog.*

Related skill: Vibe Coding Setup — full MCP setup guide for combining Lovable with Claude Code.