Google Stitch MCP Server

Overview

Google Stitch MCP Server (maintained by davideast) is the leading open-source Model Context Protocol (MCP) server for Google’s Stitch AI design platform (stitch.withgoogle.com). It bridges Stitch’s AI-generated UI designs with coding agents and IDEs.

AI tools can now discover and use Stitch designs in real time — fetching screens, screenshots, HTML code, and even building full sites — without manual exports or copy-pasting.

Key Features

• Design-to-Code Tools: get_screen_code, get_screen_image, and build_site for instant frontend generation.
• Local Preview: Serve Stitch screens on a Vite dev server for instant browser preview.
• Astro Site Builder: Automatically map screens to routes and generate a deployable Astro project.
• Interactive Browser: Terminal-based explorer for projects, screens, and metadata.
• Proxy Mode: Exposes high-level tools to MCP clients with automatic token refresh and gcloud integration.
• One-Command Setup: Guided init wizard handles authentication and MCP config.

How It Works

The server acts as a proxy between your MCP client (Claude, Cursor, VS Code, etc.) and the Stitch API. It combines multiple Stitch calls into agent-friendly tools and injects clean design context (HTML, images, metadata) directly into the LLM conversation.

Supported transports: stdio (for IDEs) with full gcloud authentication support.

Setup & Installation

Quick Start

npx @_davideast/stitch-mcp init

This runs a guided wizard to set up gcloud auth, enable the Stitch API, and configure your MCP client.

Add to MCP Client (e.g. Cursor or Claude)

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

Prerequisites

• Google Cloud project with Stitch API enabled
• gcloud SDK installed
• Billing enabled on the project
• Node.js (for npx)

Available Tools

• build_site: Map screens to routes and return full HTML for a multi-page site.
• get_screen_code: Download production-ready HTML/CSS for any screen.
• get_screen_image: Get screenshot as base64 for visual context.
• Additional CLI commands: serve, screens, site, view, etc.

Use Cases

• Design-to-Code Workflows: Ask Cursor or Claude to "build this Stitch design into a Next.js page" — get accurate code instantly.
• Agent-Driven Development: Give coding agents visual context so they stop hallucinating UI.
• Rapid Prototyping: Preview and iterate on Stitch designs locally before exporting.
• Multi-Agent Pipelines: Combine with Google Antigravity, Cursor, or other MCP servers for end-to-end idea → UI → code → deploy.
• Documentation & Handoff: Generate clean Astro sites from AI designs for stakeholder review.

Why Google Stitch MCP?

Stitch turns text prompts into beautiful responsive UIs. This MCP server makes those designs first-class citizens in your AI coding workflow — giving agents "eyes" on the exact design they need to implement.

It is actively maintained, lightweight, and works seamlessly with all major MCP clients.

Getting Started

Visit the repository at github.com/davideast/stitch-mcp for the latest version, full documentation, and examples.

Start with npx @_davideast/stitch-mcp init and unlock the full power of Google Stitch inside your favorite AI coding agent today.