stitch-setup

stitch-kit Setup Guide

Walks users through two setup tasks:

1. Stitch MCP Server — connect your AI client to Google Stitch's remote generation API
2. stitch-kit Plugin — install the skills that orchestrate the Stitch workflow

---

When to use this skill

• User says "how do I set this up", "it's not working", "Stitch isn't available"
• Agent can't find Stitch MCP tools after running list_tools
• First-time setup in a new environment

---

Step 1: Verify what's already installed

Run list_tools (or check the tool list). Look for any of:

• create_project
• generate_screen_from_text
• get_screen

If found: Stitch MCP is working. Skip to Step 4 (plugin install). If not found: Continue with MCP setup below.

---

Step 2: Get a Stitch API Key

Stitch MCP is a remote HTTP server — it lives in the cloud at stitch.googleapis.com, not on your machine. It requires an API key to authenticate.

1. Go to stitch.withgoogle.com/settings
2. Scroll to the API Keys section
3. Click "Create API Key"
4. Copy the key — you'll need it in the next step

Never commit your API key to a public repository. Store it securely.

---

Step 3: Configure Stitch MCP

Claude Code

Using the CLI (recommended):

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp \
  --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

Or add to ~/.claude/settings.json manually:

{
  "mcpServers": {
    "stitch": {
      "type": "http",
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

Codex CLI

Add to ~/.codex/config.toml:

[mcp_servers.stitch]
url = "https://stitch.googleapis.com/mcp"

[mcp_servers.stitch.headers]
X-Goog-Api-Key = "YOUR-API-KEY"

Cursor

Create or edit .cursor/mcp.json:

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}