# Google Stitch MCP — AI Design via Model Context Protocol

> Connect Claude Code, Cursor, Gemini CLI, or VS Code to Google Stitch for AI-driven UI design. Create projects, generate screens from text, edit designs, manage design systems — all via MCP.

## Install

Merge the JSON below into your `.mcp.json`:

## Quick Use

### API Key (fastest)
```json
{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}
```

Get your API key from [Stitch Settings](https://stitch.withgoogle.com/settings).

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

---

## Intro

Google Stitch MCP is a remote Model Context Protocol server that lets AI coding tools control Google Stitch — an AI-powered UI design platform. Connect Claude Code, Cursor, Gemini CLI, VS Code, or Antigravity to create projects, generate screens from text prompts, edit existing designs, generate design variants, and manage design systems. All through natural language commands in your IDE.

**Best for**: Developers and designers who want AI agents to create and iterate on UI designs programmatically.
**Works with**: Claude Code, Cursor, Gemini CLI, VS Code, Antigravity
**Auth**: API Key (recommended) or OAuth via Google Cloud

---

## Authentication

### Option 1: API Key (Recommended)
1. Go to [Stitch Settings](https://stitch.withgoogle.com/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:
```bash
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)
```json
{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}
```

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

### Gemini CLI
```bash
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.

---

## Source & Thanks

> Created by [Google](https://stitch.withgoogle.com). Part of Google Stitch — Design with AI.
> [Stitch MCP Docs](https://stitch.withgoogle.com/docs/mcp/setup)
> Terms: [Google APIs Terms of Service](https://developers.google.com/terms)

---
Source: https://tokrepo.com/en/workflows/05e7ef0b-cc4a-46e5-8b15-d78a626fcd6f
Author: TokRepo Curated