@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

AI Agents Config

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

As a plugin

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