stitch-pro-mcp
The intelligent MCP server for Google Stitch.
Design systems. Accessibility. Responsive. React/Vue/Svelte. Auto-orchestration.
18 tools. One prompt.
Quick Start ·
Tools ·
Examples ·
Architecture
---
## The Problem
[Google Stitch](https://stitch.withgoogle.com) generates beautiful UI from text prompts. But it outputs **raw HTML** — no design system, no accessibility, no responsive breakpoints, no framework components.
Every existing Stitch MCP is a thin wrapper. Generate screen, get HTML, done.
**stitch-pro-mcp fills the gap between generation and production.**
| | Existing MCPs | stitch-pro-mcp |
|---|:---:|:---:|
| Generate screens | :white_check_mark: | :white_check_mark: |
| Design system enforcement | :x: | :white_check_mark: |
| WCAG 2.1 AA accessibility | :x: | :white_check_mark: |
| Responsive breakpoints | :x: | :white_check_mark: |
| React / Next.js output | :x: | :white_check_mark: |
| Vue 3 output | :x: | :white_check_mark: |
| SvelteKit output | :x: | :white_check_mark: |
| shadcn/radix/MUI mapping | :x: | :white_check_mark: |
| Multi-screen flows | :x: | :white_check_mark: |
| Auto-orchestration | :x: | :white_check_mark: |
## Quick Start
### 1. Get a Stitch API Key
Visit [stitch.withgoogle.com](https://stitch.withgoogle.com) and create an API key.
### 2. Install
```bash
# Run directly (no install)
npx stitch-pro-mcp
# Or install globally
npm install -g stitch-pro-mcp
```
### 3. Configure Your Editor
Claude Code
**Recommended (CLI):**
```bash
# Install globally first
npm install -g stitch-pro-mcp
# Add to Claude Code with API key
claude mcp add -e STITCH_API_KEY=your-api-key --transport stdio stitch-pro -- node $(npm root -g)/stitch-pro-mcp/dist/bin/cli.js
```
**Windows users:** Use the full path to the installed CLI:
```bash
claude mcp add -e STITCH_API_KEY=your-api-key --transport stdio stitch-pro -- node "C:/Users/YOUR_USER/AppData/Roaming/npm/node_modules/stitch-pro-mcp/dist/bin/cli.js"
```
> **Note:** MCP servers in Claude Code are configured in `~/.claude.json` (local scope), NOT in `~/.claude/settings.json`. Use `claude mcp add` to configure — it handles the correct file automatically.
Cursor
Add to `.cursor/mcp.json`:
```json
{
"mcpServers": {
"stitch-pro": {
"command": "npx",
"args": ["-y", "stitch-pro-mcp"],
"env": { "STITCH_API_KEY": "your-api-key" }
}
}
}
```
VS Code (Copilot)
Add to `.vscode/mcp.json`:
```json
{
"servers": {
"stitch-pro": {
"command": "npx",
"args": ["-y", "stitch-pro-mcp"],
"env": { "STITCH_API_KEY": "your-api-key" }
}
}
}
```
Windsurf
Add to `~/.codeium/windsurf/mcp_config.json`:
```json
{
"mcpServers": {
"stitch-pro": {
"command": "npx",
"args": ["-y", "stitch-pro-mcp"],
"env": { "STITCH_API_KEY": "your-api-key" }
}
}
}
```
Gemini CLI
Add to `~/.gemini/settings.json`:
```json
{
"mcpServers": {
"stitch-pro": {
"command": "npx",
"args": ["-y", "stitch-pro-mcp"],
"env": { "STITCH_API_KEY": "your-api-key" }
}
}
}
```
Codex (OpenAI)
Add to `~/.codex/config.json`:
```json
{
"mcpServers": {
"stitch-pro": {
"command": "npx",
"args": ["-y", "stitch-pro-mcp"],
"env": { "STITCH_API_KEY": "your-api-key" }
}
}
}
```
Antigravity
```json
{
"mcpServers": {
"stitch-pro": {
"command": "npx",
"args": ["-y", "stitch-pro-mcp"],
"env": { "STITCH_API_KEY": "your-api-key" }
}
}
}
```
OpenCode
```json
{
"mcpServers": {
"stitch-pro": {
"command": "npx",
"args": ["-y", "stitch-pro-mcp"],
"env": { "STITCH_API_KEY": "your-api-key" }
}
}
}
```
> **Tip:** Set `STITCH_API_KEY` as a system environment variable and omit the `env` block entirely.
### Troubleshooting
Windows: "Connection closed" or server not connecting
On Windows, `npx` doesn't work directly as an MCP command. Use one of these approaches:
**Option A: Install globally + use `node` with full path (recommended)**
```bash
npm install -g stitch-pro-mcp
# Then configure with absolute path to the CLI:
# node C:/Users/YOUR_USER/AppData/Roaming/npm/node_modules/stitch-pro-mcp/dist/bin/cli.js
```
**Option B: Wrap `npx` with `cmd /c`**
```json
{
"command": "cmd",
"args": ["/c", "npx", "-y", "stitch-pro-mcp"]
}
```
Claude Code: MCP server not showing tools
1. MCP servers are configured in `~/.claude.json`, **not** `~/.claude/settings.json` or `~/.claude/.mcp.json`
2. Use `claude mcp add` CLI command to configure — it writes to the correct file
3. After adding, **restart Claude Code** for tools to appear
4. Verify with: `claude mcp list` — should show `stitch-pro: ✓ Connected`
Server starts but tools don't respond
Check for double-start: if you see `"Starting stitch-pro"` logged twice, you're on v0.1.0 which had a bug where the server started twice. Update to v0.1.2+:
```bash
npm install -g stitch-pro-mcp@latest
```
---
## Tools
### Smart (Auto-Orchestration)
| Tool | What It Does |
|------|-------------|
| **`sp_auto`** | The god tool. Describe what you want in plain English — auto-detects framework, library, theme, device type, and chains everything: design system → generation → a11y → responsive → conversion. One call. |
| **`sp_analyze`** | Feed it any HTML. Returns accessibility issues, responsiveness gaps, component mapping potential, and a prioritized tool chain recommendation. |
| **`sp_smart_convert`** | Like `sp_to_react`/`sp_to_vue`/`sp_to_svelte`, but auto-runs a11y fixes and responsive injection first. No manual chaining. |
### Generation
| Tool | What It Does |
|------|-------------|
| `sp_generate` | Generate a UI page with full pipeline — design system, a11y, responsive, framework conversion |
| `sp_flow` | Generate multi-screen flows (login → dashboard → settings) in one call |
### Design System
| Tool | What It Does |
|------|-------------|
| `sp_design_create` | Generate a complete design system from a brand description — colors, typography, spacing, rules |
| `sp_design_apply` | Apply a design system to existing HTML — CSS variable injection, font/color enforcement |
### Quality
| Tool | What It Does |
|------|-------------|
| `sp_a11y` | WCAG 2.1 AA audit with auto-fix — contrast, ARIA, semantics, touch targets, lang attr |
| `sp_responsive` | Inject Tailwind responsive breakpoints for mobile, tablet, desktop |
### Framework Conversion
| Tool | What It Does |
|------|-------------|
| `sp_to_react` | HTML → Next.js/React .tsx with `useState`, event handlers, component extraction |
| `sp_to_vue` | HTML → Vue 3 SFCs with `