Skip to main content

Documentation Index

Fetch the complete documentation index at: https://ui-docs.vibeflow.ai/llms.txt

Use this file to discover all available pages before exploring further.

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

ToolDescription
get_all_design_systemsLists all design systems in your VibeFlow account. Use this before creating a new one or referencing one in a project.
create_design_systemCreates a new design system with a name, description, and design guidance (colors, typography, spacing rules, accessibility standards, etc.).
update_design_systemUpdates an existing design system’s name, description, or guidance.
add_component_to_design_systemAdds a reusable component (button, card, form, nav, etc.) with its JSX and optional CSS to an existing design system.

​
Project tools

ToolDescription
initiate_projectBuilds a UI project from a plain-text prompt. Only prompt is required - VibeFlow handles the build.
get_projectPolls the build status of a project using its projectId. Returns one of: building · ready · failed
open_project_for_editingReturns a direct editor URL to open an existing project in VibeFlow for review or further refinement.
export_flow_jsonExports 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

1. get_all_design_systems        →  pick or confirm a design system
2. initiate_project              →  prompt VibeFlow to build a UI using it
3. get_project                   →  poll until status is "ready"
4. 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

1

Open Settings

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

Create an API key

Click Create API Key to generate your key.
3

Copy the URL and key

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

​
Transport

FieldValue
TransportStreamable HTTP
MCP URLhttps://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:
“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.”
“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.”
“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.”
“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.