# Stitch MCP server

> Generate and edit UI screens, variants and design systems in Google Stitch projects from your assistant.

- Listing: https://mcp.tc/i/stitch
- Connect: use the server's own URL `https://stitch.googleapis.com/mcp` (with your API key); clients connect to it directly. The listing link is a page, not an MCP endpoint.
- Type: remote (Streamable HTTP)
- Auth: API key
- Category: [Design, Websites & CMS](https://mcp.tc/c/design)
- Vendor: Google
- Verified: yes, mcp.tc checked that this is the official server (https://mcp.tc/verify). It says who runs the server, not that it is safe.
- Homepage: <https://stitch.withgoogle.com/docs/mcp/setup/>

## About

Connects to Google Stitch, a tool that generates mobile and web UI designs. You can create and manage projects, generate screens from text prompts, edit existing screens, produce variants, and create, update and apply design systems, including ones built from a DESIGN.md file.

Runs as a hosted streamable HTTP endpoint at stitch.googleapis.com. Authentication uses an API key sent in the X-Goog-Api-Key header, created in the Stitch settings, or Google OAuth. The service is in beta. Screen generation can take a few minutes.

## What it can do

- Create, list, get and delete Stitch projects
- Generate new screens from a text prompt
- Edit existing screens with a text prompt
- Generate variants of existing screens
- Create, update and list design systems
- Upload a DESIGN.md and build a design system from it
- Apply a design system to selected screens

## Tools (15)

- `create_project`: Create a new Stitch project that holds UI designs and frontend code. (can modify or delete data)
- `get_project`: Retrieve details of a Stitch project by name. (read-only)
- `delete_project`: Delete a Stitch project by name. (can modify or delete data)
- `list_projects`: List Stitch projects accessible to the user, owned projects by default. (read-only)
- `list_screens`: List all screens in a project. (read-only)
- `get_screen`: Retrieve details of a specific screen in a project. (read-only)
- `generate_screen_from_text`: Generate a new screen in a project from a text prompt. (can modify or delete data)
- `edit_screens`: Edit existing screens in a project using a text prompt. (can modify or delete data)
- `generate_variants`: Generate variants of existing screens using a text prompt. (can modify or delete data)
- `upload_design_md`: Upload a DESIGN.md file to a project. (can modify or delete data)
- `create_design_system`: Create a design system with colors, typography, shape and appearance. (can modify or delete data)
- `create_design_system_from_design_md`: Create a design system from an uploaded DESIGN.md file. (can modify or delete data)
- `update_design_system`: Update the theme, style or branding of a project's design system. (can modify or delete data)
- `list_design_systems`: List all design systems for a project. (read-only)
- `apply_design_system`: Apply a design system's tokens to selected screens. (can modify or delete data)

## Example prompts

- "Create a Stitch project called Fitness App and generate a mobile home screen"
- "Generate three variants of my login screen with a darker palette"
- "Create a design system with Inter font and rounded corners, then apply it to all screens"
- "List my Stitch projects and show the screens in the latest one"

## Install

### Claude Code

1. Run this in a terminal, in your project folder:

```bash
claude mcp add --transport http stitch https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: <YOUR_API_KEY>"
```

2. Replace the placeholder with your key before you run it, then check it with `/mcp` inside Claude Code.

Add `--scope user` to make it available in every project, not just this one.

### Claude Desktop

1. Custom connectors can’t send this server’s key header, so use the `mcp-remote` bridge. Open **Settings → Developer → Edit Config** and add:

`claude_desktop_config.json`:

```json
{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://stitch.googleapis.com/mcp",
        "--header",
        "X-Goog-Api-Key: <YOUR_API_KEY>"
      ]
    }
  }
}
```

2. Replace the placeholder with your key and restart Claude Desktop.

The bridge needs Node.js on your computer.

### Cursor

[Add to Cursor](<https://cursor.com/install-mcp?name=stitch&config=eyJ1cmwiOiJodHRwczovL3N0aXRjaC5nb29nbGVhcGlzLmNvbS9tY3AiLCJoZWFkZXJzIjp7IlgtR29vZy1BcGktS2V5IjoiPFlPVVJfQVBJX0tFWT4ifX0%3D>) (opens Cursor)

Or add it by hand to `~/.cursor/mcp.json` (all projects) or `.cursor/mcp.json` (this project):

`mcp.json`:

```json
{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "<YOUR_API_KEY>"
      }
    }
  }
}
```

### VS Code

Add it to `.vscode/mcp.json`. VS Code asks for the key the first time and stores it securely:

`.vscode/mcp.json`:

```json
{
  "servers": {
    "stitch": {
      "type": "http",
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "${input:x-goog-api-key}"
      }
    }
  },
  "inputs": [
    {
      "type": "promptString",
      "id": "x-goog-api-key",
      "description": "X-Goog-Api-Key",
      "password": true
    }
  ]
}
```

### Devin Desktop

1. Add it to `~/.config/devin/mcp_config.json` (macOS and Linux) or `%APPDATA%\devin\mcp_config.json` (Windows):

`mcp_config.json`:

```json
{
  "mcpServers": {
    "stitch": {
      "serverUrl": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "<YOUR_API_KEY>"
      }
    }
  }
}
```

2. Refresh the MCP server list in Cascade.

Devin Desktop is the new name for Windsurf. It reads `serverUrl` (or `url`) for remote servers.

### Codex

```bash
codex mcp add stitch --url https://stitch.googleapis.com/mcp
```

Or edit `~/.codex/config.toml` directly:

`config.toml`:

```toml
[mcp_servers.stitch]
url = "https://stitch.googleapis.com/mcp"
env_http_headers = { "X-Goog-Api-Key" = "X_GOOG_API_KEY" }
```

Codex reads the header values from the environment variables named in `env_http_headers`.

### Gemini CLI

```bash
gemini mcp add --transport http --header "X-Goog-Api-Key: <YOUR_API_KEY>" stitch https://stitch.googleapis.com/mcp
```

This adds it to the current project. Add `-s user` to use it everywhere.

### Any client

Most clients accept this shape. Some name the URL field differently: `serverUrl` in Devin Desktop, `httpUrl` in Gemini CLI’s settings file.

```json
{
  "mcpServers": {
    "stitch": {
      "type": "http",
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "<YOUR_API_KEY>"
      }
    }
  }
}
```

Zed puts servers under `context_servers` in its settings. Cline needs `"type": "streamableHttp"`, or it assumes SSE.

Client only starts local servers? Bridge it with `npx -y mcp-remote https://stitch.googleapis.com/mcp`.

## Details

- Server version: scaffolding on HTTPServer2
- MCP protocol version: 2025-11-25
- Last checked: 2026-10-03 (reachable)
- Listed: 2026-10-03
- Updated: 2026-10-03

---
Source: https://mcp.tc/i/stitch (mcp.tc is an independent directory, not affiliated with this server's publisher). Corrections: https://mcp.tc/report