lovable

🚀 Lovable + Claude Code = Superpowers

Edit Lovable Projects 10x Faster—Without Leaving Your IDE

Stop copy-pasting between Lovable and Claude. Stop wrestling with two-way sync. Stop burning through API credits for simple changes.

The Lovable Claude Code plugin brings the power of your IDE directly to your Lovable projects. Edit code with AI assistance, deploy automatically, and let Claude Code handle all the complexity of syncing with Lovable Cloud.

What You Get:

✨ Edit Lovable projects right in your IDE with all of Claude Code's power 🧪 Preview Testing - automated test plans run against your live Preview app (NEW in v1.9.0!) 🏗️ Dual-architecture support - works with both Vite SPA and TanStack Start (SSR) projects (v1.8.1) 🔌 Lovable MCP integration - deploy via API instead of browser (NEW in v1.8.0!) 🗺️ Project Structure Map - Claude navigates your codebase faster (NEW in v1.7.0!) ⚡ Auto-push to GitHub - automatic commit and push after every task 🚀 Auto-deploy to Lovable - no manual commands needed 🤖 Complete workflow automation - from code changes to production 💰 Save credits by using your Claude subscription for heavy lifting 🔄 Zero friction syncing - between your code, GitHub, and Lovable Cloud 🛡️ Automatic secret detection - never forget a required API key ⚡ Instant setup - generates project context automatically ✅ Verification built-in - tests run after every deployment

---

The Problem You're Solving

Working with Lovable is amazing... until it's not:

• 😤 Context switching pain - Lovable UI for backend, IDE for frontend, back and forth endlessly
• 💸 Credit drain - Lovable charges for what Claude Code can do cheaper (via your subscription)
• 🤷 Sync confusion - "What syncs automatically? What needs manual deployment?" Constantly unsure
• ⏱️ Manual workflows - Copy prompt → Paste into Lovable → Wait for response → Repeat
• 🔑 Secret chaos - Tracking which secrets each function needs, which ones you set up, which ones are missing
• 🐛 Deploy blind - No automated tests after deployment. Hope it works!

This plugin eliminates every single one of these friction points.

---

How It Works (In 90 Seconds)

1️⃣ One-Time Setup

/lovable:init

Claude Code scans your project, asks a few questions, and generates CLAUDE.md with all the context it needs.

2️⃣ Make Your Changes

Edit code in your IDE like normal. Claude Code with AI handles the complex stuff.

3️⃣ Automatic Everything

/lovable:deploy-edge    # Deploy to Lovable
/lovable:sync           # Keep secrets/config in sync

That's it. No manual prompts. No context switching. No forgotten steps.

---

Real Workflows

🎯 Manual Mode (Full Control)

You: "Add email notifications to the send-email function"
     ↓
Claude Code: Creates the code
             ↓
Shows you: "Deploy with this prompt: 'Deploy the send-email edge function'"
           Plus: "⚠️ Needs RESEND_API_KEY"
           ↓
You: Copy-paste prompt to Lovable (takes 10 seconds)
Result: ✅ Function deployed, tests pass, you're informed

🚀 Yolo Mode (Full Automation)

You: "Add email notifications"
     ↓
Claude Code: Creates the code, detects needed secrets
        ✅ Automatically commits changes
        ✅ Pushes to GitHub
             ↓
Claude: 🤖 Detects backend changes automatically
        🔌 Submits via Lovable MCP (or browser automation)
        ✅ Confirms deployment
        ✅ Runs verification tests
        ✅ Reports success

Done. Zero manual work. No git commands. No deploy commands!

NEW in v1.8.0: Lovable MCP integration - deploy via API instead of browser (3-5x faster, no Chrome extension)! IMPROVED in v1.5.0: Hook-based auto-push for 100% reliable automatic commits and pushes! NEW in v1.3.0: With auto-deploy enabled, Claude automatically deploys to Lovable after git push!

---

Key Features That Save You Hours

⚡ Auto-Sync & Auto-Push (Hook-Based in v1.5.0!)

Using Claude Code hooks for seamless GitHub integration - always in sync, always up-to-date, 100% reliable!

Auto-Sync (Start Hook):

Claude starts → Hook pulls latest → You work on current code → No conflicts!

Automatically pulls latest changes from GitHub when Claude starts working. Only runs on main branch with no uncommitted changes.

Auto-Push (Stop Hook):

Make changes → Task complete → Hook triggers → Auto-commit → Auto-push → Changes in GitHub!

Automatically commits and pushes when Claude finishes any task. No manual git commands!

Why hooks? Hooks guarantee execution every time, making sync operations more reliable than skill-based approaches. Auto-sync keeps you current, auto-push keeps GitHub current!

🔌 Lovable MCP Integration (NEW in v1.8.0!)

Connect the official Lovable MCP server for API-based deployments - no browser required.