Stitch Pro Mcp

stitch-pro-mcp

The intelligent MCP server for Google Stitch. Design systems. Accessibility. Responsive. React/Vue/Svelte. Auto-orchestration. 18 tools. One prompt.

Quick Start · Tools · Examples · Architecture

The Problem

Google Stitch generates beautiful UI from text prompts. But it outputs raw HTML — no design system, no accessibility, no responsive breakpoints, no framework components.

Every existing Stitch MCP is a thin wrapper. Generate screen, get HTML, done.

stitch-pro-mcp fills the gap between generation and production.

| | Existing MCPs | stitch-pro-mcp | |---|:---:|:---:| | Generate screens | :whitecheckmark: | :whitecheckmark: | | Design system enforcement | :x: | :whitecheckmark: | | WCAG 2.1 AA accessibility | :x: | :whitecheckmark: | | Responsive breakpoints | :x: | :whitecheckmark: | | React / Next.js output | :x: | :whitecheckmark: | | Vue 3 output | :x: | :whitecheckmark: | | SvelteKit output | :x: | :whitecheckmark: | | shadcn/radix/MUI mapping | :x: | :whitecheckmark: | | Multi-screen flows | :x: | :whitecheckmark: | | Auto-orchestration | :x: | :whitecheckmark: |

Quick Start

1. Get a Stitch API Key

Visit stitch.withgoogle.com and create an API key.

2. Install

# Run directly (no install)
npx stitch-pro-mcp

# Or install globally
npm install -g stitch-pro-mcp

3. Configure Your Editor

Claude Code

Recommended (CLI):

# Install globally first
npm install -g stitch-pro-mcp

# Add to Claude Code with API key
claude mcp add -e STITCH_API_KEY=your-api-key --transport stdio stitch-pro -- node $(npm root -g)/stitch-pro-mcp/dist/bin/cli.js

Windows users: Use the full path to the installed CLI:

claude mcp add -e STITCH_API_KEY=your-api-key --transport stdio stitch-pro -- node "C:/Users/YOUR_USER/AppData/Roaming/npm/node_modules/stitch-pro-mcp/dist/bin/cli.js"

> Note: MCP servers in Claude Code are configured in ~/.claude.json (local scope), NOT in ~/.claude/settings.json. Use claude mcp add to configure — it handles the correct file automatically.

Cursor

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}

VS Code (Copilot)

Add to .vscode/mcp.json:

{
  "servers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}

Windsurf

Add to ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}

Gemini CLI

Add to ~/.gemini/settings.json:

{
  "mcpServers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}

Codex (OpenAI)

Add to ~/.codex/config.json:

{
  "mcpServers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}

Antigravity

{
  "mcpServers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}

OpenCode

{
  "mcpServers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}

> Tip: Set STITCH_API_KEY as a system environment variable and omit the env block entirely.

Troubleshooting

Windows: "Connection closed" or server not connecting

On Windows, npx doesn't work directly as an MCP command. Use one of these approaches:

Option A: Install globally + use node with full path (recommended)

npm install -g stitch-pro-mcp
# Then configure with absolute path to the CLI:
# node C:/Users/YOUR_USER/AppData/Roaming/npm/node_modules/stitch-pro-mcp/dist/bin/cli.js

Option B: Wrap npx with cmd /c

{
  "command": "cmd",
  "args": ["/c", "npx", "-y", "stitch-pro-mcp"]
}

Claude Code: MCP server not showing tools

1. MCP servers are configured in ~/.claude.json, not ~/.claude/settings.json or ~/.claude/.mcp.json
2. Use claude mcp add CLI command to configure — it writes to the correct file
3. After adding, restart Claude Code for tools to appear
4. Verify with: claude mcp list — should show stitch-pro: ✓ Connected

Server starts but tools don't respond

Check for double-start: if you see "Starting stitch-pro" logged twice, you're on v0.1.0 which had a bug where the server started twice. Update to v0.1.2+:

npm install -g stitch-pro-mcp@latest

Tools

Smart (Auto-Orchestration)

| Tool | What It Does | |------|-------------| | sp_auto | The god tool. Describe what you want in plain English — auto-detects framework, library, theme, device type, and chains everything: design system → generation → a11y → responsive → conversion. One call. | | sp_analyze | Feed it any HTML. Returns accessibility issues, responsiveness gaps, component mapping potential, and a prioritized tool chain recommendation. | | sp_smart_convert | Like sp_to_react/sp_to_vue/sp_to_svelte, but auto-runs a11y fixes and responsive injection first. No manual chaining. |

Generation

| Tool | What It Does | |------|-------------| | sp_generate | Generate a UI page with full pipeline — design system, a11y, responsive, framework conversion | | sp_flow | Generate multi-screen flows (login → dashboard → settings) in one call |

Design System

| Tool | What It Does | |------|-------------| | sp_design_create | Generate a complete design system from a brand description — colors, typography, spacing, rules | | sp_design_apply | Apply a design system to existing HTML — CSS variable injection, font/color enforcement |

Quality

| Tool | What It Does | |------|-------------| | sp_a11y | WCAG 2.1 AA audit with auto-fix — contrast, ARIA, semantics, touch targets, lang attr | | sp_responsive | Inject Tailwind responsive breakpoints for mobile, tablet, desktop |

Framework Conversion

| Tool | What It Does | |------|-------------| | sp_to_react | HTML → Next.js/React .tsx with useState, event handlers, component extraction | | sp_to_vue | HTML → Vue 3 SFCs with `, ref(), @event bindings | | sptosvelte | HTML → SvelteKit components with Svelte 5 $state runes | | sp_extract` | Map HTML elements to shadcn/radix/MUI components with confidence scoring |

Project Management

| Tool | What It Does | |------|-------------| | sp_create_project | Create a new Stitch project. Returns the project ID needed for generation tools. |

Listing

| Tool | What It Does | |------|-------------| | sp_projects | List all Stitch projects | | sp_screens | List screens in a project | | sp_screen | Get a screen's HTML source and image URL |

Examples

One prompt, full output

sp_auto("Dark SaaS pricing page in React with shadcn")

  Auto-detects: react, shadcn, dark theme, SaaS
  Auto-chains:
    1. Create dark design system
    2. Enrich prompt with brand tokens
    3. Generate page via Stitch API
    4. WCAG 2.1 AA audit + auto-fix
    5. Responsive breakpoint injection
    6. Convert to Next.js .tsx with shadcn

  → Returns: files[], dependencies{}, a11y report, timings

Analyze before acting

sp_analyze(html)

  → sp_a11y (HIGH): missing lang, no 
  → sp_responsive (HIGH): fixed widths
  → sp_extract (MEDIUM): buttons + cards → shadcn
  → Suggested chain: [sp_a11y, sp_responsive, sp_extract, sp_to_react]

Smart convert

sp_smart_convert(html, "vue", "radix")

  Auto-runs: a11y → responsive → extract → Vue 3 emit
  → Returns: .vue SFCs, WCAG compliant, responsive

Manual tools

sp_to_react(html, { componentLibrary: "shadcn" })
sp_a11y(html, { autoFix: true })
sp_design_create({ name: "Acme", primaryColor: "#6366F1" })

Architecture

User prompt
    │
    ▼
┌──────────────────────────────────────────┐
│            stitch-pro-mcp                │
│                                          │
│  ┌─ sp_auto (intent parser) ───────────┐ │
│  │  Detects: framework, library, theme │ │
│  │  device type, dark mode, industry   │ │
│  └─────────────────────────────────────┘ │
│                                          │
│  Pre-Generate                            │
│  └─ Design System Enrichment             │
│                                          │
│  Stitch API Call                         │
│  └─ project.generate() → raw HTML       │
│                                          │
│  Post-Generate                           │
│  ├─ Design System Enforcement (CSS vars) │
│  ├─ Accessibility Audit + Auto-Fix       │
│  └─ Responsive Breakpoint Injection      │
│                                          │
│  Convert (if framework !== html)         │
│  ├─ HTML → ComponentTree (AST-based)     │
│  ├─ Component Library Mapping            │
│  └─ Framework Emitter (React/Vue/Svelte) │
│                                          │
│  Output: production-ready components     │
└──────────────────────────────────────────┘

Pipeline is linear, processors are stateless, Stitch API call is injected — fully testable without hitting the API.

Supported Platforms

| Platform | Status | |----------|--------| | Claude Code | :whitecheckmark: | | Cursor | :whitecheckmark: | | VS Code (Copilot) | :whitecheckmark: | | Windsurf | :whitecheckmark: | | Gemini CLI | :whitecheckmark: | | Codex (OpenAI) | :whitecheckmark: | | Antigravity | :whitecheckmark: | | OpenCode | :whitecheckmark: | | Any MCP-compatible client | :whitecheckmark: |

git clone https://github.com/LuciferDono/stitch-pro-mcp.git
cd stitch-pro-mcp
npm install
npm run typecheck    # Type checking
npm run build        # Build to dist/
npm run dev          # Run in dev mode
npm test             # Run tests