stitch

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.
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 (sign in with Google → account settings).

---

Install — 3 steps

1. Download this folder

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

cp .env.example .env

Then open .env in any text editor and replace your-stitch-api-key-here with your real key:

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:

npx skills add google-labs-code/stitch-skills --list

Install any of them globally:

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.