stitch-setup

Stitch, Figma & NanoBanana MCP Setup

Help the user install and configure Google Stitch, Figma, and NanoBanana MCP servers for Claude Code.

Usage

• /stitch-setup or /stitch-setup all — Set up all three MCP servers (Stitch, Figma, NanoBanana)
• /stitch-setup stitch — Set up Stitch MCP only
• /stitch-setup figma — Set up Figma MCP only
• /stitch-setup nanobanana — Set up NanoBanana MCP only

Important: API Key Security

WARNING: API keys and access tokens are sensitive credentials. Follow these rules:

• NEVER commit API keys to git. Add .env to .gitignore.
• NEVER hardcode tokens directly in .mcp.json if the project is public.
• Use environment variables or .env files for token storage.
• Rotate tokens immediately if accidentally exposed.
• Use the minimum required permissions when generating tokens.

Setup Process

Google Stitch MCP

Stitch uses Google Cloud API key authentication via the official Google Stitch MCP server (HTTP type).

Step 1: Get a Google Cloud API Key

1. Go to Google Cloud Console
2. Create or select a project
3. Navigate to APIs & Services → Credentials
4. Click + CREATE CREDENTIALS → API key
5. (Recommended) Click Edit API key to restrict it:
   • Application restrictions: Set by HTTP referrer or IP
   • API restrictions: Restrict to Stitch/Generative AI APIs only
6. Copy the API key

Step 2: Configure Stitch MCP

Option A: Using environment variable (recommended for public repos)

Create a .env file in your project root (make sure it's in .gitignore):

GOOGLE_API_KEY=your-api-key-here

Add to .mcp.json:

{
  "stitch": {
    "type": "http",
    "url": "https://stitch.googleapis.com/mcp",
    "headers": {
      "X-Goog-Api-Key": "your-api-key-here"
    }
  }
}

Or using environment variable:

{
  "stitch": {
    "type": "http",
    "url": "https://stitch.googleapis.com/mcp",
    "headers": {
      "X-Goog-Api-Key": "${GOOGLE_API_KEY}"
    }
  }
}