Stitch Mcp

Build amazing UI/UX designs instantly with AI. Works seamlessly with Cursor, Claude, Antigravity, and any MCP-compatible editor.

Created by Aakash Kargathara.

🚀 How It Works

✨ Why this is cool

• Zero Config: Just login once and it works everywhere.
• Universal: Works on Windows, Mac, and Linux.
• Free: Google Stitch API is free to use.

�️ Quick Setup (2 Minutes)

1. Prerequisite: Google Cloud

You need a Google Cloud project with the Stitch API enabled.

# Login to your Google Cloud
gcloud auth login

# Set your project (replace with your actual project ID)
gcloud config set project YOUR_PROJECT_ID
gcloud auth application-default set-quota-project YOUR_PROJECT_ID

# Enable the magic
gcloud beta services mcp enable stitch.googleapis.com

2. Install the Credentials

This gives stitch-mcp permission to talk to Google on your behalf.

gcloud auth application-default login

3. Add to Your AI Editor

Copy and paste this into your MCP config file:

For Claude Desktop: ~/Library/Application Support/Claude/claude_desktop_config.json

For Cursor: Settings > MCP > Add New Server

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

🛠️ Available Tools

💡 Pro Tip: The "Designer Flow"

To generate consistent UI, use this 2-step flow:

1. Extract: "Get design context from the Home Screen..."
2. Generate: "Using that context, generate a Chat Screen..."

This ensures your new screen matches your existing design system perfectly.

📄 License

Apache 2.0 - Open source and free to use.

Star History

Star History Chart

Built with ❤️ by Aakash Kargathara