VibeFlow MCP

The VibeFlow MCP (Model Context Protocol) server lets any MCP-compatible AI client talk directly to VibeFlow. You can scaffold projects, manage design systems, and open projects for editing, all without leaving your editor.

Available tools

Project tools

Tool	Description
`initiate_project`	Builds a project from a plain-text prompt. Handles workflows, database, frontend, and auth when needed. Only `prompt` is required; VibeFlow handles the build.
`get_project`	Polls the build status of a project using its `projectId`. Returns one of: `building` · `ready` · `failed`
`open_project_for_editing`	Returns a direct editor URL to open an existing project in VibeFlow for review or editing.
`export_flow_json`	Exports a project’s flow graph (nodes and edges) as JSON.

Design System tools

Tool	Description
`get_all_design_systems`	Lists all design systems in your VibeFlow account. Use this before creating a new one or referencing one in a project.
`create_design_system`	Creates a new design system with the specified name, description, and guidelines.
`update_design_system`	Updates an existing design system’s name, description, or guidelines.
`add_component_to_design_system`	Adds a reusable component (button, card, form, nav, etc.) to an existing design system.

Typical workflow

initiate_project  →  kick off a build from a prompt
get_project       →  poll until status is "ready"
open_project_for_editing  →  get the editor URL to review or modify

For design-system-first projects:

get_all_design_systems          →  pick or confirm a design system
create_design_system (if none)  →  generate one from your codebase
initiate_project                →  build using the design system

Getting your API key

Go to Settings → MCP in VibeFlow.
Click Create API Key to generate your key.
Copy the MCP URL and API Key. You’ll need both when connecting.

Transport

Field	Value
Transport	Streamable HTTP
MCP URL	`https://tool.vibeflow.ai/mcp`

Authentication is passed as a bearer token in the Authorization header:

Authorization: Bearer YOUR_API_KEY

Any MCP client that supports HTTP transport with custom headers can connect to VibeFlow.

Connecting your client

Claude Code

Run the following command in your terminal:

claude mcp add --transport http \
  vibeflow https://tool.vibeflow.ai/mcp \
  --header "Authorization: Bearer YOUR_API_KEY"

Replace YOUR_API_KEY with the key from your Settings page.

Cursor

Cursor uses mcp-remote as a bridge for HTTP-based MCP servers. Add the following to your Cursor MCP config (~/.cursor/mcp.json or the MCP settings panel):

{
  "vibeflow": {
    "command": "npx",
    "args": [
      "-y",
      "mcp-remote",
      "https://tool.vibeflow.ai/mcp"
    ],
    "env": {
      "HTTP_AUTHORIZATION": "Bearer YOUR_API_KEY"
    }
  }
}

Replace YOUR_API_KEY with the key from your Settings page.

Other MCP clients

For any other client that supports Streamable HTTP transport, configure it with:

MCP URL: https://tool.vibeflow.ai/mcp
Auth header: Authorization: Bearer YOUR_API_KEY

Refer to your client’s documentation for how to set custom HTTP headers on MCP connections.

Regenerating your API key

Go to Settings → MCP and click the regenerate icon next to your API Key. Your old key is immediately invalidated. Update it in your client config after regenerating.

Getting Started

Core Concepts

Features

Video Tutorials

Available tools

Project tools

Design System tools

Typical workflow

Getting your API key

Transport

Connecting your client

Claude Code

Cursor

Other MCP clients

Regenerating your API key

​Available tools

​Project tools

​Design System tools

​Typical workflow

​Getting your API key

​Transport

​Connecting your client

​Claude Code

​Cursor

​Other MCP clients

​Regenerating your API key

Available tools

Project tools

Design System tools

Typical workflow

Getting your API key

Transport

Connecting your client

Claude Code

Cursor

Other MCP clients

Regenerating your API key