Google Stitch MCP Tutorial — Generate React Components from AI Designs

01 The Problem — Hallucinated UIs and Design Degradation

▶ 0:00

Early AI coding tools suffer from a fundamental flaw: they generate hallucinated generic UIs that break across screen sizes and ignore design intent. The root cause is that LLMs are probabilistic text generators — they approximate visual layouts rather than engineering them with precision.

The challenge Alex Hitt frames is clear: the industry needs to move from probabilistic text generation to deterministic, rigidly constrained UI engineering. The solution he walks through is building a local AI agent that pulls visual design data from the cloud, processes it through structured constraints, and outputs production-ready React components.

Prerequisites

• Node.js 18+ — runtime for all Stitch tooling
• Google Chrome — required for authentication flows
• AI coding environment — Claude Code or Cursor
• Active Google Stitch account — access at stitch.withgoogle.com

02 API Setup & Stitch MCP Initialization

▶ 0:56 – ▶ 1:44

The first hands-on step is generating your API key. Navigate to the Stitch web console → Profile → Stitch Settings → Generate new API key. This key authenticates your local machine against Google's generative infrastructure.

Initialization Command

npx @davideast/stitch-mcp init

The initialization wizard handles several critical tasks automatically:

• Detecting and installing any missing Google Cloud dependencies
• Configuring authentication flows with your API key
• Registering your local machine as an authenticated node ready to pull high-fidelity visual data from Google's generative infrastructure

03 The MCP Proxy Connection — Why Not HTTP

▶ 1:44 – ▶ 2:50

The correct approach is to bypass HTTP entirely and use the proxy command:

npx @davideast/stitch-mcp proxy

This creates a stable stdin/stdout stream directly between your IDE and the Stitch server. Instead of serializing design data into HTTP request/response cycles, the proxy maintains a persistent bidirectional pipe that ensures deterministic stability and no lost design tokens.

IDE Configuration

• Claude Code: Paste the proxy command into your claude.json config file
• Cursor: Paste into the MCP menu in the visual composer

04 Installing Stitch Skills

▶ 2:50 – ▶ 3:39

Stitch Skills are structured knowledge packages that give the AI agent explicit frontend engineering capabilities. Install them with:

npx plugins add @google-labs-code/stitch-skills

Add the appropriate --scope and --target flags for your specific IDE.

Skill Library Structure

The skills are organized into a highly structured library across 3 macro directories:

• Verticals — isolate specific tasks so concerns don't bleed across boundaries
• Utility suite — handles standards enforcement, separated from production builds
• Validation logic — provides the agent with explicit directory structures and validation rules for frontend engineering tasks

05 DESIGN.md — The Semantic Truth Document

▶ 3:39 – ▶ 4:08

Before writing any React code, you must prevent the agent from hallucinating the aesthetic layout. This is done by generating a DESIGN.md file — a semantic truth document that locks in all design constraints.

Generating DESIGN.md

Run the design MD utility skill with the prompt:

"Analyze the Stitch project and generate a design.md"

The agent connects to the cloud, pulls all design data, and synthesizes a local document that explicitly locks in:

• Exact typography families — no font substitution or guessing
• Padding scales — precise spacing values from the design system
• Color roles — semantic color assignments (primary, secondary, error, etc.)

06 Converting Designs to React Components

▶ 4:08 – ▶ 5:01

With the proxy connected, skills installed, and DESIGN.md generated, the final generation step is a single prompt:

"Convert all screens in the stitch project to react components"

What the Agent Does

The agent performs a multi-stage pipeline:

1. Extracts raw HTML from the cloud design data
2. Mathematically validates ASTs — abstract syntax trees are compared against the design spec
3. Configures modular imports — establishes clean dependency graphs
4. Writes JSX files — production-ready React components

Because the agent referenced the semantic truth document first, the generated components mirror the original cloud design without aesthetic degradation.

Verification

npx @davideast/stitch-mcp serve

This spins up a local Vite dev environment where you can inspect the generated components visually. From here, you can issue surgical natural language commands:

• "Add a checkbox to the form component"
• "Alter the hover color state on the navigation"

These modifications are applied without destabilizing the surrounding UI architecture because the agent always references the DESIGN.md constraints.

07 Stitch Loop — Automated Multi-Page Generation

▶ 5:01 – ▶ 5:21

The final capability Alex demonstrates is Stitch Loop — an automation mode that handles end-to-end generation of complex multi-page applications completely unattended.

Instead of issuing one prompt per screen, Stitch Loop iterates through all pages in the design project, generating components, validating them against DESIGN.md, and assembling the full application structure automatically.

With Stitch Loop handling the repetitive generation work, developers can shift their focus to what matters most: business logic and overall architecture. The pixel-perfect UI layer is handled deterministically by the pipeline.