Google Stitch MCP Setup Guide — Claude Code, Cursor, Gemini CLI (2026)

Stitch MCP Practical Guide — From Installation to UI Generation

Google Stitch generates UI designs and frontend code from text prompts. Stitch MCP connects it to AI coding agents (Claude Code, Cursor, Gemini CLI, etc.) as an MCP server.

The official docs list setup steps but skip the practical stuff. This guide covers installation through actual UI generation in one place.

What Stitch MCP Is

Stitch is an experimental tool from Google Labs. As of 2026 it generates with Gemini 3 Flash by default and Gemini 3 Pro in the higher-quality mode, turning a prompt into UI design + HTML/CSS code.

Stitch MCP wraps the Stitch API as an MCP (Model Context Protocol) server, so AI agents can call it as a tool.

In practice: tell your agent "build me a landing page," the agent calls Stitch, and you get design + code back.

Supported Platforms

The MCP server configuration is nearly identical across platforms.

Installation

Prerequisites

• Node.js 18+
• Google Cloud project (billing enabled)
• At least one project on stitch.withgoogle.com

Automatic Setup (Recommended)

npx @_davideast/stitch-mcp init

An interactive wizard handles gcloud CLI check/install, Google login, project setup, Stitch API activation, and MCP client configuration.

Manual Setup (gcloud)

If you already have gcloud installed:

gcloud auth login
gcloud config set project YOUR_PROJECT_ID
gcloud auth application-default login
gcloud auth application-default set-quota-project YOUR_PROJECT_ID
gcloud beta services mcp enable stitch.googleapis.com --project=YOUR_PROJECT_ID

Health Check

npx @_davideast/stitch-mcp doctor --verbose

MCP Registration by Platform

Claude Code

claude mcp add -e GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID -s user stitch -- npx -y @_davideast/stitch-mcp proxy

Verify:

claude mcp list | grep stitch

Claude Desktop

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"]
    }
  }
}

Cursor / VS Code / Windsurf

Same JSON in MCP settings:

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "@_davideast/stitch-mcp", "proxy"]
    }
  }
}

Gemini CLI

gemini mcp add stitch -- npx -y @_davideast/stitch-mcp proxy --env GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID

Or via extension:

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

If gcloud is already configured, add the environment variable:

{
  "env": {
    "STITCH_USE_SYSTEM_GCLOUD": "1"
  }
}

Available Tools

Key tools that agents can call: