Vibe Coding from Claude Code (How to Start)

So you want to vibe code with Claude Code. Maybe you're coming from a platform like Lovable, Replit, or Bolt — or maybe you're starting fresh and want to understand what the setup looks like.

Tools like Replit, Lovable, or Bolt give you that all-in-one experience: you code, you deploy, you manage your database, all from one place. With Claude Code, you get more power and control — but you need to connect the pieces yourself. The good news: once you understand how, it's not that hard. And familiarizing yourself with this workflow helps a lot even if you're not ready to fully switch yet.

Platform vs Claude Code

The platform gives you speed. Claude Code gives you depth. Both are valid — it depends on where your project is.

My personal take

If you're just starting to vibe code, or you don't plan to do it regularly — use a platform. Seriously. The setup cost of Claude Code isn't worth it if you're experimenting once a month.

I love using Lovable for internal tools, especially when I have a non-technical team collaborating. They can see changes, give feedback, and I don't need to explain git or terminals to anyone. But I combine it with Claude Code for the heavy lifting — complex database work, migrations, edge functions, anything that needs precision.

The combo is powerful: Lovable for the UI and collaboration, Claude Code for the backend and control.

What you need to connect

When you set up Claude Code for a full vibe coding workflow, here are the pieces:

1. Supabase MCP (Database + Auth + Storage)

This is the first thing to connect. It gives Claude Code direct access to your database — tables, migrations, SQL execution, edge functions, everything.

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": ["-y", "@supabase/mcp-server-supabase@latest", "--project-ref", "your-project-id"]
    }
  }
}

Without this, you're back to copy-pasting SQL between your dashboard and your terminal.

And here's the thing — it doesn't have to be Supabase. Claude Code can connect to any Postgres database via MCP. You can use the generic Postgres MCP, connect to a remote database, or even a local one. The MCP ecosystem is growing fast, so whatever your stack looks like, there's probably a way to connect it.

2. API Keys (OpenAI, Google AI, etc.)

If your app uses AI features, you need those API keys accessible. Add them to your .env or shell config:

export OPENAI_API_KEY="sk-..."
export GOOGLE_AI_API_KEY="..."

Claude Code can then use them in edge functions, scripts, or any code it writes for you.

3. Hosting: Netlify or Vercel (via MCP)

On a platform, deploying is one click. With Claude Code, you can get that same experience by connecting their MCP servers — so your agent can deploy, check logs, and manage your site directly.

Netlify MCP (recommended):

{
  "mcpServers": {
    "netlify": {
      "command": "npx",
      "args": ["-y", "@netlify/mcp"],
      "env": {
        "NETLIFY_PERSONAL_ACCESS_TOKEN": "your-token"
      }
    }
  }
}

With this, Claude Code can create projects, deploy, check build logs, and manage environment variables — all from the same conversation. No switching to a dashboard.

Vercel MCP:

Vercel uses a remote MCP endpoint at https://mcp.vercel.com with OAuth. It's currently read-only (logs, docs, project metadata) but useful for debugging deploys.

Both integrate with GitHub, so once connected, every push deploys automatically. You get preview URLs, custom domains, and environment variables — just like the all-in-one tools.

4. GitHub

Make sure your repo is connected. Claude Code works directly with your local files, so:

git clone your-repo
cd your-repo
claude

That's it. You're vibe coding.

5. Skills (optional but powerful)

Skills are like cheat sheets for your agent. They give Claude Code specialized knowledge without you having to explain everything every time.

Download .skill files and place them in your project or ~/.claude/skills/ directory. They help with specific workflows like migrations, image generation, or database patterns.

When to stay on the platform

Here's the honest take: sometimes the platform is the right choice.

Platforms like Lovable or Replit give you everything bundled:

• Hosting
• Database connection
• Auth setup
• Deployment
• Preview URLs
• AI chat that knows your project

If you're building something simple, or you're not comfortable with terminals, or you just want to ship fast without setup — stay on the platform. Seriously. There's nothing wrong with that.

When Claude Code makes more sense

Claude Code shines when:

• You hit a limitation — Lovable Cloud can't do custom auth providers, direct SQL, or complex RLS
• You need more control — custom domains, staging environments, CI/CD
• You want to combine tools — Supabase MCP + Netlify MCP + your own scripts
• Your project grew — what started as a prototype now needs real infrastructure
• You want to learn — understanding the pieces makes you a stronger builder

The bottom line

On a platform: you describe what you want, and it handles everything behind the scenes.

With Claude Code: you describe what you want, AND you have access to every tool, every config, every decision. More power, more setup.

It's not better or worse — it's a different stage. And honestly, even if you stay on a platform, understanding how these pieces connect will make you better at using it.

What tools do you connect when you vibe code? I'm always looking for new MCPs and workflows to try.

Related skill: Vibe Coding Setup — download this .skill file to give your AI agent the full setup guide for Claude Code + MCPs.