Design Systems MCP - VibeFlow UI

The VibeFlow MCP (Model Context Protocol) server lets any MCP-compatible AI client talk directly to VibeFlow. From your editor, you can build and update design systems, push reusable components to them, and scaffold UI projects - without ever leaving your IDE. For VibeFlow UI users, the most powerful use case is design systems: point an MCP-enabled client at your existing component library or codebase and have it generate, update, or extend a VibeFlow design system automatically.

Available tools

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 a name, description, and design guidance (colors, typography, spacing rules, accessibility standards, etc.).
`update_design_system`	Updates an existing design system’s name, description, or guidance.
`add_component_to_design_system`	Adds a reusable component (button, card, form, nav, etc.) with its JSX and optional CSS to an existing design system.

Project tools

Tool	Description
`initiate_project`	Builds a UI project from a plain-text prompt. 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 further refinement.
`export_flow_json`	Exports a project’s flow graph (nodes and edges) as JSON.

Typical workflows

Build a design system from your codebase

1. get_all_design_systems        →  check what already exists
2. create_design_system          →  generate one from your existing components,
                                    tokens, and guidelines
3. add_component_to_design_system  →  push individual components in (button, card,
                                      nav, form, ...)
4. update_design_system          →  refine the guidance as your brand evolves

Generate a UI on top of your design system

get_all_design_systems        →  pick or confirm a design system
initiate_project              →  prompt VibeFlow to build a UI using it
get_project                   →  poll until status is "ready"
open_project_for_editing      →  get the editor URL to refine in VibeFlow UI

Run these tools from inside your IDE while your component library is open. The AI client can read your real JSX/CSS and feed it straight into create_design_system and add_component_to_design_system - no manual copy-pasting.

Getting your API key

Open Settings

In VibeFlow UI, click your avatar and go to Settings → MCP.

Create an API key

Click Create API Key to generate your key.

Copy the URL and key

Copy both the MCP URL and the API Key. You’ll need both when connecting your client.

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.

Example prompts

Once connected, talk to your AI client like you would about any other task. A few prompts that work well:

Create a design system from this repo

“Look at the components, tokens, and Tailwind config in this codebase and create a VibeFlow design system called ‘Acme Brand’. Include guidance on primary/secondary colors, spacing scale, typography, and button variants.”

Push a component into an existing design system

“Add the PrimaryButton component in src/components/Button.tsx to my ‘Acme Brand’ design system. Include its CSS and a description of when to use it.”

Generate a UI from your design system

“Using my ‘Acme Brand’ design system, create a pricing page with three tiers and a comparison table. Open it in the editor when it’s ready.”

Keep the design system in sync

“Our brand color changed from indigo to emerald. Update the ‘Acme Brand’ design system guidance to reflect emerald-600 as the new primary.”

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.

​Available tools

​Design System tools

​Project tools

​Typical workflows

​Build a design system from your codebase

​Generate a UI on top of your design system

​Getting your API key

​Transport

​Connecting your client

​Claude Code

​Cursor

​Other MCP clients

​Example prompts

​Regenerating your API key

Available tools

Design System tools

Project tools

Typical workflows

Build a design system from your codebase

Generate a UI on top of your design system

Getting your API key

Transport

Connecting your client

Claude Code

Cursor

Other MCP clients

Example prompts

Regenerating your API key