Skip to main content
Glama

Stitch MCP

npm version License: MIT 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

Related MCP server: Stitch MCP Auto

✨ 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:

  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

A
license - permissive license
-
quality - not tested
C
maintenance

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Servers

  • A
    license
    -
    quality
    -
    maintenance
    An automated MCP server for Google Stitch that enables AI-driven UI design generation, screen management, and design system extraction. It provides 19 professional tools for creating consistent web interfaces, conducting accessibility audits, and exporting design tokens.
  • A
    license
    -
    quality
    D
    maintenance
    An automated MCP server for Google Stitch that enables AI-driven UI design generation, accessibility audits, and design system management. It streamlines workflows for creating responsive screens, extracting design tokens, and maintaining visual consistency across professional web projects.
    81
    31
    Apache 2.0
  • A
    license
    A
    quality
    D
    maintenance
    An intelligent MCP server for Google Stitch that generates production-ready UI from text prompts, with auto-orchestration of design systems, WCAG accessibility, responsive breakpoints, and framework conversion (React, Vue, Svelte).
    17
    16
    8
    MIT

View all related MCP servers

Related MCP Connectors

  • MCP server for Google Veo AI video generation

  • MCP server connecting AI agents to non-custodial staking data across 130+ networks.

  • MCP server for Flux AI image generation

View all MCP Connectors

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/Kargatharaakash/stitch-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server