freemcplab / Directory / Playground / Stitch MCP

● Community davideast ⚡ Instant

Stitch MCP

Name: Stitch MCP MCP Server
Author: davideast

Bridge between Google Stitch's AI design canvas and your real codebase — Claude reads the design and writes React/Vue/SwiftUI for it.

Stitch is Google's AI UI design tool. Stitch MCP lets Claude pull the active Stitch design (layout tree, tokens, generated assets) and translate it into your project's component conventions, instead of you copy-pasting screenshots.

▶ Watch demo 📦 Install 💡 Use Cases

Why use it

Key features

Pull current Stitch design as a structured tree
Maps Stitch tokens to your design-system tokens
Outputs React / Vue / Svelte / SwiftUI
Round-tripping: edit code, sync changes back as notes
Image-asset export with naming conventions

Live Demo

What it looks like in practice

ready

Install

Pick your client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "stitch-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "stitch-mcp"
      ]
    }
  }
}

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "stitch-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "stitch-mcp"
      ]
    }
  }
}

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "stitch-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "stitch-mcp"
      ]
    }
  }
}

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "stitch-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "stitch-mcp"
      ]
    }
  }
}

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "stitch-mcp",
      "command": "npx",
      "args": [
        "-y",
        "stitch-mcp"
      ]
    }
  ]
}

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json

{
  "context_servers": {
    "stitch-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "stitch-mcp"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

claude mcp add stitch-mcp -- npx -y stitch-mcp

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use Stitch MCP

Turn a Stitch screen into production React

👤 Developers ⏱ ~15 min intermediate

When to use: You finished a screen in Stitch and want a PR-ready component.

Flow

Pull design

stitch_get_active_design; inspect tree.✓ Copied

→ Tree loaded
Map tokens

Map Stitch tokens to your tailwind config.✓ Copied

→ Token map ready
Generate

Generate React component using your project's conventions.✓ Copied

→ Component file ready

Outcome: Component lives in your repo with your tokens, not pasted Stitch CSS.

Combinations

Pair with other MCPs for X10 leverage

stitch-mcp + shadcn-ui-mcp

Map Stitch components onto your shadcn primitives

Combine stitch-mcp with shadcn-ui-mcp: Map Stitch components onto your shadcn primitives✓ Copied

Tools

What this MCP exposes

Tool	Inputs	When to call	Cost
get_active_design	(see docs)	Fetch current Stitch design tree	1 call
export_assets	(see docs)	Export image assets with names	1 call
map_tokens	(see docs)	Map Stitch tokens to a target token system	1 call

Cost & Limits

What this costs to run

API quota: Stitch API quota applies
Tokens per call: Design trees are mid-size
Monetary: Free MCP; Stitch usage applies
Tip: Strip out hidden layers before generating code — keeps token count down

Security

Permissions, secrets, blast radius

Minimum scopes: stitch:read

Credential storage: Stitch API token in env

Data egress: stitch.google.com

Troubleshooting

Common errors and fixes

Design returns empty

Confirm the right Stitch project is active in your account

Generated code uses Stitch tokens

Provide a token-mapping config first

Alternatives

Stitch MCP vs others

Alternative	When to use it instead	Tradeoff
figma MCP	Source is Figma	Different design tool

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills