Lovable
Lovable builds the app from a chat message. The Vibe Coding Plan MCP server gives that chat a task list, an estimate, and a stack before the first screen is generated.
Why connect it inside Lovable
Lovable is fast when the request is one screen. It gets vague when the request is a whole product: auth, billing, an admin view, email, and the empty states between them. The model then invents a sequence while it writes files. You review a large diff and only later notice a missing step.
The MCP server is a planning tool the Lovable chat can call. You describe the product once. Lovable asks the server for a stack and a task breakdown, then you tell Lovable to build one task at a time. The project is also saved on your Vibe Coding Plan account, so the same list is there when you leave Lovable.
Lovable treats a custom MCP server as a chat connector. It is available in the project chat and in Chats. It is personal to your Lovable user. It is not bundled into the site you publish, and other people in the workspace do not inherit your token. If a workspace admin has turned off custom MCP servers, the MCP server choice stays disabled until they allow it. Custom MCP servers are available on all Lovable plans.
Keep the connection on Direct. The server is public. Lovable static IPs are an Enterprise firewall option and are not required here.
Server URL and token
App builders such as Lovable talk to a public HTTPS address. They cannot launch the local npx vibe-coding-plan-mcp process used by Claude Desktop and Cursor. Point them at the hosted server and send the personal token from your account.
Server URL · streamable HTTP · not SSE
https://vibecoderplanner.com/mcp
Create the token at API Tokens after you sign in. Copy it once. The dashboard will not show the secret again.
The token lasts 30 days. When calls start returning unauthorized, create a new token and paste it into the connector again. Revoke the old one.
Do not choose OAuth, MCP OAuth, or "Add & authorize" for this server. That sign-in path is set up for ChatGPT. These builders need the API token.
Paste the token alone when the field is labeled bearer token or API key. If the form asks for a header, set the name to Authorization and the value to Bearer plus the token, with one space between them.
The connection lets the builder chat read and create your projects. It does not put the token into the app you publish. If the shipped app must call Vibe Coding Plan, that is a separate server-side integration, and the token stays in an environment variable.
What the server can do from chat
These are the tools on the hosted server at https://vibecoderplanner.com/mcp. The builder calls them when your message needs a plan, an estimate, a stack, or a saved project. You do not run them by hand.
plan_coding_project
Breaks a named idea into tasks. Each task comes back with a title, a description, estimated hours, and the titles of tasks that should happen first. The reply also includes total hours. A free account receives a short demo plan and is_demo is true. A paid account receives a generated breakdown of the description you sent.
estimate_project
Same planning pass, summarized as total hours, a complexity label (Low, Medium, High, or Very High), and the task titles as phases. Use this when you want a size check before you ask the builder to start coding.
suggest_tech_stack
Returns one recommendation each for frontend, backend, database, and hosting, plus a short reason. It uses your description and any preferences you pass, such as "Laravel" or "mobile".
list_projects
Lists up to 20 projects on the signed-in account: id, name, description, and task count. Pass query when you want a name filter.
get_project_tasks
Loads one project you own. You pass project_id from list_projects. The reply includes each task id, title, description, status, and estimated hours.
create_project
Creates a project on your account. name is required. description is optional. Set generate_plan to true to save a task list on that project in the same call. Saved tasks store the title, description, hours, and dependencies. The long coding prompt for a task is filled when you generate the plan in the Vibe Coding Plan app.
Connect it in Lovable
Open Connectors
In Lovable, open Connectors. Choose Add custom, then MCP server. If MCP server is grayed out, a workspace admin has disabled custom MCP servers under Connectors, Admin settings, Chat connectors.
Name it
Server name: Vibe Coding Plan. This is the name you will use in prompts, so keep it exact.
Leave the route on Direct
If you see a Connection dropdown, keep Direct connection. Do not pick Lovable static IPs.
Paste the server URL
Use the HTTPS URL from the box above. There is no local command and no npx config for Lovable.
Use a bearer token, not OAuth
OAuth is the default and it will not complete for this server. Switch authentication to Bearer token or API key and paste the token from API Tokens. Do not add the word Bearer unless the field says it is a raw header value.
Save, then test in chat
Click Add server. In a project chat, send: Using the Vibe Coding Plan connector, list my projects. An empty account returns an empty list. That still means the token worked.
A full build, one clinic booking app
Say you are making a small clinic site: patients pick a doctor, see open slots, and book a visit. Staff need a day view. Do not open with "build the whole app". Send three messages and wait for each tool result.
1. Stack. "Using Vibe Coding Plan, suggest a tech stack for a clinic booking site. Preferences: React, a relational database, and simple hosting. Explain the four recommendations, then stop." Lovable should call suggest_tech_stack. Read the four rows. If you wanted Supabase and it picked something else, say so in the next message. The advisor follows words you put in preferences.
2. Plan. "Using Vibe Coding Plan, plan a project named Clinic Bookings. Description: patients browse doctors, see open slots, and book a visit. Staff see today's bookings and can cancel. Features: email confirmation, no payments yet. Then create that project and generate the plan." A paid account gets a task list sized to that description. A free account gets the demo plan, with is_demo: true. Do not treat the demo titles as the clinic's real scope.
3. Build the first task only. "Read the Clinic Bookings tasks with Vibe Coding Plan. Implement only the first task that has no dependencies. Do not start the next task." When that preview looks right, name the next task title from the list. This is the whole point of the connector: Lovable still writes the code, and the task list stops it from inventing the second feature in the same turn.
After the session, open the project in Vibe Coding Plan. The tasks saved by create_project are the titles, descriptions, hours, and dependencies. Generate the plan in the app when you want the long coding prompt stored on each card.
Limits that matter in Lovable
The published clinic site cannot call this MCP server. Booking data, email, and auth in the live app are normal Lovable integrations. The connector is only for you, while you chat.
Name the connector in the prompt. Lovable can see every connected tool, and a vague "plan my app" may skip the server. "Using the Vibe Coding Plan connector" is enough.
A 401 means the token is missing, expired, or still on the OAuth option. Create a token, edit the connector, and choose bearer token or API key again.
Teammates connect the same URL with their own token. Your connector does not show up as a shared catalog entry in their admin table.
Questions
Can Lovable use the npx config from the Claude page? No. Lovable only reaches a remote HTTPS MCP URL.
Will the clinic app include my API token? No. Chat connectors stay in the Lovable chat. Do not paste the token into a Lovable prompt or into client code.
Why is the plan generic? Free accounts get the demo task list. Upgrade, then run plan or create_project with generate_plan again.
Where are the connectors documented? Lovable's own steps are in their custom MCP guide. The URL, token, and tools on this page are the Vibe Coding Plan side of that form.
Turn any idea into a fully planned, code-ready project in minutes. Vibe Planner uses AI to break your concept into tasks, generate developer prompts, and execute them automatically.
Start Building FreeNo credit card required
Describe your idea and get a structured plan with tasks, milestones, and technical decisions in seconds.
Each task comes with optimized prompts for Cursor, Copilot, or any AI coding tool you use.
AI agents write code, create branches, and open Pull Requests on your GitHub repo — hands-free.
Track progress with a visual board. Drag tasks between columns, edit details, and stay organized.
React, Next.js, Laravel, Django, Flutter, and more. AI plans are tailored to your stack.
Turn any idea into a fully planned, code-ready project in minutes. Vibe Planner uses AI to break your concept into tasks, generate developer prompts, and execute them automatically.
Start Building FreeNo credit card required
Describe your idea and get a structured plan with tasks, milestones, and technical decisions in seconds.
Each task comes with optimized prompts for Cursor, Copilot, or any AI coding tool you use.
AI agents write code, create branches, and open Pull Requests on your GitHub repo — hands-free.
Track progress with a visual board. Drag tasks between columns, edit details, and stay organized.
React, Next.js, Laravel, Django, Flutter, and more. AI plans are tailored to your stack.