# Setup Guide — Get Stitch MCP Running on Your Machine

A short, direct guide so you can test the `stitch-website-builder` skill end-to-end. Once you've done these steps once, you're set.

---

## What you need before starting

- A Google account that can sign in to Stitch (https://stitch.withgoogle.com)
- Node.js installed (check: `node --version`. If missing, install from https://nodejs.org)
- Claude Code installed (either standalone, or via the Cowork desktop app — both work the same way)

---

## The fast path (recommended)

Open a terminal and run:

```bash
npx -p stitch-mcp-auto stitch-mcp-auto-setup
```

The wizard will:
1. Detect or install `gcloud` (Google Cloud SDK)
2. Open a browser to log in via OAuth
3. Install `@_davideast/stitch-mcp` (the proxy)
4. Configure Claude Code to point at it

When it finishes, restart Claude Code (or restart Cowork). Then ask Claude:

> "List my Stitch projects."

If you see a list (even an empty one), the MCP is working.

---

## If the wizard fails

Walk through these manually:

### 1. Install gcloud

**Mac:**
```bash
brew install --cask google-cloud-sdk
```

**Windows:**
Download and run the installer from https://cloud.google.com/sdk/docs/install

**Linux:**
```bash
sudo apt-get install google-cloud-sdk
```

Verify: `gcloud --version`

### 2. Authenticate

```bash
gcloud auth application-default login
```

This opens a browser. Sign in with the Google account that has Stitch access.

### 3. Add the MCP to Claude Code's config

Find your Claude Code MCP config (one of):
- Mac: `~/Library/Application Support/Claude/mcp_servers.json`
- Linux: `~/.config/claude/mcp_servers.json`
- Windows: `%APPDATA%\Claude\mcp_servers.json`

Add this entry (merging with anything already there):

```json
{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"]
    }
  }
}
```

Restart Claude Code / Cowork. Test with: "List my Stitch projects."

---

## Then install the Mode B skills (only if you want to test Mode B)

```bash
npx skills add google-labs-code/stitch-skills --skill stitch-design --global
npx skills add google-labs-code/stitch-skills --skill stitch-loop --global
```

Verify: `npx skills list` — you should see both.

---

## Then install the stitch-website-builder skill

The skill folder is at `Claude x Stitch/stitch-website-builder/`. Copy it (or symlink it) into your Claude Code skills directory:

- Mac: `~/.claude/skills/stitch-website-builder/`
- Linux: `~/.config/claude/skills/stitch-website-builder/`
- Windows: `%APPDATA%\Claude\skills\stitch-website-builder\`

Restart Claude Code / Cowork. Then trigger it:

> "Redesign https://example.com using Stitch"

The skill should fire and walk you through onboarding.

---

## Common gotchas

- **"API keys not supported"** — you're on `stitch-mcp-server` (the wrong package). Use `@_davideast/stitch-mcp` instead.
- **"Invalid character 'd'"** — there's a `.env` file in the directory the proxy is starting from. Move or rename it.
- **MCP doesn't show up** — restart Claude Code completely (quit, not just close window).
- **OAuth keeps expiring** — re-run `gcloud auth application-default login`. Tokens last several hours, then need refresh.

---

## When you're set up, test the skill

Quick smoke test for both modes:

**Mode A:**
> "Use stitch-website-builder to redesign https://example.com — make it feel premium."

**Mode B:**
> "Use stitch-website-builder Premium mode to build a 4-page marketing site for a freelance designer."

If both flows complete and produce HTML files, the skill is working end-to-end.

---

## Sources

- Stitch web app: https://stitch.withgoogle.com
- `@_davideast/stitch-mcp`: https://github.com/davideast/stitch-mcp
- `stitch-mcp-auto`: https://github.com/GreenSheep01201/stitch-mcp-auto
- `google-labs-code/stitch-skills`: https://github.com/google-labs-code/stitch-skills
- `gemini-cli-extensions/stitch`: https://github.com/gemini-cli-extensions/stitch (the original Gemini extension, useful reference for the MCP's tool surface)