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.
npx claudepluginhub gabelul/stitch-kit --plugin stitch-kitThis skill is limited to using the following tools:
Walks users through two setup tasks:
Generates 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 from user requests to design specs, screen generation, iterations, design systems, and code exports to Next.js, Svelte, HTML, React Native, or SwiftUI. Activates explicitly on 'Stitch' mentions.
Enables autonomous iterative website building with Stitch MCP tools using baton-passing via .stitch/next-prompt.md, generating and integrating pages across loops.
Share bugs, ideas, or general feedback.
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.md