Provides tools to interact with Google Stitch via Google Cloud, enabling AI-powered UI/UX design generation, extraction of design styles and layouts, and programmatic management of design projects and screens.
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., "@Stitch MCPextract the design context from the Home screen and generate a matching profile page"
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.
Stitch MCP
Universal MCP Server for Google Stitch
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.com2. Install the Credentials
This gives stitch-mcp permission to talk to Google on your behalf.
gcloud auth application-default login3. 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
Tool Name | What it does |
| đ§ Scans a screen to extract "Design DNA" (Fonts, Colors, Layouts). Use this to keep style consistent. |
| đž Downloads the raw HTML/Frontend code of a screen. |
| đŧī¸ Downloads the high-res screenshot of a screen. |
| ⨠Generates a NEW screen based on your prompt (and context). |
| đ Creates a new workspace/project folder. |
| đ Lists all your available Stitch projects. |
| đą Lists all screens within a specific project. |
| đ Retrieves details of a specific project. |
| âšī¸ Gets metadata for a specific screen. |
đĄ Pro Tip: The "Designer Flow"
To generate consistent UI, use this 2-step flow:
Extract: "Get design context from the Home Screen..."
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
Built with â¤ī¸ by Aakash Kargathara
This server cannot be installed
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.