Stitch MCP Auto 🎨

English | 한국어

One command. Instant UI. The most automated MCP server for Google Stitch.

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

Why stitch-mcp-auto?

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 Custom Tools + Stitch Core - Design generation, accessibility checks, tokens, responsive variants, and design system export

• 7 Workflow Commands - /design, /design-system, /design-flow, /design-qa, /design-export, /generate-asset, /design-full

• 🎨 AI Image Generation - Generate logos, icons, hero images via Gemini 3 Pro (uses Antigravity - Google's experimental image generation API)

• 🎭 Orchestration Mode - One prompt to generate assets + complete UI design

• 🌐 i18n Support - Auto-detects system language (English/Korean) for setup wizard and console messages

Table of Contents

• Why stitch-mcp-auto?

• Prerequisites (Install These First)

  • 1. Install Node.js (v18 or higher)

  • 2. Install Google Cloud CLI (gcloud)

• Quick Start

• AI Agent Quick Start (Semi-Automated)

• Manual Installation (Alternative)

  • Step 1: Run Auto Setup

  • Step 3: Configure MCP Client

• Available Tools

  • Automatic Project Management (NEW)

  • Core Stitch Tools (API + convenience wrappers)

  • Professional Web Design Tools

    • Design Consistency Tools

    • Productivity Tools

    • Quality & Analysis Tools

    • Design Enhancement Tools

  • AI Image Generation Tools (v1.1.0)

    • Supported Models for Image Generation

    • Background Removal (NEW)

• MCP Prompts (Auto-Discovered)

• Custom Commands (Multi-CLI Support)

  • Supported CLIs

  • Available Commands

  • CLI Usage Examples

  • Commands Installation Location

• Usage Examples

  • Create a New Project

  • Generate a Screen

  • Generate with Specific Style

  • Multi-language Support

  • The "Designer Flow"

  • Using Design Tokens

  • Trending Design Generation

  • Batch Screen Generation

  • Accessibility Check

  • Design System Export

  • AI Image Generation (NEW in v1.1.0)

  • Full Design Orchestration (NEW in v1.1.0)

• Troubleshooting

  • "gcloud: command not found"

  • "Stitch API has not been used in project" Error

  • Token Expired / Authentication Error

  • "Connection Refused" After Google Login

  • Browser Doesn't Open Automatically (WSL)

  • Full Reset

• Architecture

  • File Structure

  • Configuration Files

• Scripts

• Requirements

• Security Note

• License

• Credits

• Support

Prerequisites (Install These First)

1. Install Node.js (v18 or higher)

Windows

macOS

Linux / WSL

Verify Node.js installation:

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

macOS

Linux / WSL

Verify gcloud installation:

Quick Start

After installing Node.js and gcloud CLI:

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

Note: When starting the MCP server directly (npx stitch-mcp-auto or via your editor), the setup wizard runs on http://localhost:8086.

🤖 AI Agent Note (WSL Environment): If running in WSL, the browser cannot open automatically. Open the URL shown in the terminal (usually http://localhost:51121 for setup.js, or http://localhost:8086 when the MCP server starts) in your Windows browser:

# Run this in PowerShell (not WSL terminal) Start-Process "http://localhost:51121" # If you see 8086 instead: Start-Process "http://localhost:8086"

Or instruct the user to manually open the shown URL in their Windows browser.

AI Agent Quick Start (Semi-Automated)

This repo supports semi-automated setup with a few unavoidable manual steps (OAuth login).

Checklist (agent-friendly):

1. Run setup: npm run setup (or npx -p stitch-mcp-auto stitch-mcp-auto-setup)

2. Open the URL shown in terminal (usually http://localhost:51121)

3. Complete Google login in the browser (gcloud + Stitch API enable)

4. ⚠️ CRITICAL: Verify MCP registration (see below)

5. Start server: npm start or let the editor launch it

Manual-only steps:

• Browser OAuth consent (Google login)

• WSL browser opening (must open URL manually)

Environment-specific commands:

• Windows (PowerShell):

  • Open setup URL: Start-Process "http://localhost:51121" (or http://localhost:8086)

• macOS:

  • Open setup URL: open "http://localhost:51121" (or http://localhost:8086)

• Linux:

  • Open setup URL: xdg-open "http://localhost:51121" (or http://localhost:8086)

• WSL (Windows host):

  • Run in Windows PowerShell: Start-Process "http://localhost:51121"

⚠️ Post-Installation MCP Verification (REQUIRED)

After setup completes, always verify that the MCP server is registered:

If , manually register:

Why verification is needed: The setup wizard writes directly to config files (~/.claude.json, ~/.gemini/settings.json, ~/.codex/config.toml), but verification ensures the configuration is correct. Always verify to avoid "MCP server not found" errors.

Other Verification (optional):

• node auth.js --status (shows token + project status)

• npm start (server boots and prints "Ready")

Manual Installation (Alternative)

Step 1: Run Auto Setup

Or if you cloned the repository:

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

Claude Code

🌐 Method 1: CLI Command (Recommended)

The setup wizard automatically writes to ~/.claude.json. To add manually via CLI:

Or edit ~/.claude.json directly:

📁 Method 2: Per-project Settings

Create .mcp.json in your project root:

Gemini CLI

🌐 Method 1: CLI Command (Recommended)

Or edit ~/.gemini/settings.json directly:

Codex CLI

🌐 Method 1: CLI Command (Recommended)

Or edit ~/.codex/config.toml directly:

Cursor

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

• Command: npx

• Args: -y stitch-mcp-auto

• Environment: GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID

Optional: GOOGLE_CLOUD_PROJECT is only used for Stitch image fallback and auth.js --status. The setup wizard stores the active project in ~/.stitch-mcp-auto/config.json, and workspace tools save .stitch-project.json in your current folder.

Available Tools

🔄 Automatic Project Management (NEW)

No more manual projectId passing! The server automatically manages project context:

1. Auto-detection: When you call tools like generate_screen_from_text without projectId, it automatically uses the workspace project

2. Auto-save: When you create_project, it's automatically saved to .stitch-project.json in your current folder

3. Session continuity: Return to the same folder later, and your project is automatically loaded

How it works:

Manual workspace tools (optional):

Core Stitch Tools (API + convenience wrappers)

🎨 Professional Web Design Tools

Design Consistency Tools

Productivity Tools

Quality & Analysis Tools

Design Enhancement Tools

🎨 AI Image Generation Tools (v1.1.0)

These tools have different authentication requirements:

Supported Models for Image Generation

See also: ANTIGRAVITY-MODELS.md (EN) / ANTIGRAVITY-MODELS.ko.md (KO) for the full model list, thinking variants, and endpoint details.

💡 Model Selection: You can specify a model when calling generate_design_asset:

{ "assetType": "logo", "prompt": "Modern tech company logo", "model": "gemini-3-pro" }

Key parameters (

• assetType: logo, icon, illustration, hero, wireframe, background, pattern

• aspectRatio: 1:1, 16:9, 9:16, 4:3, 3:4

• saveToFile: true by default (saves to current directory)

• forceAntigravityAuth: true to trigger browser login

📋 Role Separation:

• Stitch API (gcloud auth): UI page/screen generation - available to all users

• Antigravity OAuth: Image asset generation (logo, icon, hero) - requires separate authentication

Stitch-only users can still create complete UI pages using generate_screen_from_text. Antigravity extends this with custom AI-generated assets.

🔲 Background Removal (NEW)

generate_design_asset supports automatic background removal for transparent assets:

Example:

This produces a transparent PNG, ideal for:

• Logos - No white border when placed on colored backgrounds

• Icons - Clean integration into UI designs

• Illustrations - Seamless overlay on any background

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:

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

CLI Usage Examples

Claude Code:

Gemini CLI:

Codex CLI:

Commands Installation Location

Commands are automatically installed to all CLI directories:

Usage Examples

Create a New Project

Generate a Screen

Generate with Specific Style

Multi-language Support

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:

Trending Design Generation

Apply modern UI/UX trends automatically:

Batch Screen Generation

Create multiple screens at once with consistent styling:

Accessibility Check

Ensure your designs are accessible:

Design System Export

Export for developer handoff:

AI Image Generation (NEW in v1.1.0)

Generate design assets with AI:

Full Design Orchestration (NEW in v1.1.0)

One prompt to complete design - automatically generates assets and creates UI:

Note: The orchestration mode automatically:

1. Analyzes required assets (logo, hero, icons)

2. Generates each asset using Gemini 3 Pro (requires Antigravity auth)

3. Creates complete UI screen with Stitch API

4. Returns all assets + final UI in one response

Without Antigravity auth: UI screen is still generated, but without custom image assets.

Troubleshooting

"gcloud: command not found"

Linux/macOS/WSL:

Windows: Restart your terminal after installing gcloud.

"Stitch API has not been used in project" Error

Enable the API manually:

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

Token Expired / Authentication Error

Refresh your authentication:

Or re-run the 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:

Architecture

📋 Role Separation:

• Stitch API (gcloud): Handles all UI page/screen generation

• Antigravity OAuth: Handles image asset generation (logo, icon, hero images)

Without Antigravity authentication, generate_design_asset will return an error. Use Stitch's generate_screen_from_text for UI pages.

File Structure

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

Security Note

This project uses Google's public OAuth client for authentication. Client IDs visible in the source code are intentionally public (Desktop App type per OAuth 2.0 spec). Your tokens are stored locally in ~/.stitch-mcp-auto/ and never transmitted to third parties.

License

Apache 2.0 - Open source and free to use.

Credits

• Author: GreenSheep01201 (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