Stitch MCP Integration Package

A self-contained, reusable integration package for Google Stitch MCP (Model Context Protocol). This package provides automated setup, token management, and comprehensive tooling for integrating Stitch's UI design capabilities with Claude Code and other MCP clients.

Features

🚀 Automated Setup - Interactive script handles authentication, API enablement, and configuration
🔐 Dual Authentication - Supports both HTTP (token-based) and command-based (ADC) methods
🔄 Token Management - Fast token refresh with backup and validation
📦 Self-Contained - Copy to any project without modification
✅ Robust - Includes validation, error handling, and backup creation
📝 Well-Documented - Comprehensive guides and troubleshooting

What is Stitch MCP?

Google Stitch is a UI design tool integrated with Claude via the Model Context Protocol (MCP). It allows you to:

Generate UI mockups from text descriptions
Create design assets for web and mobile applications
Iterate on designs conversationally with Claude
Export designs to production-ready code

Quick Start

Prerequisites

gcloud CLI installed (Install guide)
Google Cloud Project with billing enabled
Node.js 20+ and npm

Installation

Install dependencies:

npm install chalk@^5.3.0 execa@^9.0.1 ora@^8.0.1 prompts@^2.4.2 ts-node@^10.9.2 @types/prompts@^2.4.9

Add npm scripts to package.json:

{
  "scripts": {
    "setup:stitch": "ts-node stitch-integration/scripts/setup.ts",
    "refresh:stitch-token": "ts-node stitch-integration/scripts/refresh-token.ts"
  }
}

Run setup:
```
npm run setup:stitch
```

The setup script will guide you through:

Google Cloud authentication
Choosing authentication method (HTTP or command-based)
Enabling the Stitch API
Generating access tokens (if using HTTP)
Configuring .env.local and .mcp.json

Restart your MCP client (Claude Code, IDE, etc.) to load the configuration

Usage

Token Refresh (HTTP Method Only)

Access tokens expire after ~1 hour. When your token expires, refresh it with:

npm run refresh:stitch-token

Then restart your MCP client to apply the new token.

Using Stitch with Claude

Once configured, you can use Stitch through Claude:

Generate a modern dashboard UI for a SaaS application

Create a mobile app login screen with social auth options

Claude will use the Stitch MCP server to generate designs and provide previews.

Authentication Methods

HTTP with Access Token (Recommended)

Pros:

✅ More reliable connection
✅ Easier to debug
✅ Direct HTTP communication
✅ Fast token refresh (~5 seconds)

Cons:

⚠️ Token expires after ~1 hour (easily refreshed)

How it works:

Uses Application Default Credentials to generate access tokens
Connects directly to https://stitch.googleapis.com/mcp
Token stored in .env.local and .mcp.json

Command-based with ADC

Pros:

✅ No token expiration
✅ Uses standard Application Default Credentials

Cons:

⚠️ May have connection issues
⚠️ Harder to debug
⚠️ Requires npx execution on each connection

How it works:

Spawns npx @google/genai-mcp-server command
Server uses Application Default Credentials
MCP client connects to local server process

Configuration Files

.env.local

GOOGLE_CLOUD_PROJECT=your-project-id
STITCH_AUTH_METHOD=http               # or 'command'
STITCH_ACCESS_TOKEN=ya29.a0...        # if http method

.mcp.json

Automatically configured by setup script. See templates/.mcp.json.example for manual configuration.

Scripts

setup.ts

Interactive setup wizard that:

Validates prerequisites (gcloud CLI)
Authenticates with Google Cloud
Enables Stitch API
Grants permissions
Generates access tokens (HTTP method)
Updates configuration files

Options:

--verbose - Show detailed output
--yes or -y - Auto-confirm all prompts

Example:

npm run setup:stitch -- --verbose

refresh-token.ts

Quickly refresh expired access token:

Generates new token
Validates token
Updates .env.local and .mcp.json
Creates backups

Options:

--verbose - Show detailed output

Example:

npm run refresh:stitch-token -- --verbose

Package Structure

stitch-integration/
├── README.md                # This file
├── SETUP.md                 # Integration guide for new projects
├── package.json             # Package metadata
├── tsconfig.json            # TypeScript configuration
├── .gitignore              # Git ignore rules
├── scripts/
│   ├── setup.ts            # Main setup script
│   ├── refresh-token.ts    # Token refresh utility
│   └── lib/
│       ├── env-manager.ts      # .env.local file management
│       ├── gcloud-auth.ts      # Google Cloud authentication
│       ├── mcp-config.ts       # .mcp.json configuration
│       ├── token-generator.ts  # Token generation & validation
│       └── validators.ts       # Prerequisite validation
├── docs/
│   └── troubleshooting.md  # Troubleshooting guide
├── templates/
│   ├── .env.example        # Environment template
│   └── .mcp.json.example   # MCP config examples
└── examples/
    ├── http-auth-example.md     # HTTP auth configuration
    └── command-auth-example.md  # Command auth configuration

Integrating into a New Project

See SETUP.md for detailed integration instructions.

Quick version:

Copy entire stitch-integration/ folder to your project
Install peer dependencies
Add npm scripts to your package.json
Run npm run setup:stitch

Troubleshooting

For common issues and solutions, see docs/troubleshooting.md.

Quick Fixes

Connection errors: npm run refresh:stitch-token (then restart client)
gcloud not found: Install from https://cloud.google.com/sdk/docs/install
API not enabled: Setup script enables it automatically
Permission denied: Setup script grants required roles

Dependencies

Peer Dependencies (required)

chalk@^5.3.0 - Terminal colors
execa@^9.0.1 - Process execution
ora@^8.0.1 - Loading spinners
prompts@^2.4.2 - Interactive prompts
ts-node@^10.9.2 - TypeScript execution
@types/prompts@^2.4.9 - Type definitions

System Dependencies

gcloud CLI
Node.js 20+
Active Google Cloud project with billing

Advanced Usage

Switching Authentication Methods

Run npm run setup:stitch and select a different method when prompted.

Multiple Projects

Run setup for each project, or manually update GOOGLE_CLOUD_PROJECT in .env.local.

Verbose Mode

For detailed debugging information:

npm run setup:stitch -- --verbose
npm run refresh:stitch-token -- --verbose

CI/CD Integration

For automated environments:

Use service account credentials
Set GOOGLE_APPLICATION_CREDENTIALS environment variable
Use command-based method (no token refresh needed)

Security

✅ .env.local is gitignored (never commit tokens)
✅ Backups created before file modifications
✅ Tokens masked in console output
✅ Validation ensures tokens work before saving
⚠️ Tokens expire after 1 hour (by design)

Support

Documentation: docs/troubleshooting.md
Verbose output: Add --verbose flag to any command
Backups: Check .env.local.backup.* and .mcp.json.backup.*
Google Cloud: console.cloud.google.com

License

MIT

MCP Servers