Provides integration with Google Stitch to automate web design tasks such as creating screens from text prompts, analyzing accessibility compliance, and exporting design systems.
Allows for the management and activation of the Stitch API within Google Cloud projects, providing tools for automated UI design generation and project container management.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Auto Stitch MCPDesign a modern landing page for a coffee shop with a hero section and menu"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Auto Stitch MCP
Just let AI handle everything. - AI에게 모든 걸 맡기세요.
💡 Just share this link with your AI: https://github.com/GreenSheep01201/auto-stitch-mcp
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 (v1.1.0) - Auto-detects system language (English/Korean) for setup wizard and console messages
Table of Contents
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)
Download from Google Cloud SDK
Run the installer (check "Run gcloud init" option)
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:
Open a web-based setup page at
http://localhost:51121Guide you through Google login
Help you select or create a project
Enable the Stitch API
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:51121in their Windows browser.
Manual Installation (Alternative)
Step 1: Run Auto Setup
Or if you cloned the repository:
Setup Process
Welcome Page - Click "Login with Google" button
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
Project Selection - Choose an existing project or create a new one
API Activation - Click the button to enable Stitch API
Wait for activation (may take a few seconds)
Complete - Copy the MCP configuration to your editor
⚠️ WSL Users - IMPORTANT: WSL cannot open browsers directly. When the setup wizard starts:
Copy the URL
http://localhost:51121Open it manually in your Windows browser (Chrome, Edge, etc.)
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
Create .mcp.json in your project root:
Cursor
Go to Settings > MCP > Add New Server and add:
Command:
npxArgs:
-y auto-stitch-mcpEnvironment:
GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID
Available Tools
Core Stitch API Tools
Tool | Description |
| Creates a new Stitch project. A project is a container for UI designs and frontend code. |
| Retrieves the details of a specific Stitch project using its project name. |
| Lists all Stitch projects accessible to the user. By default, it lists projects owned by the user. |
| Lists all screens within a given Stitch project. |
| Retrieves the details of a specific screen within a project. |
| Generates a new screen within a project from a text prompt. |
| Retrieves the actual HTML/Code content of a screen. |
| Retrieves the screenshot/preview image of a screen. |
🎨 Professional Web Design Tools (v3.0+)
Design Consistency Tools
Tool | Description |
| Extracts design DNA (colors, typography, spacing, components) from an existing screen for visual consistency across multiple screens. |
| Generates a new screen using a previously extracted design context to maintain visual consistency. |
| Compares two screens to identify design differences, inconsistencies, and suggest harmonization. |
Productivity Tools
Tool | Description |
| Generates design tokens (CSS variables, Tailwind config, SCSS, JSON) from a screen's design. |
| Creates responsive variants of an existing screen for different device types. |
| Generates multiple related screens in a single operation with consistent design. |
Quality & Analysis Tools
Tool | Description |
| Analyzes a screen for WCAG 2.1 accessibility compliance with actionable recommendations. |
| Extracts reusable UI component patterns (buttons, cards, forms) with their styles. |
Design Enhancement Tools
Tool | Description |
| Applies 2024-2025 UI trends (glassmorphism, bento-grid, gradient-mesh, etc.) to screen generation. |
| Generates a comprehensive style guide/design documentation from an existing design. |
| Exports a complete design system package (tokens, components, docs) for developer handoff. |
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.
Prompt | Description |
| Smart UI design generation with automatic style detection |
| Create new screens while maintaining design consistency |
| Generate multiple screens for complete user flows |
| Accessibility (WCAG 2.1) and design quality checks |
| Export design system packages for developer handoff |
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 auto-stitch-mcp auto-stitch-mcp-setup, the setup wizard automatically installs custom commands for all major AI CLI tools - Claude Code, Gemini CLI, and Codex CLI.
Supported CLIs
CLI | Command Format | Installation Path |
Claude Code |
|
|
Gemini CLI |
|
|
Codex CLI |
|
|
Available Commands
Command | Claude Code | Gemini CLI | Codex CLI | Description |
design |
|
|
| Smart UI design generation |
design-system |
|
|
| Maintain design consistency |
design-flow |
|
|
| Generate user flows |
design-qa |
|
|
| Accessibility & quality checks |
design-export |
|
|
| Export design system |
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:
Extract context from existing screen:
Get the design context from the Home Screen in project XGenerate 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:
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:
Copy the URL shown in the terminal
Paste it in your Windows browser manually
Complete the login
Return to the setup page
Full Reset
If something goes wrong, reset everything:
Architecture
File Structure
Configuration Files
File/Directory | Location | Purpose |
|
| OAuth access tokens |
|
| Project settings |
|
| Claude Code Commands (auto-installed) |
|
| Gemini CLI Commands (auto-installed) |
|
| Codex CLI Skills (auto-installed) |
Scripts
Command | Description |
| Run interactive setup wizard |
| Start MCP server (used by editors) |
| Check authentication status |
| Manual login |
| Clear saved tokens |
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: greensheep01201 (Seo Won-gil)
Support
Issues: GitHub Issues
Documentation: Google Stitch API
Built with love for the AI community