Capability

Stitch MCP — connect Stitch to Claude

Wire Google Stitch into Claude Code and the Claude app via MCP, then generate UI and pull its code.

#mcp#stitch#design

The Stitch MCP connects Google Stitch — Google's AI UI design tool — to Claude over the Model Context Protocol. Once it's wired up, you can ask Claude to generate a screen in Stitch and pull the design's HTML and screenshots straight into your work, without leaving the editor. The server is @_davideast/stitch-mcp.

New to Stitch itself?

This page is about the connection. For the design side — DESIGN.md, writing prompts, and editing images — start with Get started with Stitch.
Youprompt in Claude
Stitch MCPproxy / tools
Google Stitchgenerates UI
Back to ClaudeHTML + screenshot
Claude calls Stitch through the MCP server, then receives the generated design as code and images.

What you'll need

Node + npx

The server runs via npx; no global install required.

Stitch API access

A Google Cloud account with Stitch API access. gcloud is installed for you by the wizard.

A Claude client

Claude Code (terminal) and/or the Claude desktop app — both are covered below.

On the Stitch side — authenticate

The server needs credentials for the Stitch API. Pick one path:

  1. 1

    Run the guided wizard (recommended)

    It installs gcloud, runs the OAuth flow, stores credentials, and sets your project.
    bash
    npx @_davideast/stitch-mcp init
  2. 2

    …or use an API key

    Skip OAuth by exporting a key (you can also pass it per-client below).
    bash
    export STITCH_API_KEY="your-api-key"
  3. 3

    …or wire up gcloud manually

    If you already use gcloud:
    bash
    gcloud auth application-default login
gcloud config set project <PROJECT_ID>
gcloud beta services mcp enable stitch.googleapis.com --project=<PROJECT_ID>

In Claude Code (terminal)

Register the server with claude mcp add. Use the local proxy (it reuses the auth from the step above), or connect to the hosted endpoint directly.

bash
claude mcp add stitch -e STITCH_API_KEY=YOUR_API_KEY \
  -- npx @_davideast/stitch-mcp proxy

Confirm the connection and list the tools:

bash
npx @_davideast/stitch-mcp doctor --verbose   # diagnose auth & connectivity
npx @_davideast/stitch-mcp tool               # list available tools

In the Claude app (desktop)

Add the server to claude_desktop_config.json (Settings → Developer → Edit Config), then restart the app — the Stitch tools appear in the tools menu.

claude_desktop_config.json
{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"],
      "env": { "STITCH_API_KEY": "your-key" }
    }
  }
}

Already authenticated with gcloud? Swap the env for { "STITCH_USE_SYSTEM_GCLOUD": "1" } and drop the key.

claude.ai (web)

On the web app, add Stitch as a custom connector pointing at the hosted endpoint https://stitch.googleapis.com/mcp with header X-Goog-Api-Key: YOUR_API_KEY — the same direct transport shown for Claude Code.

The tools it exposes

Alongside the upstream Stitch tools (e.g. list_projects), the server adds three convenience tools:

build_site

Builds a site from a project by mapping screens to routes, and returns the design HTML for each page.

get_screen_code

Retrieves a single screen and downloads its HTML code.

get_screen_image

Retrieves a screen and downloads its screenshot as a base64 image.

How to use it

With the server connected, just describe what you want — Claude calls Stitch to generate the design, then pulls the code or screenshot back and implements it in your project.

  1. 1

    Ask in plain language

    For example: “Design a settings page in Stitch and build it into this app.” Claude generates the screen, then calls get_screen_code / build_site for the markup.
  2. 2

    Or drive the tools directly from the CLI

    Handy for debugging or scripting:
    bash
    # inspect a tool's input schema
npx @_davideast/stitch-mcp tool build_site -s

# pull one screen's HTML
npx @_davideast/stitch-mcp tool get_screen_code -d '{
  "projectId": "123456",
  "screenId": "abc123"
}'
  3. 3

    Preview a project locally

    Serve or browse generated projects without an agent:
    bash
    npx @_davideast/stitch-mcp serve -p <project-id>
npx @_davideast/stitch-mcp view --projects

Pair it with the design workflow

The MCP moves designs into code; it doesn't teach Stitch itself. To get good designs out in the first place — set up a DESIGN.md, write a strong prompt, and edit the result — follow Get started with Stitch.

Learn more