Which integrations are available for this server?

Integration with Google Stitch for generating UI screens from text prompts and managing projects. Maps HTML elements to MUI components with confidence scoring for component extraction. Converts generated HTML to Next.js .tsx components using the App Router and shadcn/ui. Converts generated HTML to React/Next.js components with hooks and event handlers. Converts generated HTML to SvelteKit components with Svelte 5 $state runes.

How do I use stitch-pro-mcp?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@stitch-pro-mcp generate a responsive React login form with accessibility" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

stitch-pro-mcp

by LuciferDono

Overview Schema Related Servers Score Discussions

TypeScript

Remote

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

Install Server

license - permissive license

quality

maintenance

How are these scores calculated?

Resources

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Tools

View all tools

Latest Blog Posts

Lightport: Open-Sourcing Glama's AI Gateway
By punkpeye on April 27, 2026.
open source
OpenAI
Tool Definition Quality Score (TDQS)
By punkpeye on April 3, 2026.
mcp
The Hackers Who Tracked My Sleep Cycle
By punkpeye on March 26, 2026.
security

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/LuciferDono/stitch-pro-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server