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 "Deploy 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 MCP extract 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.
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.
Related MCP server: Stitch MCP Auto
Zero Config: Just login once and it works everywhere.
Universal: Works on Windows, Mac, and Linux.
Free: Google Stitch API is free to use.
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.comThis gives stitch-mcp permission to talk to Google on your behalf.
gcloud auth application-default loginCopy 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"
}
}
}
}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. |
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.
Apache 2.0 - Open source and free to use.
Built with โค๏ธ by Aakash Kargathara
This server cannot be deployed
The Figma MCP server brings Figma design context directly into your AI workflow.
The Google GKE MCP server is a managed Model Context Protocol server that provides AI applications with tools to manage Google Kubernetes Engine (GKE) clusters and Kubernetes resources. It exposes a structured, discoverable interface that allows AI agents to interact with GKE and Kubernetes APIs, enabling them to inspect cluster configurations, retrieve Kubernetes resource YAMLs, monitor operations like cluster upgrades, diagnose issues, and optimize costsโall without needing to parse text output or use complex kubectl commands.
MCP server for Google Veo AI video generation
The Google Maps MCP server is a fully-managed server provided by the Maps Grounding Lite API that connects AI applications to Google Maps Platform services. It provides three main tools for building LLM applications: searching for places, looking up weather information, and computing routes with details like distance and travel time. The server acts as a proxy that translates Google Maps data into a format that AI applications can understand, enabling agents to accurately answer real-world location and travel queries.
