Updated March 2026

Install Stitch MCP

Pick your client, copy the command, done.

Run this in a terminal.

Run in terminal

claude mcp add -e "GOOGLE_CLOUD_PROJECT=${GOOGLE_CLOUD_PROJECT}" stitch-mcp -- npx -y stitch-mcp

Required:GOOGLE_CLOUD_PROJECT

Environment Variables

Set these before running Stitch MCP.

VariableDescriptionRequired

GOOGLE_CLOUD_PROJECTThe Google Cloud project ID where Stitch API is enabled.Yes

Once configured, Stitch MCP gives your AI agent access to:

extract_design_contextScans a screen to extract Design DNA including fonts, colors, and layouts.

fetch_screen_codeDownloads the raw HTML/Frontend code of a screen.

fetch_screen_imageDownloads the high-res screenshot of a screen.

generate_screen_from_textGenerates a new screen based on a prompt and existing context.

create_projectCreates a new workspace or project folder.

list_projectsLists all available Stitch projects.

list_screensLists all screens within a specific project.

get_projectRetrieves details of a specific project.

get_screenGets metadata for a specific screen.

After setup, try these prompts with your AI agent:

→Extract the design context from the Home Screen to understand our current color palette and typography.

→Fetch the screen code for the login page so I can refactor it.

→Generate a new settings screen using the design context from our existing dashboard.

→List all screens in the current project to see what we have built so far.

Prerequisites & system requirements

An MCP-compatible client (Claude Code, Cursor, Windsurf, Claude Desktop, or Codex)
Node.js 18+ with npm/npx installed
GOOGLE_CLOUD_PROJECT — The Google Cloud project ID where Stitch API is enabled.

Save the docs, env vars, and workflow around Stitch MCP in Conare so Claude Code, Codex, and Cursor remember it next time.