TechLog
Back to Blog

Connecting Google Stitch MCP to Claude Code (macOS / Windows)

tipclaude codemcp

Google's AI UI design tool Stitch can be connected to Claude Code via MCP, letting you generate UI screens and pull design assets directly from the terminal using natural language.

This guide covers how to set up the Stitch MCP integration with Claude Code on both macOS and Windows, using the API Key method.

What is Google Stitch?

Google Stitch is a Google Labs AI tool that generates UI designs from text prompts. The output is clean HTML/CSS code that can be integrated with external tools like Claude Code via MCP (Model Context Protocol).

Heads Up: The Claude.ai Built-in Integration Doesn't Work in the CLI

There's a built-in Stitch connector available in Claude.ai settings, but it fails with an authentication error in the Claude Code CLI.

TEXT
Incompatible auth server: does not support dynamic client registration

This is a known bug logged as GitHub issue #36228 and remains unresolved. It works fine on Claude.ai web, but not in the CLI — so you'll need to configure it manually using the steps below.

Step 1 — Generate a Stitch API Key

The API key is generated inside Stitch's own settings, not from Google Cloud Console.

  1. Go to stitch.withgoogle.com
  2. Click your profile icon in the top-right corner
  3. Select Stitch Settings
  4. Navigate to the API key section and click Create key
  5. Copy the key immediately — it won't be shown again

Step 2 — Register the MCP Server in Claude Code

Option A: Terminal command (easiest)

The command is the same on both macOS and Windows. On Windows, run it in PowerShell or Git Bash.

Bash
claude mcp add stitch --transport http https://stitch.googleapis.com/mcp \
  --header "X-Goog-Api-Key: YOUR_API_KEY" -s user

Option B: Edit settings.json directly

The config file path differs by OS:

  • macOS: ~/.claude/settings.json
  • Windows: %USERPROFILE%\.claude\settings.json

Open the file and add the following:

JSON
{
  "mcpServers": {
    "stitch": {
      "type": "http",
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR_API_KEY"
      }
    }
  }
}

Step 3 — Verify the Connection

Launch Claude Code and run /mcp:

TEXT
/mcp

If stitch appears in the server list, you're all set. You can now use it like this:

TEXT
Show me my Stitch projects
Generate a mobile login screen UI

Wrapping Up

Once Stitch MCP is connected, you can go from design generation to code implementation in a single natural language prompt inside Claude Code. No Google Cloud project setup required — just an API key and you're ready to go.

Official Stitch MCP docs: stitch.withgoogle.com/docs/mcp/setup

Comments