@keeponfirst/kof-stitch-mcp

Part of KOF Agentic Workflow - A complete agentic workflow for building modern applications. Check out the full workflow if you're interested in how this tool fits into the bigger picture.

☕ Support this project

If this project helps you, you can support development here:

👉 https://buymeacoffee.com/keeponfirst

default-yellow - Kof Stitch MCP by keeponfirst

MCP (Model Context Protocol) Server for Google Stitch - AI-powered UI/UX design tool.

Works with Claude Code, Cursor, and any MCP-compatible client.

Why This Package?

Google Stitch provides an official MCP endpoint at stitch.googleapis.com/mcp, but it requires:

Dynamic OAuth tokens from Google Cloud ADC
Proper authentication headers

Most MCP clients (Claude Code, Cursor) don't support Google's google_credentials auth type natively. This package wraps the official API as a stdio MCP server that handles authentication automatically.

Your MCP Client → kof-stitch-mcp → Google Stitch API
     (stdio)         (handles auth)      (HTTP)

Features

Official Stitch Tools (via Google API)

list_projects - List all your Stitch projects
get_project - Get project details
create_project - Create a new project
list_screens - List screens in a project
get_screen - Get screen details
generate_screen_from_text - Generate UI design from text prompt

Additional Tools (by this package)

fetch_screen_code - Download screen HTML code directly
fetch_screen_image - Download screen screenshot as PNG
export_project - NEW Batch export all screens (HTML + PNG) with manifest

Prerequisites

Node.js 18+

Google Cloud CLI with Application Default Credentials:

# Install gcloud: https://cloud.google.com/sdk/docs/install

# Login
gcloud auth application-default login

# Set project
gcloud config set project YOUR_PROJECT_ID

Enable Stitch MCP API:

gcloud beta services mcp enable stitch.googleapis.com --project=YOUR_PROJECT_ID

Installation

Option 1: npx (Recommended)

No installation needed. Configure directly in your MCP client.

Option 2: Global Install

npm install -g @keeponfirst/kof-stitch-mcp

Option 3: Local Install

npm install @keeponfirst/kof-stitch-mcp

Configuration

Claude Code

Create .mcp.json in your project root:

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "@keeponfirst/kof-stitch-mcp"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "your-project-id"
      }
    }
  }
}

Or add via CLI:

claude mcp add stitch --command "npx" --args "-y" "@keeponfirst/kof-stitch-mcp" \
  --env GOOGLE_CLOUD_PROJECT=your-project-id

Cursor

Add to Cursor MCP settings:

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "@keeponfirst/kof-stitch-mcp"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "your-project-id"
      }
    }
  }
}

Other MCP Clients

Any client supporting stdio MCP servers can use:

GOOGLE_CLOUD_PROJECT=your-project-id npx @keeponfirst/kof-stitch-mcp

Usage Examples

After configuration, you can use natural language in your MCP client:

"List my Stitch projects"
→ Uses list_projects tool

"Generate a mobile login screen with email and social login"
→ Uses generate_screen_from_text tool

"Download the HTML code for screen abc123 in project xyz789"
→ Uses fetch_screen_code tool

Environment Variables

| Variable | Required | Description | |----------|----------|-------------| | GOOGLE_CLOUD_PROJECT | Yes | Your Google Cloud Project ID | | GCLOUD_PROJECT | Alt | Alternative to GOOGLE_CLOUD_PROJECT |

Troubleshooting

"gcloud CLI not found"

Install Google Cloud SDK: https://cloud.google.com/sdk/docs/install

"Your default credentials were not found"

gcloud auth application-default login

"Stitch API has not been used in project"

Enable the MCP API:

gcloud beta services mcp enable stitch.googleapis.com --project=YOUR_PROJECT_ID

"Permission denied"

Ensure your account has the required role:

gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
  --member="user:your-email@gmail.com" \
  --role="roles/serviceusage.serviceUsageConsumer"

How It Works

On startup, the server verifies gcloud authentication
For each MCP tool call:
- Gets fresh OAuth token via gcloud auth application-default print-access-token
- Calls https://stitch.googleapis.com/mcp with proper headers
- Returns result to MCP client

Google Stitch - Official Stitch web app
Stitch MCP Docs - Official documentation
MCP Protocol - Model Context Protocol spec
KeepOnFirst Agentic Workflow - Workflow starter using this package

MCP Servers