Stitch MCP Auto

English | 한국어

Just let AI handle everything. - AI에게 모든 걸 맡기세요.

💡 Just share this link with your AI: https://github.com/GreenSheep01201/stitch-mcp-auto

One command setup, instant UI design generation. The most automated MCP server for Google Stitch.

Features:

• Auto Setup - One command installs everything (gcloud auth, API enable, MCP config)
• Multi-CLI Support - Works with Claude Code, Gemini CLI, Codex CLI
• 19 Professional Tools - Design generation, accessibility checks, design system export
• 5 Workflow Commands - /design, /design-system, /design-flow, /design-qa, /design-export
• 🌐 i18n Support - Auto-detects system language (English/Korean) for setup wizard and console messages

Table of Contents

• Quick Start (1 minute)
• Manual Installation
  • Step 1: Install Google Cloud CLI
  • Step 2: Run Auto Setup
  • Step 3: Configure MCP Client
• Available Tools
• Claude Code Skills
• Usage Examples
• Troubleshooting
• Architecture

Prerequisites (Install These First)

1. Install Node.js (v18 or higher)

Windows

# Using winget (Windows 10/11)
winget install OpenJS.NodeJS.LTS

# Or download installer from: https://nodejs.org/

macOS

# Using Homebrew
brew install node@22

# Or download installer from: https://nodejs.org/

Linux / WSL

# Using nvm (recommended)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
source ~/.bashrc
nvm install 22
nvm use 22

# Or using apt (Ubuntu/Debian)
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt-get install -y nodejs

Verify Node.js installation:

node --version   # Should show v18.x.x or higher
npm --version    # Should show 9.x.x or higher

2. Install Google Cloud CLI (gcloud)

Windows

Option A: Installer (Recommended)

1. Download from Google Cloud SDK
2. Run the installer (check "Run gcloud init" option)
3. Restart your terminal

Option B: PowerShell

(New-Object Net.WebClient).DownloadFile("https://dl.google.com/dl/cloudsdk/channels/rapid/GoogleCloudSDKInstaller.exe", "$env:TEMP\gcloud.exe")
Start-Process "$env:TEMP\gcloud.exe" -Wait
# Restart terminal after installation

macOS

# Using Homebrew (Recommended)
brew install --cask google-cloud-sdk

# Or direct install
curl https://sdk.cloud.google.com | bash
exec -l $SHELL

Linux / WSL

# Download and install
curl -sSL https://sdk.cloud.google.com | bash -s -- --disable-prompts --install-dir=$HOME

# Add to PATH
echo 'export PATH="$HOME/google-cloud-sdk/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

Verify gcloud installation:

gcloud --version
# Should show: Google Cloud SDK xxx.x.x

Quick Start

After installing Node.js and gcloud CLI:

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

The setup wizard will:

1. Open a web-based setup page at http://localhost:51121
2. Guide you through Google login
3. Help you select or create a project
4. Enable the Stitch API
5. Save your configuration

🤖 AI Agent Note (WSL Environment): If running in WSL, the browser cannot open automatically. You MUST open the URL in Windows browser using PowerShell:

# Run this in PowerShell (not WSL terminal)
Start-Process "http://localhost:51121"

Or instruct the user to manually open http://localhost:51121 in their Windows browser.

Manual Installation (Alternative)

Step 1: Run Auto Setup

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

Or if you cloned the repository:

node setup.js

Setup Process

1. Welcome Page - Click "Login with Google" button
2. Google Login - A new browser window opens for authentication
   • After login, you may see "Connection refused" page - just close it
   • The setup page will automatically detect your login
3. Project Selection - Choose an existing project or create a new one
4. API Activation - Click the button to enable Stitch API
   • Wait for activation (may take a few seconds)
5. Complete - Copy the MCP configuration to your editor

⚠️ WSL Users - IMPORTANT: WSL cannot open browsers directly. When the setup wizard starts:

1. Copy the URL http://localhost:51121
2. Open it manually in your Windows browser (Chrome, Edge, etc.)
3. Or run in PowerShell: Start-Process "http://localhost:51121"

The authentication will work because WSL shares localhost with Windows.

Step 3: Configure MCP Client

After setup completes, add the configuration to your MCP client.

Claude Desktop

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

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

Claude Code

Create .mcp.json in your project root:

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

Cursor

Go to Settings > MCP > Add New Server and add:

• Command: npx
• Args: -y stitch-mcp-auto
• Environment: GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID

Available Tools

Core Stitch API Tools

🎨 Professional Web Design Tools

Design Consistency Tools

Productivity Tools

Quality & Analysis Tools

Design Enhancement Tools

MCP Prompts (Auto-Discovered)

MCP Prompts are automatically available when the server is connected - no installation required. These appear in your MCP client's prompt list.

Usage in Claude Code:

/stitch:design login page with dark mode
/stitch:design-system settings page
/stitch:design-flow onboarding: welcome -> signup -> complete
/stitch:design-qa all --level AA
/stitch:design-export --token_format tailwind

Note: MCP Prompts include detailed workflow instructions that guide the AI through complex design tasks automatically.

Custom Commands (Multi-CLI Support)

When you run npx -p stitch-mcp-auto stitch-mcp-auto-setup, the setup wizard automatically installs custom commands for all major AI CLI tools - Claude Code, Gemini CLI, and Codex CLI.

Supported CLIs

Available Commands

Usage Examples

Claude Code:

/design login page dark mode
/design-system settings page
/design-flow onboarding: welcome -> signup -> complete

Gemini CLI:

/stitch:design login page dark mode
/stitch:design-system settings page
/stitch:design-flow onboarding: welcome -> signup -> complete

Codex CLI:

$stitch-design login page dark mode
$stitch-design-system settings page
$stitch-design-flow onboarding: welcome -> signup -> complete

Commands Installation Location

Commands are automatically installed to all CLI directories:

~/.claude/commands/          # Claude Code (Markdown)
├── design.md
├── design-system.md
├── design-flow.md
├── design-qa.md
└── design-export.md

~/.gemini/commands/stitch/   # Gemini CLI (TOML)
├── design.toml
├── design-system.toml
├── design-flow.toml
├── design-qa.toml
└── design-export.toml

~/.codex/skills/stitch/      # Codex CLI (Skills)
├── design.md
├── design-system.md
├── design-flow.md
├── design-qa.md
└── design-export.md

Usage Examples

Create a New Project

Create a new Stitch project called "My App"

Generate a Screen

Generate a login page with email and password fields,
a "Forgot Password" link, and social login buttons for Google and Apple.
Use a modern gradient background.

Generate with Specific Style

Create a dashboard screen with:
- Dark theme
- Sidebar navigation
- 4 stat cards at the top
- A line chart showing weekly data
- A recent activity list

Multi-language Support

Create a Korean e-commerce product detail page with:
- Product image carousel
- Price and discount badge
- Size selector
- Add to cart button
- Customer reviews section

The "Designer Flow"

For consistent UI across multiple screens:

1. Extract context from existing screen:

   Get the design context from the Home Screen in project X
   

2. Generate new screen with same style:

   Using that design context, generate a Settings screen
   with the same visual style
   

Using Design Tokens

Export design tokens for your development workflow:

Generate CSS variables from the dashboard screen's design

Create a Tailwind config based on the home screen

Trending Design Generation

Apply modern UI/UX trends automatically:

Create a pricing page with glassmorphism and gradient-mesh effects

Design a dashboard using bento-grid layout and dark mode

Batch Screen Generation

Create multiple screens at once with consistent styling:

Generate a complete onboarding flow: welcome, features, signup, and confirmation screens

Accessibility Check

Ensure your designs are accessible:

Check the login page for WCAG AA compliance

Design System Export

Export for developer handoff:

Export the complete design system from this project including tokens and components

Troubleshooting

"gcloud: command not found"

Linux/macOS/WSL:

export PATH="$HOME/google-cloud-sdk/bin:$PATH"
echo 'export PATH="$HOME/google-cloud-sdk/bin:$PATH"' >> ~/.bashrc

Windows: Restart your terminal after installing gcloud.

"Stitch API has not been used in project" Error

Enable the API manually:

gcloud services enable stitch.googleapis.com --project=YOUR_PROJECT_ID

Or visit: https://console.cloud.google.com/apis/library/stitch.googleapis.com?project=YOUR_PROJECT_ID

Token Expired / Authentication Error

Refresh your authentication:

gcloud auth login

Or re-run the setup:

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

"Connection Refused" After Google Login

This is normal behavior. After Google authentication completes, the browser redirects to localhost:8085 which is a temporary callback server that gcloud uses. Once authentication is complete, this server closes.

Solution: Simply close this tab and return to the setup page. It will automatically detect your login.

Browser Doesn't Open Automatically (WSL)

If the browser doesn't open automatically in WSL:

1. Copy the URL shown in the terminal
2. Paste it in your Windows browser manually
3. Complete the login
4. Return to the setup page

Full Reset

If something goes wrong, reset everything:

# Remove stitch-mcp-auto config
rm -rf ~/.stitch-mcp-auto

# Revoke gcloud credentials
gcloud auth revoke --all

# Re-run setup
npx -p stitch-mcp-auto stitch-mcp-auto-setup

Architecture

┌──────────────────────────────────────────────────────────────┐
│                        User Request                          │
│              "Create a login page with..."                   │
└──────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌──────────────────────────────────────────────────────────────┐
│                    AI Editor (Claude/Cursor)                 │
│                         MCP Client                           │
└──────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌──────────────────────────────────────────────────────────────┐
│                     stitch-mcp-auto                          │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐           │
│  │ setup.js    │  │ index.js    │  │ auth.js     │           │
│  │ (Auto Setup)│  │ (MCP Server)│  │ (OAuth)     │           │
│  └─────────────┘  └─────────────┘  └─────────────┘           │
└──────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌──────────────────────────────────────────────────────────────┐
│                    Google Cloud Platform                     │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐           │
│  │ gcloud CLI  │  │ OAuth 2.0   │  │ Stitch API  │           │
│  │ (Auth)      │  │ (Token)     │  │ (UI Gen)    │           │
│  └─────────────┘  └─────────────┘  └─────────────┘           │
└──────────────────────────────────────────────────────────────┘

File Structure

stitch-mcp-auto/
├── index.js          # Main MCP server
├── setup.js          # Web-based auto setup wizard
├── auth.js           # OAuth helper utilities
├── package.json      # Dependencies and scripts
├── README.md         # This documentation
└── skills/           # Claude Code Skills
    ├── design.md
    ├── design-system.md
    ├── design-flow.md
    ├── design-qa.md
    └── design-export.md

Configuration Files

Scripts

Requirements

• Node.js: 18.0.0 or higher
• Google Cloud CLI: Latest version
• Google Account: With access to Google Cloud Console
• MCP Client: Claude Desktop, Claude Code, Cursor, or compatible editor

License

Apache 2.0 - Open source and free to use.

Credits

• Author: Wongil Seo
• Based on: stitch-mcp by Kargatharaakash
• Concept: Automated implementation of the MCP (Model Context Protocol) file stitching system.

Support

• Issues: GitHub Issues
• Documentation: Google Stitch API

Built with love for the AI community