claude-stitch-setup

# Stitch ↔ Claude Code — One-Click Setup Connect **Google Stitch** to **Claude Code** so you can design UI screens just by chatting. Ask Claude to "design a login page in dark mode with a sidebar" and watch it generate a real Stitch screen — HTML, screenshot, editable, all inside your terminal. --- ## What you get - **`stitch` MCP server** — exposes Stitch's tools (`generate_screen_from_text`, `edit_screens`, `get_screen`, variants, export) directly to Claude Code. - **`stitch-mcp` agent skill** — tells Claude how and when to use the tools, with design-system-aware workflow. - **Zero-config bootstrap** — dependencies install themselves on first run. --- ## Prerequisites You need these installed already: 1. **Node.js 20+** — check with `node --version`. If missing, get it from [nodejs.org](https://nodejs.org/). 2. **Claude Code** — the CLI. If missing: `npm install -g @anthropic-ai/claude-code` and run `claude`. 3. **A Stitch API key** — grab one from [stitch.withgoogle.com](https://stitch.withgoogle.com/) (sign in with Google → account settings). --- ## Install — 3 steps ### 1. Download this folder ```bash git clone https://github.com/devinilabs/claude-stitch-setup.git cd claude-stitch-setup ``` > Or download the ZIP and unzip it wherever you like. ### 2. Add your API key ```bash cp .env.example .env ``` Then open `.env` in any text editor and replace `your-stitch-api-key-here` with your real key: ```bash STITCH_API_KEY=stit_xxxxxxxxxxxxxxxxxxxx ``` ### 3. Install into Claude Code Open Claude Code in the folder and run: ``` /plugin install . ``` That's it. Claude Code auto-loads the MCP server and the skill. On the **first message**, you'll see a quick `npm install` — this is normal, happens once. --- ## Verify it works In Claude Code, type: ``` /mcp ``` You should see `stitch` with a ✓ next to it and a list of tools (`generate_screen_from_text`, `edit_screens`, etc.). Now try: > Design a modern pricing page with 3 tiers, dark mode, purple accents. Claude will call Stitch and return a screenshot + HTML link. --- ## Folder contents ``` claude-stitch-setup/ ├── .claude-plugin/ │ └── plugin.json # Plugin manifest ├── .mcp.json # MCP server config ├── bin/ │ ├── start.sh # Bootstrap (auto-installs deps, loads .env) │ └── stitch-mcp-server.mjs # The MCP server itself ├── skills/ │ └── stitch-mcp/ │ └── SKILL.md # Tells Claude how to use Stitch ├── package.json # Node dependencies ├── .env.example # Copy to .env and add your key ├── LICENSE # Apache-2.0 └── README.md # This file ``` --- ## Troubleshooting **"STITCH_API_KEY is not set"** → You skipped step 2. Copy `.env.example` to `.env` and paste your key. **`/mcp` shows `stitch` as failed / red** → Most common cause is a wrong key or a missing `.env`. Check the logs with `/mcp` → select `stitch` → View logs. **`/plugin install .` not recognized** → Update Claude Code: `npm update -g @anthropic-ai/claude-code`. Plugin support needs a recent version. **First run is slow** → That's the one-time `npm install`. After it finishes, subsequent starts are instant. **Want to uninstall** → `/plugin uninstall stitch` inside Claude Code, or delete the folder. --- ## Want more Stitch skills? This plugin ships with one skill (`stitch-mcp`). Google Labs publishes a whole library of additional skills — React conversion, Remotion video walkthroughs, shadcn/ui integration, and more: ```bash npx skills add google-labs-code/stitch-skills --list ``` Install any of them globally: ```bash npx skills add google-labs-code/stitch-skills --skill stitch-design --global ``` --- ## Resources - **Stitch** → https://stitch.withgoogle.com/ - **Stitch SDK (npm)** → https://www.npmjs.com/package/@google/stitch-sdk - **Stitch Skills repo** → https://github.com/google-labs-code/stitch-skills - **Claude Code docs** → https://code.claude.com/docs --- ## License Apache-2.0. Same as `@google/stitch-sdk`. Not an official Google product.