Guide

How to Connect the Lovable and Supabase MCPs to Claude

Step-by-step setup for connecting Lovable MCP and Supabase MCP to claude.ai chat and Claude Code CLI.

May 8, 20263 min205 views

If you want to use any of my migration skills, or just want to talk to your Lovable and Supabase projects from Claude, you need to connect the MCPs first.

The setup is different depending on whether you're using **claude.ai chat** (the web app) or Claude Code (the CLI). Here's how to do both.


claude.ai chat (web)

Everything happens in Settings. Here's the full flow.

Step 1: Open Settings

Click your profile icon in the bottom left, then Settings.

Profile menu - click Settings

Step 2: Go to Connectors

In the left sidebar, click Connectors.

Settings sidebar - click Connectors

Supabase

Supabase is already in the connector directory. Find it in the list and click Configure, then follow the authorization flow. Done.

Lovable

Lovable is not in the directory yet, so you add it as a custom connector.

Step 3: Add custom connector

Scroll to the bottom of the Connectors page and click Add custom connector.

Connectors page - Add custom connector button

Step 4: Enter the name

In the dialog, type a name for the connector. I use "Lovable MCP".

Add custom connector dialog - name field

Step 5: Enter the URL

Enter https://mcp.lovable.dev as the Remote MCP server URL and click Add.

Add custom connector dialog - URL field filled

Step 6: Connect

The connector now appears at the bottom of the list. Click Connect to activate it.

Lovable MCP listed with Connect button

Step 7: Grant permission

Lovable will open an authorization page. Click Allow to grant Claude access to your projects.

Lovable permission screen - click Allow

Step 8: Done

Once authorized, the button changes to Configure. Lovable MCP is now connected.

Lovable MCP connected - Configure button

That's it. You can verify by starting a new chat and saying "list my Lovable projects" or "show my Supabase organizations".


Claude Code (CLI)

In the CLI, MCPs are added with the claude mcp add command.

Supabase

Supabase MCP is auto-available as a plugin in Claude Code. You don't need to add it manually - it shows up when you run /mcp or when a skill needs it. If it's not connected, Claude Code will prompt you.

Lovable

Lovable needs to be added manually:

claude mcp add --transport http lovable "https://mcp.lovable.dev"

This adds it to your Claude Code configuration. You'll be prompted to authorize the first time it's used.

You can verify both are connected by running /mcp in Claude Code - it lists all active MCP servers.


Claude Code on the web

If you're using Claude Code on the web at claude.ai/code, the setup is the same as the CLI version. The terminal in the web VM runs the same claude mcp add command.


Which MCPs do you need?

Migrate from Lovable Cloud

Lovable MCP

Yes

Supabase MCP

Yes

Build in Lovable from Claude

Lovable MCP

Yes

Supabase MCP

No

Manage Supabase from Claude

Lovable MCP

No

Supabase MCP

Yes

Use migration skills

Lovable MCP

Yes

Supabase MCP

Yes


Related

Enjoyed this?

Carol Ships: building, shipping, figuring it out.

Have another workaround to share?

Start the thread below!

Comments (2)

LPMay 15, 2026, 5:08 PM

Hi, your guide is quite outdated. 1. connectors no longer has the suggested substrate. 2. claude.ai/code only available on paid plans.

LPMay 15, 2026, 5:09 PM

Supabase*