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	:white_check_mark:	:white_check_mark:
Design system enforcement	:x:	:white_check_mark:
WCAG 2.1 AA accessibility	:x:	:white_check_mark:
Responsive breakpoints	:x:	:white_check_mark:
React / Next.js output	:x:	:white_check_mark:
Vue 3 output	:x:	:white_check_mark:
SvelteKit output	:x:	:white_check_mark:
shadcn/radix/MUI mapping	:x:	:white_check_mark:
Multi-screen flows	:x:	:white_check_mark:
Auto-orchestration	:x:	:white_check_mark:

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

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.

Add to .cursor/mcp.json:

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

Add to .vscode/mcp.json:

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

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

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

Add to ~/.gemini/settings.json:

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

Add to ~/.codex/config.json:

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

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

{
  "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

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"]
}

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

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 `<script setup>`, `ref()`, `@event` bindings
`sp_to_svelte`	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 <main>
  → 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	:white_check_mark:
Cursor	:white_check_mark:
VS Code (Copilot)	:white_check_mark:
Windsurf	:white_check_mark:
Gemini CLI	:white_check_mark:
Codex (OpenAI)	:white_check_mark:
Antigravity	:white_check_mark:
OpenCode	:white_check_mark:
Any MCP-compatible client	:white_check_mark:

Development

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

Tech Stack

Dependency	Purpose
`@modelcontextprotocol/sdk`	MCP server framework (stdio)
`@google/stitch-sdk`	Stitch API client
`parse5`	HTML → AST (no browser)
`axe-core` + `jsdom`	WCAG accessibility auditing
`zod`	Runtime input validation (all 18 tools)
`color`	Color math for design systems
`vitest`	81 tests across 11 test suites
TypeScript	Full type safety, 29 source files, 4,700+ lines

Stats

18 MCP tools
7 pipeline processors
3 framework emitters (React, Vue, Svelte)
81 tests passing
104 KB package size (compressed)
8 supported platforms

Roadmap

~~npm publish for~~ npx stitch-pro-mcp
~~CI/CD with GitHub Actions~~
~~GitHub Pages docs site~~
sp_batch — full app frontend in one call (layout + nav + pages + routing)
Screenshot-to-code pipeline (screenshot → Stitch → framework output)
Figma import via Stitch paste bridge
LLM-powered design system generation (Claude API)
Streamable HTTP transport for remote deployment

Contributing

PRs welcome. Open an issue first for major changes.

License

MIT