Vibe Playground MCP

An MCP server that connects designer prototypes to VS Code Copilot. Inspect components, browse design tokens, grab selections from live prototypes, and generate production-ready code — all from chat.

Setup

npm install
npm run build

Add prototypes to a .vibe-prototypes.json in your workspace root:

{
  "prototypes": [
    { "name": "Dashboard", "url": "http://localhost:5173" }
  ]
}

Tools & Use Cases

Prototype Discovery

| Prompt | Tool | What it does | |--------|------|-------------| | What prototypes are available? | list_prototypes | Lists all prototypes from .vibe-prototypes.json with connection status, component count, and token count | | Refresh the Dashboard prototype | refresh_prototype | Force re-fetches /__meta.json for a prototype to pick up changes |

Inspecting Components

| Prompt | Tool | What it does | |--------|------|-------------| | Show me the source code for the Button component in Dashboard | get_component_code | Returns all source files that reference the specified component | | What components does the Dashboard prototype use? | get_spec (section: components) | Lists all components with their source and usage count | | Show me the full spec for Dashboard | get_spec (section: all) | Returns everything: components, tokens, versions, source files, dependencies |

Design Tokens

| Prompt | Tool | What it does | |--------|------|-------------| | Show me the token palette for Dashboard | show_token_palette | Opens an interactive Token Palette UI with search, category filtering, and a JS/CSS format toggle | | Show me the color tokens for Dashboard | show_token_palette (category: color) | Opens the palette pre-filtered to a specific category | | What tokens does CuiSideNav use? | get_component_tokens | Scans source files for the component and lists every design token it references, grouped by category | | Generate a makeStyles block from the Dashboard tokens | generate_styles | Creates a ready-to-use Griffel makeStyles file with token imports |

Comparing & Diffing

| Prompt | Tool | What it does | |--------|------|-------------| | Compare the tokens between Dashboard and Settings | compare_prototypes | Shows components and tokens that are shared, only in prototype 1, or only in prototype 2 |

Live Selection (React Grab)

| Prompt | Tool | What it does | |--------|------|-------------| | What did I just click? | get_selection | Returns the latest React Grab selection — component name, props, ancestry, tokens, and bounding box | | Show me all my selections | get_all_selections | Returns every selection from the current session | | Clear my selections | clear_selections | Resets the selection history |

Component Redline

| Prompt | Tool | What it does | |--------|------|-------------| | Show me the redline for the component I just grabbed | show_redline | Opens an interactive redline spec sheet: box-model diagram, typography, colors, borders, effects, and layout — with reverse token mapping | | What are the specs for this component? | show_redline | Same — renders padding/margin/dimensions visually, lists every computed style with matched design tokens |

Annotations

| Prompt | Tool | What it does | |--------|------|-------------| | Show me the annotations on the prototype | get_annotations | Lists all annotations with messages, positions, element info, and resolution status | | Clear all annotations | clear_annotations | Removes all annotations from the session |

Token Palette UI

The Token Palette is an interactive app that renders inline in VS Code Copilot Chat. It's designed for a narrow (~350px) iframe viewport.

Features:

• Category dropdown — filter tokens by color, typography, spacing, border, shadow, or animation
• Search — find tokens by name or CSS variable
• JS / CSS toggle — switch between tokens.colorBrandBackground (Griffel) and var(--color-brand-background) (CSS) format
• Click-to-copy — click any chip to copy the token reference; click the resolved value to copy it
• Visual previews — color swatches, typography samples, spacing bars, shadow cards, border radius squares
• Sticky category headers — always know which section you're scrolling through

Sample Workflow

A developer receives a prototype and needs to integrate it:

1. "What prototypes are available?"
   → See Dashboard is connected with 42 tokens and 12 components

2. "Show me the token palette for Dashboard"
   → Browse all tokens visually, toggle JS/CSS, copy what you need

3. "What tokens does the Card component use?"
   → Get a focused list: 3 color tokens, 2 spacing, 1 border radius, 1 shadow

4. "Generate a makeStyles block from Dashboard"
   → Get a starter Griffel file with all token imports

5. "Show me the redline for the component I just grabbed"
   → See box-model diagram, typography, colors, borders — all mapped to tokens

6. "Compare Dashboard and Settings prototypes"
   → See which tokens are shared vs. unique to each

Development

npm run dev          # Watch mode (TypeScript + Vite)
npm run dev:preview  # Local preview at localhost:5173 with mock data
npm run build        # Production build
npm start            # Run the MCP server