> ## 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.

# Design Systems MCP

> Manage VibeFlow design systems and create UI projects directly from your AI editor

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

```
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
```

<Tip>
  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.
</Tip>

***

## Getting your API key

<Steps>
  <Step title="Open Settings">
    In VibeFlow UI, click your avatar and go to **Settings → MCP**.
  </Step>

  <Step title="Create an API key">
    Click **Create API Key** to generate your key.
  </Step>

  <Step title="Copy the URL and key">
    Copy both the **MCP URL** and the **API Key**. You'll need both when connecting
    your client.
  </Step>
</Steps>

***

## 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:

```bash theme={null}
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):

```json theme={null}
{
  "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:

<AccordionGroup>
  <Accordion title="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."*
  </Accordion>

  <Accordion title="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."*
  </Accordion>

  <Accordion title="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."*
  </Accordion>

  <Accordion title="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."*
  </Accordion>
</AccordionGroup>

***

## 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.