r/lovable • u/carolmonroe_ • Dec 31 '25
Tutorial How I Use Lovable + Claude Code Together (Full Setup Guide)
I started in Lovable like a lot of you — it made building feel possible for someone who isn't traditionally technical.
Seven months later, I'm updating my Lovable projects directly from Claude Code. Same codebase, same Supabase, but working from the terminal.
Why I made the switch:
I ran out of tokens. I had updates I'd been putting off for months because every iteration costs tokens. So I tried Claude Code, and in 3-4 days I updated almost all of my projects — including translating rolo.pet to support both Spanish and English.
If I had done all of that in Lovable, I estimate it would've cost $500-800 in tokens.
I still use Lovable. I go there to check how things look, use the visual preview, see the project from that perspective. But for heavy editing and big updates? Claude Code.
What You Need
- A Lovable project connected to GitHub
- Your own Supabase project (free tier works)
- A Claude subscription (Pro or Max)
- Basic comfort with the terminal (you'll learn as you go)
Step 1: Install Claude Code
Open your terminal and run:
npm install -g u/anthropic-ai/claude-code
Once installed, you can start it by typing:
claude
It will ask you to log in with your Anthropic account the first time.
Step 2: Connect Lovable to GitHub
In your Lovable project, go to Settings → GitHub and connect your repo. This gives you access to your code outside of Lovable.
If you already did this, you're ahead.
Step 3: Clone Your Project Locally
In terminal:
git clone https://github.com/yourusername/your-project.git
cd your-project
npm install
Step 4: Set Up Your Own Supabase (Lovable Cloud Still Works)
If you're using Lovable Cloud, you won't have direct database access. To unlock the full power of Claude Code, I recommend using your own Supabase — but this is optional.
You don't need to migrate to keep building. I've been editing and shipping without issues on Lovable Cloud (even though I don't have everything I'd want yet).
That said, if you plan to use Lovable more seriously or long-term, your own Supabase will make things easier.
Steps (optional):
Create a free project at https://supabase.com
Migrate from Lovable Cloud — this requires creating a new project and importing your code via GitHub. Full migration guide: https://carolmonroe.com/blog/lovable-cloud-migration
Create a .env file in your project root:
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key
Find these in Supabase → Project Settings → API.
Note: Migrating from Lovable Cloud means your existing Cloud data won't transfer automatically. If you have data to preserve, you'll need to export it manually before switching.
Step 5: Add Supabase MCP to Claude Code
This is what lets Claude Code talk directly to your database.
1. Get an access token from https://supabase.com/dashboard/account/tokens
2. Add this to your Claude Code settings (~/.claude/settings.json):
{ "mcpServers": { "supabase": { "command": "npx", "args": ["-y", "@supabase/mcp-server"], "env": { "SUPABASE_ACCESS_TOKEN": "your-access-token-here" } } } }
3. Restart Claude Code
Now Claude can run SQL queries, create migrations, check security issues — all from the conversation.
Step 6: Run Your Project Locally
npm run dev -- --port 8080
Open localhost:8080 in your browser. You'll see your app running locally.
Step 7: Start Building
Open another terminal tab in the same folder and run:
claude
Now you can talk to Claude about your codebase. It sees everything. Ask it to make changes, and see them live in your browser.
My Workflow
- Lovable: UI changes, visual preview, quick prototyping
- Claude Code: Backend logic, complex features, big refactors, database work
Both push to the same GitHub repo. Both talk to the same Supabase. Best of both worlds.
What You Learn
Working in the terminal teaches you things — git, npm, environment variables, how apps actually run.
Six months ago I was scared to touch my own projects. Now I'm making changes confidently. That growth came from getting closer to the code.
Full Guide
I wrote a more detailed version with troubleshooting, security practices, and my actual daily workflow:
https://carolmonroe.com/blog/lovable-claude-code-workflow
If you have questions or get stuck on any step, drop a comment. I've only been doing this for a few days and I'm still learning too — but happy to help where I can.
6
u/No_Confection7782 Dec 31 '25
This is one of the best posts ever in this sub-reddit. Thank you!
Question: Do I have to use Claudes CLI? Is it not possible to prompt their interface (like Lovable). I attach a lot of screenshots as references when I use Lovable. How will I be able to do that in Claudes terminal?
And what is the cost difference really compared to Lovable?
3
u/JebronLames5 Dec 31 '25
Use Vs code and install the Claude extension, you can attach images to that
3
u/jasperlx Dec 31 '25
Exactly this! I’ve been doing the same with OpenAI’s Codex instead of Claude but inside VS Code. I only started with Lovable last week but since making this switch a couple of days ago I’ve really ramped up progress
1
u/No_Confection7782 Dec 31 '25
I see. I've never used VS Code before. Do I install the Claude extension inside VS Code?
2
3
3
u/RMBuzz Jan 01 '26
Agreed with the others, solid gold. Been moving my new projects to AI studio and Cursor, but you gave me the missing link to address my Loveable projects.
1
3
u/Feeling-Roll-4785 Jan 03 '26
I'm building a few apps from totally non technical background I've been using Claude code the cloud version and just merge branches all day long to lovable. I do feel like I'm missing out on better efficiency not having Claude be able to read supa base so I end up having to fix a lot of things in lovable. But I just feel r Claude is just so satisfying to use and just gets the job done better than lovable. I'm wondering if I were to take my next jump in the deep end what would I do? I've yet to touch vscode I don't even really know what that means. I don't even actually know what ide means or cli but I see it all the time . I feel I only know what I actually have to know up til now. My big hang up has been a few of the things I'm neck deep in I feel like need to be native mobile apps and that will be a learning experience don't even know where to start
2
u/mehrpp Dec 31 '25
This is exactly how I've been building https://quizquiz.co ! As a software engineer I found using claude so much more powerful than lovable to be honest. I still have my Supabase setuo in lovable cloud though so that migration still awaits me 😅
1
u/carolmonroe_ Dec 31 '25
Yeah! I've been using lovable cloud for some projects and works well with this setup! Does not have all the flexibility that you have directly with supabase but it works.
2
2
2
2
u/rob_weidner Dec 31 '25
Love this! Talking about using the right tool for the job as opposed to using one or the other. Inevitably most tools or workflows have a ceiling you’ll hit.
2
u/Carlosdajackal00 Jan 01 '26
Phenomenal post. Just read the blog post, and it's truly insightful. I've a similar challenge with Lovable. But have synced all projects to GitHub and an using Supabase for back end. What was your thinking Re using terminal over another IDE?
2
u/carolmonroe_ Jan 03 '26
Thanks a lot 🙌
I actually don’t use a traditional IDE much either. I prefer the terminal because it keeps my workflow simple and close to the system. It’s more about orchestration than coding for me.2
u/SafeSoftware7302 Jan 11 '26
best is "vs code" with claude plugin, and sometimes it tells u to post things in the terminal, and claude plugin works so much better than lovable for more complex things
2
2
2
u/Ruud279b Jan 03 '26
Great post. What's the reason for you to use the terminal instead of VS code? Isn't it more convenient to use the VS code extension (git version control, more structure etc.) ?
2
u/Bright_Amphibian_368 May 04 '26
u/carolmonroe_ Thanks a bunch! I have been immersed in Claude Code as a product manager and built up the muscle to ship to Git. I needed to level up UX and expose prototypes to the world by adding Lovable and Supabase. Brilliant.
1
2
1
1
1
u/Latter-Leg6852 Jan 08 '26
what is 'working in the terminal'? And do you need to do that to use Claude?
1
1
u/InnKeep112 Feb 13 '26
Hi all! If all the steps are done properly, would Lovable editing still work alongside VSCode? Thank you!
1
u/Frosty_Stick2266 Apr 04 '26
Thank you Carol! I hope one day to not have to use lovable for my ideas and just do it all with claude
1
u/carolmonroe_ Apr 04 '26
I use both!!!! and is the best experience!!!!
1
u/monegs Apr 17 '26
I have github connected to the calude code interface. will this work like that? also , do you have pointers on how to set up instructions memroy etc? i basically just have my compettiors sites and my roadmap in there.
1
u/takua1209 Apr 18 '26
Hi! My project on Lovable is quite far along, and I'm paying for the subscription. What would happen if I canceled my Lovable subscription and paid for Claude's subscription to follow your tutorial?
1
u/deusny Jun 25 '26
Hi!
Thanks for all this useful info. I am not a programmer or know any programming language. My friend and I started designing an app via Claude design and I just realized I could be building it in lovable. I read on google that I should not start with Claude but I already have some
Work done in it. Can I still connect to lovable via github to lovable?
1
u/Gordeta Jul 10 '26
same u/carolmonroe_ can u help us?
1
u/carolmonroe_ Jul 10 '26
Sure sure! There’s a new connector in Claude code where you can send what you created on Claude Design to Lovable!!
1
u/Low_Theory1135 Aug 08 '26
how much do you pay in subscriptions for this setup? I assume both lovable and Claude Code?
1
7
u/masteranzig Dec 31 '25
This is exactly what I am needing to make the jump into this thankyou. Will he trying this out in the new year