stitch -auto

Stitch MCP Auto is a turnkey MCP server that streamlines Google Stitch integration with an automated setup wizard and a comprehensive design/workflow toolkit. It installs required cloud and Stitch API dependencies, configures authentication, enables the Stitch API, and registers the MCP client so you can start generating UI design assets with minimal manual steps. The server exposes a set of built-in tools and workflows, including design generation, design system export, accessibility checks, and AI-assisted image generation via Gemini 3 Pro. You can interact with these capabilities through the provided command-line entry point (npx stitch-mcp-auto) which launches a Web-based wizard to set up your Google Cloud project and Stitch API access, and then uses a unified CLI/UI to drive the various workflows.

Prerequisites:

• Node.js v18 or higher
• npm (comes with Node.js)
• Google Cloud CLI (gcloud) installed and authenticated

Install and run the auto-setup:

1. Install Node.js (v18+):

# Windows (PowerShell)
https://nodejs.org/

2. Install Google Cloud CLI (gcloud) following your OS instructions:

• Windows: https://cloud.google.com/sdk/docs/install
• macOS: brew install --cask google-cloud-sdk
• Linux/WSL: curl -sSL https://sdk.cloud.google.com | bash

3. Run the Stitch MCP Auto setup wizard:

npx stitch-mcp-auto-setup

4. After the setup wizard completes, start the MCP server:

npx stitch-mcp-auto

The wizard will open in your browser at http://localhost:51121 and guide you through Google login, project selection/creation, and enabling the Stitch API. When the MCP server starts, the UI will be available (default port 8086). If you’re running under WSL, use the instructions in the wizard’s notes to access the UI from Windows.

Notes and tips:

• The setup wizard handles Google Cloud authentication, project selection, and Stitch API enablement automatically.
• If you run the server directly, the setup wizard will still appear at http://localhost:51121 during setup, and the MCP UI will be accessible at http://localhost:8086 once the server is running.
• The MCP supports multiple CLIs/tools integration (Claude/Gemini/Codex) and includes 7 design/workflow commands, plus AI image generation through Gemini 3 Pro.
• If you encounter browser auto-launch issues under WSL, manually open the setup URL shown in the terminal (e.g., http://localhost:51121 or http://localhost:8086).
• You can customize the config by editing the mcp config file after initial setup if you have advanced wiring needs. If you provide a custom config path, set STITCH_MCP_AUTO_CONFIG accordingly.
• Environment variables can be used to tweak behavior (e.g., API endpoints, project IDs). Placeholder shown in the mcp_config section can be replaced with real values if needed.