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 "Deploy 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 Source Related Servers Discussions Admin

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:

Related MCP server: Stitch MCP

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

Available Tools

17 tools

sp_a11yAccessibility AuditA

Read-onlyIdempotent

Run WCAG 2.1 AA accessibility audit on HTML and auto-fix issues (contrast, semantics, ARIA, touch targets)

Inputs: html (required), autoFix.

sp_analyzeAnalyze HTMLA

Read-onlyIdempotent

Analyze HTML and recommend which stitch-pro tools to run. Detects accessibility issues, missing responsiveness, framework conversion opportunities, and component library mapping potential.

Inputs: html (required).

sp_autoAuto — Smart OrchestratorA

Describe what you want in plain English. Automatically chains design system creation, page generation, accessibility fixes, responsive adaptation, and framework conversion based on your intent.

Inputs: prompt (required), projectId (required), outputDir.

sp_create_projectCreate Stitch ProjectA

Create a new Stitch project. Returns the project ID needed for sp_generate and sp_auto.

Inputs: title (required).

sp_design_applyApply Design SystemA

Read-onlyIdempotent

Apply a previously created design system to existing HTML — injects CSS variables, replaces fonts and colors

Inputs: html (required), designSystemId (required).

sp_design_createCreate Design SystemA

Generate a design system (colors, typography, spacing, rules) from a brand description. Returns a DESIGN.md and an ID for use in generation calls.

Inputs: name (required), brandDescription (required), industry, personality, +1 more.

sp_extractExtract ComponentsA

Read-onlyIdempotent

Parse HTML into reusable components and map them to shadcn/radix/MUI equivalents with confidence scoring

Inputs: html (required), library (required), confidenceThreshold.

sp_flowGenerate Multi-Screen FlowB

Generate multiple related screens (e.g., login → dashboard → settings) in one call with consistent design

Inputs: prompt (required), projectId (required), screens (required), deviceType, +5 more.

sp_generateGenerate PageA

Generate a UI page with optional design system enforcement, accessibility fixes, responsive breakpoints, and framework conversion

Inputs: prompt (required), projectId (required), deviceType, framework, +4 more.

sp_projectsList Stitch ProjectsA

Read-onlyIdempotent

List all projects in your Stitch account

Inputs: no named parameters.

sp_responsiveResponsive AdaptationA

Read-onlyIdempotent

Make HTML responsive by injecting Tailwind breakpoints for mobile, tablet, and desktop

Inputs: html (required).

sp_screenGet Screen DetailsA

Read-onlyIdempotent

Get a specific screen with its HTML source and image URL

Inputs: projectId (required), screenId (required), includeHtml.

sp_screensList Screens in ProjectB

Read-onlyIdempotent

List all screens in a Stitch project

Inputs: projectId (required).

sp_smart_convertSmart ConvertA

Read-onlyIdempotent

Converts HTML to a framework, but auto-detects if it needs accessibility fixes and responsive adaptation first. Runs the full quality pipeline before conversion — no manual chaining needed.

Inputs: html (required), framework (required), componentLibrary, appRouter.

sp_to_reactConvert to ReactA

Read-onlyIdempotent

Convert HTML/Tailwind to Next.js/React components with proper state, props, hooks, and optional shadcn/radix/MUI mapping

Inputs: html (required), componentLibrary, appRouter.

sp_to_svelteConvert to SvelteA

Read-onlyIdempotent

Convert HTML/Tailwind to SvelteKit components with Svelte 5 runes ($state) and optional component library mapping

Inputs: html (required), componentLibrary, appRouter.

sp_to_vueConvert to VueA

Read-onlyIdempotent

Convert HTML/Tailwind to Vue 3 Single File Components with Composition API and optional component library mapping

Inputs: html (required), componentLibrary, appRouter.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

Deploy Server

Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

TDQS

A4/5.0

Scored 2026-05-26 13:00 across 17 tools

Disambiguation5/5

Each tool has a clearly distinct purpose: accessibility, analysis, design system creation/application, page generation, framework conversion, and project/screen management. No two tools do the same thing.

Naming Consistency5/5

All tools use the 'sp_' prefix followed by descriptive lower_case names with underscores. Verbs are consistently placed (e.g., 'create_', 'to_', 'design_') and follow a predictable pattern.

Tool Count5/5

17 tools is well-scoped for a comprehensive UI development toolkit. Each tool covers a specific operation and contributes to the overall workflow without redundancy.

Completeness4/5

The tool set covers the full lifecycle from analysis to generation, enhancement, and conversion. Minor gaps exist (e.g., no delete or update for projects/screens), but core workflows are complete.

Maintenance

ActivityInactive

ResponsivenessNo recent community issues

Resources

Related MCP Connectors

Figma MCP Server
com.figma.mcp
The Figma MCP server brings Figma design context directly into your AI workflow.
Developer Tools Content Management Systems
32,153
https://mcp.figma.com/mcp
StoryStudio
io.github.HelloElo-Fr
AI image, video, voice and music generation over MCP, routed to Veo 3.1, Seedance 2.5 and more.
AI & Machine Learning Image & Video Processing Audio Processing
1
https://storystudio.cc/mcp
marmo-uiA
io.github.mahmoudilyan
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Design Tools Developer Tools
2
https://mcp.marmoui.com/mcp
Server4AgentA
com.server4agent
MCP server that lets your AI assistant build and deploy apps, hosting each one at a live URL.
App Automation Cloud Platforms Developer Tools
343
https://mcp.server4agent.com

Related MCP Servers

Stitch MCP Auto
Developer Tools App Automation Software Architecture
GreenSheep01201
A
license
Not graded
quality
D
maintenance
An automated MCP server for Google Stitch that enables AI-driven UI design generation, accessibility audits, and design system management. It streamlines workflows for creating responsive screens, extracting design tokens, and maintaining visual consistency across professional web projects.
Updated 9 months ago (2026-02-15 14:06 UTC)
61 npm
31
Apache 2.0
Stitch MCP
Developer Tools Image & Video Processing App Automation
Kargatharaakash
A
license
Not graded
quality
D
maintenance
A universal MCP server for Google Stitch that enables AI-powered UI/UX design generation by extracting design context and metadata from existing screens. It allows users to fetch screen code and images to create consistent, styled UI components across multiple projects.
Updated 9 months ago (2026-02-13 09:16 UTC)
703 npm
121
Apache 2.0
Stitch-MCP
Design Tools AI & Machine Learning Project Management
samueljayasingh
F
license
Not graded
quality
D
maintenance
An MCP server that exposes Google Stitch's AI-powered UI design capabilities as local tools. It enables project management, screen generation/editing, and design system operations by forwarding requests to Google's Stitch API.
Updated 7 months ago (2026-04-16 06:07 UTC)
2
-
VibeServe
Coding Agents Developer Tools AI & Machine Learning
ncsound919
A
license
C
quality
A
maintenance
A production-grade MCP server that turns natural language intent into fully-architected, accessible, production-ready UI code through a 7-step agentic pipeline.
Updated 3 months ago (2026-08-10 16:15 UTC)
20
1
Apache 2.0

Appeared in Searches

A tool for generating UI design mockups from text descriptions

The Problem

Quick Start

1. Get a Stitch API Key

2. Install

3. Configure Your Editor

Troubleshooting

Tools

Smart (Auto-Orchestration)

Generation

Design System

Quality

Framework Conversion

Project Management

Listing

Examples

One prompt, full output

Analyze before acting

Smart convert

Manual tools

Architecture

Supported Platforms

Development

Tech Stack

Stats

Roadmap

Contributing

License

Available Tools

Tool Schema Changelog

TDQS

Maintenance

Resources

Related MCP Connectors

Related MCP Servers

Stitch MCP Auto

Stitch MCP

Stitch-MCP

VibeServe

Appeared in Searches