From stitch-kit
Guides step-by-step installation of Stitch MCP server and stitch-kit plugin for Claude Code, Codex CLI, Cursor, and VS Code. For first-time setup, connection issues, or new user onboarding.
How this skill is triggered — by the user, by Claude, or both
Slash command
/stitch-kit:stitch-setupThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Walks users through two setup tasks:
Walks users through two setup tasks:
list_toolsRun list_tools (or check the tool list). Look for any of:
create_projectgenerate_screen_from_textget_screenIf found: Stitch MCP is working. Skip to Step 4 (plugin install). If not found: Continue with MCP setup below.
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.
Never commit your API key to a public repository. Store it securely.
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"
}
}
}
}
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"
Create or edit .cursor/mcp.json:
{
"mcpServers": {
"stitch": {
"url": "https://stitch.googleapis.com/mcp",
"headers": {
"X-Goog-Api-Key": "YOUR-API-KEY"
}
}
}
}
Open Command Palette → "MCP: Add Server" → HTTP → https://stitch.googleapis.com/mcp → name: "stitch". Then edit the generated mcp.json to add the header:
{
"servers": {
"stitch": {
"url": "https://stitch.googleapis.com/mcp",
"type": "http",
"headers": {
"Accept": "application/json",
"X-Goog-Api-Key": "YOUR-API-KEY"
}
}
}
}
Or use the NPX installer — it prompts for the API key and configures everything:
npx @booplex/stitch-kit
After adding, restart the client and run list_tools. You should see tools like create_project, generate_screen_from_text, get_screen, etc.
/plugin marketplace add https://github.com/gabelul/stitch-kit.git
/plugin install stitch-kit@stitch-kit
All 34 skills in one command. The stitch-kit agent is included — it shows up automatically after restart.
Run the orchestrator to confirm everything works:
"Use Stitch to design a simple login screen"
Expected behavior:
stitch-orchestrator activateslist_tools and finds Stitch MCP toolscreate_projectgenerate_screen_from_textget_screenIf this completes, you're fully set up.
| Symptom | Likely cause | Fix |
|---|---|---|
list_tools doesn't show Stitch tools | MCP not configured or client not restarted | Redo Step 3; restart your client |
| "Unauthenticated" or 401 error | API key invalid or expired | Generate a new key at stitch.withgoogle.com/settings |
create_project fails with 403 | Account doesn't have Stitch access | Visit stitch.withgoogle.com and request access |
generate_screen_from_text returns empty | Bad prompt or project ID format | Use stitch-mcp-generate-screen-from-text skill — it includes ID format rules |
get_screen returns 404 | Wrong ID format | projectId and screenId must be numeric only — no projects/ prefix |
| Generated HTML won't download | GCS URL expired or requires redirects | Use bash scripts/fetch-stitch.sh "[url]" "temp/output.html" |
| Plugin not activating | Wrong install command or repo URL | Verify you used @stitch-kit — not @stitch-pro or @stitch-skills |
Stitch MCP makes outbound requests to:
stitch.googleapis.com — remote MCP serverstorage.googleapis.com — file downloads (HTML, screenshots)accounts.google.com — OAuth (if using OAuth instead of API key)If you're behind a corporate proxy or VPN, ensure these domains are allowed.
If you cannot configure Stitch MCP, the orchestrator still works in prompt-only mode:
If you can't store API keys on disk, Stitch supports OAuth via Google Cloud:
gcloud auth login
gcloud auth application-default login
gcloud config set project YOUR-PROJECT-ID
gcloud beta services mcp enable stitch.googleapis.com --project=YOUR-PROJECT-ID
Then use Bearer token auth instead of API key. See full OAuth guide.
Note: OAuth tokens expire hourly and need manual refresh. API keys are simpler for most users.
docs/skills-index.mddocs/mcp-naming-convention.mdnpx claudepluginhub gabelul/stitch-kit --plugin stitch-kitGenerates UI screens in Google Stitch from markdown prompt files using MCP tools. Parses sections by markers, sends prompts for generation, fetches images and code, saves to exports and code folders.
Orchestrates Stitch UI design workflows: routes from user request through spec, prompt assembly, screen generation, iteration, design system extraction, and framework conversion (Next.js, Svelte, HTML, React Native, SwiftUI).
Implements an autonomous iterative loop for building websites using Stitch MCP tools and baton-passing via .stitch/next-prompt.md for multi-step frontend construction.