home / mcp / stitch mcp auto server

Stitch MCP Auto Server

Provides an automated MCP server for Stitch design and design system workflows with CLI prompts and editor integration.

Installation

Add the following to your MCP client configuration file.

Configuration

{
  "mcpServers": {
    "greensheep01201-stitch-mcp-auto": {
      "command": "npx",
      "args": [
        "stitch-mcp-auto"
      ],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID"
      }
    }
  }
}

Stitch MCP Auto simplifies creating and managing an MCP server workflow by automating the setup and providing an integrated command surface you can use from your editors. It streamlines Google Cloud authentication, API enabling, and MCP client configuration so you can go straight to generating designs, checking accessibility, and exporting design systems with minimal setup.

How to use

You connect with your MCP client to drive design generation and design system workflows. Start by launching the MCP server through your editor’s MCP surface or by running the server command. The server exposes a set of prompts and commands you can invoke from supported CLIs to create, modify, and export designs, check accessibility, and generate design tokens.

How to install

Prerequisites you need before installing the MCP server:

Node.js 18 or higher
Google Cloud CLI (gcloud)
A compatible MCP client (e.g., Claude Desktop, Claude Code, Cursor)

Install and verify Node.js and the MCP server runner as follows. First, install the runner with npm or npx and then start the setup or the server.

npx -p stitch-mcp-auto stitch-mcp-auto-setup

# Follow the setup wizard to complete Google login, project selection, and Stitch API enablement.

# After setup completes, you can start the MCP server used by editors with:

npx stitch-mcp-auto

Additional setup and usage notes

The setup wizard launches a web-based page at http://localhost:51121 to handle Google login and configuration. If you are using a Windows Subsystem for Linux (WSL) environment, you may need to open the URL in a Windows browser manually to complete authentication.

Configuration and starting commands

You can start the MCP server directly from editors or CLI by running the standard runtime command shown here.

npx stitch-mcp-auto

Troubleshooting and tips

If authentication or API activation encounters issues, re-run the setup to re-acquire credentials and reconfigure the project. If the browser does not open automatically in WSL, copy the URL shown in the terminal and open it in your Windows browser, then return to the setup page.

Notes on security and access

Keep your Google Cloud project and credentials secure. Use the Google Cloud Console to manage API access and OAuth credentials, and store your MCP configuration in a secure location associated with your editor.

Available tools

create_project

Creates a new Stitch project to host UI designs and frontend code.

get_project

Fetches details for a specific Stitch project by name.

list_projects

Lists all Stitch projects accessible to you.

list_screens

Lists all screens within a given Stitch project.

get_screen

Retrieves details for a specific screen in a project.

generate_screen_from_text

Generates a new screen from a text prompt within a project.

fetch_screen_code

Retrieves the HTML/Code content of a screen.

fetch_screen_image

Retrieves a preview image of a screen.

extract_design_context

Extracts design DNA (colors, typography, spacing) from a screen for consistency.

apply_design_context

Generates a new screen using a previously extracted design context.

compare_designs

Compares two screens to identify design differences and harmonize styles.

generate_design_tokens

Generates design tokens (CSS variables, Tailwind config, etc.) from a screen.

generate_responsive_variant

Creates responsive variants of a screen for different devices.

batch_generate_screens

Generates multiple related screens in one operation with consistent design.

analyze_accessibility

Checks a screen for WCAG 2.1 AA accessibility compliance with actionable recommendations.

extract_components

Extracts reusable UI component patterns with their styles.

suggest_trending_design

Applies modern UI trends to a screen generation task.

generate_style_guide

Generates a comprehensive style guide from an existing design.

export_design_system

Exports a complete design system package for developer handoff.