Google Stitch MCP — AI Design via Model Context Protocol

Authentication

Option 1: API Key (Recommended)

1. Go to Stitch Settings
2. Scroll to "API Keys" → Click "Create API Key"
3. Copy and save securely

Option 2: OAuth (for restricted environments)

Requires Google Cloud SDK setup:

gcloud auth login
gcloud auth application-default login
gcloud config set project YOUR_PROJECT_ID
gcloud beta services enable stitch.googleapis.com --project=YOUR_PROJECT_ID
TOKEN=$(gcloud auth application-default print-access-token)

MCP Client Configuration

Cursor (.cursor/mcp.json)

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

Claude Code

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

Gemini CLI

gemini extensions install https://github.com/gemini-cli-extensions/stitch

VS Code

1. Cmd+Shift+P → "MCP: Add Server" → HTTP
2. URL: https://stitch.googleapis.com/mcp
3. Name: "stitch"
4. Add X-Goog-Api-Key header in mcp.json

Available Tools

Project Management

• create_project — Create a new design project (params: title)
• get_project — Get project details (params: name)
• list_projects — List all your projects (params: filter)

Screen Management

• list_screens — List all screens in a project (params: projectId)
• get_screen — Get screen details (params: name)

AI Generation

• generate_screen_from_text — Generate a new design from a text prompt (params: projectId, prompt, modelId: GEMINI_3_FLASH or GEMINI_3_1_PRO)
• edit_screens — Edit existing screens with a text prompt (params: projectId, selectedScreenIds, prompt)
• generate_variants — Generate design variations (params: projectId, selectedScreenIds, prompt, variantOptions)

Design Systems

• create_design_system — Create a new design system with tokens (params: designSystem, projectId)
• update_design_system — Update an existing design system (params: name, projectId, designSystem)
• list_design_systems — List design systems for a project (params: projectId)
• apply_design_system — Apply a design system to screens (params: projectId, selectedScreenInstances, assetId)

FAQ

Q: What is Google Stitch MCP? A: A remote MCP server by Google that lets AI coding tools (Claude Code, Cursor, Gemini CLI) create and edit UI designs in Google Stitch through natural language commands.

Q: Is Stitch MCP free? A: Stitch itself is free to use. The MCP connection requires a Google account and an API key from the Stitch Settings page.

Q: Which AI model does Stitch use for design generation? A: Stitch supports GEMINI_3_FLASH (faster) and GEMINI_3_1_PRO (higher quality) for generating and editing designs.