@natroc/stitch-mcp

STDIO MCP bridge for Google Stitch. Connect any AI agent (Claude Code, etc.) to the Google Stitch design platform.

Why?

Google Stitch's MCP server uses HTTP/StreamableHTTP transport, but most AI agents only support STDIO transport - they spawn a process and communicate via stdin/stdout.

@natroc/stitch-mcp solves this by running a local STDIO MCP server that transparently forwards all requests to Stitch via HTTPS.

[AI Agent] ← STDIO → [@natroc/stitch-mcp] ← HTTPS → [Google Stitch MCP API]

Features

• All Stitch MCP tools exposed - tools are fetched dynamically from the Stitch server. No manual mapping needed.
• 5 extra virtual tools - SDK features not available as MCP tools (upload, download, inspect, etc.)
• Zero configuration - just set one env var and run.
• Graceful shutdown - handles SIGINT, SIGTERM, and unexpected errors.

Installation

npm install -g @natroc/stitch-mcp

Or run directly:

npx @natroc/stitch-mcp

Quick Start

# Set your Stitch API key
export STITCH_API_KEY="your_stitch_api_key"

# Start the MCP bridge
stitch

The server will log its status to stderr and wait for MCP requests on stdin.

Environment Variables

| Variable | Required | Default | Description | | ------------------------------- | ----------------- | ----------------------------------- | ------------------------------------------ | | STITCH_API_KEY | * (one required) | - | Stitch API key for authentication | | STITCH_ACCESS_TOKEN | * (one required) | - | OAuth2 Bearer token (alternative) | | GOOGLE_CLOUD_PROJECT | optional | - | Quota project ID (required with OAuth) | | STITCH_MCP_URL | optional | https://stitch.googleapis.com/mcp | Target Stitch MCP server URL | | STITCH_ALLOW_INSECURE_MCP_URL | optional | false | Allow non-HTTPS MCP URL | | STITCH_ALLOWED_UPLOAD_DIR | optional | - | Allowed base dir for upload_design_files | | STITCH_UPLOAD_MAX_BYTES | optional | 10485760 (10MB) | Max file size for upload_design_files | | STITCH_PROXY_NAME | optional | stitch-mcp | Server name reported to Stitch | | STITCH_PROXY_VERSION | optional | (package version) | Server version reported to Stitch |

Note: Either STITCH_API_KEY or STITCH_ACCESS_TOKEN must be set. When using STITCH_ACCESS_TOKEN, GOOGLE_CLOUD_PROJECT is also required.

Security: STITCH_MCP_URL must use https:// by default. Set STITCH_ALLOW_INSECURE_MCP_URL=true for local testing only. upload_design_files is disabled until STITCH_ALLOWED_UPLOAD_DIR is set — file reads are sandboxed to that directory.

Available Tools

Stitch MCP Tools (14 tools - fetched dynamically)

These are the tools exposed by the Google Stitch server. They are automatically discovered and forwarded:

| Tool | Description | | ------------------------------------- | ------------------------------------ | | create_project | Create a new Stitch project | | get_project | Get project details | | list_projects | List all projects | | list_screens | List screens in a project | | get_screen | Get screen details | | generate_screen_from_text | Generate a screen from a text prompt | | edit_screens | Edit existing screens | | generate_variants | Generate variants of screens | | create_design_system | Create a new design system | | update_design_system | Update a design system | | list_design_systems | List design systems | | apply_design_system | Apply a design system to screens | | upload_design_md | Upload a DESIGN.md file | | create_design_system_from_design_md | Create design system from DESIGN.md |

Virtual Tools (5 tools - local SDK features)

These extend the MCP server with features from the Stitch SDK that are not available as MCP tools:

| Tool | Description | | --------------------- | ---------------------------------------------------- | | download_assets | Download screens and assets to a local directory | | upload_design_files | Upload design files (PNG/JPG/WEBP/HTML) to a project | | inspect_sdk | Inspect the full SDK tool catalog with schemas | | build_fife_url | Build a FIFE image URL with sizing options | | parse_stitch_name | Parse a Stitch resource name into structured data |

How It Works

1. The bridge starts and sends an initialize handshake to the Stitch MCP server.
2. On tools/list, it fetches the latest tool list from Stitch, repairs $ref schemas for AJV compatibility, and merges virtual tools.
3. On tools/call, it checks the virtual tool registry first; if the tool isn't virtual, it forwards the request to Stitch via JSON-RPC over HTTPS.
4. All communication with the AI agent happens over STDIO, while communication with Stitch uses HTTPS.

Virtual Tools Detail

download_assets

Download all screens and their referenced assets (images, CSS) to a local directory. Rewrites HTML to reference local files.

Parameters: projectId, outputDir, fileMode?, tempDir?, assetsSubdir?

upload_design_files

Upload a design file to a Stitch project via the REST API (BatchCreateScreens).

Supported formats: .png, .jpg, .jpeg, .webp, .html, .htm

Parameters: projectId, filePath, title?, createScreenInstances?

inspect_sdk

Return the full Stitch SDK tool catalog with parameters, types, and JSON schemas.

Parameters: toolName?, format? ("detailed" | "summary")

build_fife_url

Build a FIFE (Fast Image Fetch Engine) URL with width/height options.

Parameters: baseUrl, width?, height?

parse_stitch_name

Parse a Stitch resource name (e.g. projects/123/screens/abc) into structured components.

Parameters: resourceName

Setup Guide

Claude Code

set on your .claude.json config:

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@natroc/stitch-mcp"],
      "env": {
        "STITCH_API_KEY": "${STITCH_API_KEY}"
      }
    }
  }
}

default config at ~/.claude/.claude.json

Codex

set on your config.toml config:

[mcp_servers.stitch]
command = "npx"
args = ["-y", "@natroc/stitch-mcp"]
env_vars = ["STITCH_API_KEY"]

default config at ~/.codex/config.toml

Claude Code CLI

claude plugin marketplace add NatrocTeam/Natroc-Plugins
claude plugin install stitch@natroc-plugins
claude "I have installed the stitch plugin which includes stitch mcp, I want you to try whether stitch mcp works."

Codex CLI

codex plugin marketplace add NatrocTeam/Natroc-Plugins
codex plugin add stitch@natroc-plugins
codex "I have installed the stitch plugin which includes stitch mcp, I want you to try whether stitch mcp works."

Building from Source

git clone https://github.com/Natroc-Team/Stitch-MCP.git
cd Stitch-MCP
npm install
npm run build
npm install -g .

License

MIT

Related

• @google/stitch-sdk - official Stitch SDK
• @modelcontextprotocol/sdk - MCP TypeScript SDK