Google Stitch MCP

Universal MCP Server for Google Stitch. Connect AI agents to your UI designs.

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

Stitch Flowchart

✨ 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

Tool Name	What it does
`extract_design_context`	🧠 Scans a screen to extract "Design DNA" (Fonts, Colors, Layouts). Use this to keep style consistent.
`fetch_screen_code`	💾 Downloads the raw HTML/Frontend code of a screen.
`fetch_screen_image`	🖼️ Downloads the high-res screenshot of a screen.
`generate_screen_from_text`	✨ Generates a NEW screen based on your prompt (and context).
`create_project`	📁 Creates a new workspace/project folder.
`list_projects`	📋 Lists all your available Stitch projects.
`list_screens`	📱 Lists all screens within a specific project.
`get_project`	🔍 Retrieves details of a specific project.
`get_screen`	ℹ️ 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

相关服务器

Kone.vc

赞助

Monetize your AI agent with contextual product recommendations

MCPMate

MCPMate is a comprehensive Model Context Protocol (MCP) management center designed to address configuration complexity, resource consumption, security risks, and other issues in the MCP ecosystem, providing users with a unified management platform.

HubSpot MCP Server

Integrate with HubSpot CRM to manage contacts, deals, and companies.

MCP Sharepoint (aisuru)

A Model Context Protocol (MCP) server that exposes core Microsoft SharePoint / Microsoft Graph API functionalities as tools usable by LLM agents (e.g. Claude Desktop).

MCP Hub

A manager server for MCP servers that handles process management and tool routing.

Sheet-Cello

A specialized Google Sheets integration server that allows the LLM to read, write, and manage spreadsheet data in real-time. This server supports cell-level manipulation, bulk range updates, and full worksheet retrieval, enabling the model to perform data analysis, logging, and automated reporting directly within Google Worksheets.If you have functions which take range value then first read the sheet and decide where user is asking to add data and define range by your own.Provides 46 tools for Gsheet

repo-graph

Structural graph map of any codebase. LLM queries the graph instead of grepping through everything. 13 languages, auto-detected flows, cross-stack linking. Zero deps.

Trello

Interact with Trello boards, lists, and cards using the Trello REST API.

site-audit-mcp

PageSpeed, WHOIS, DNS, SSL checks, and site health analysis for AI agents. 6 tools, free, no API key.

YNAB (You Need A Budget)

An MCP server for YNAB (https://www.ynab.com/), exposing 20 tools for querying and managing your budget through any MCP-compatible client (Claude Desktop, etc.).

WxO Agent MCP

Simple MCP (Model Context Protocol) server that invokes a single Watson Orchestrate agent remotely. The agent is defined once via environment variables or MCP config. Use this when you want a lightweight MCP that only chats with one agent—no tool management, no agent listing, no flows. Just invoke_agent(message) and get_agent().