Back to All Posts

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

Author
박기현
Publishededited: April 25, 2026
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 comes as HTML/CSS code, and the tool can be integrated with external tools like Claude Code via MCP (Model Context Protocol).

Heads Up: The Claude.ai Built-in Integration Failed in the CLI

There's a built-in Stitch connector available in Claude.ai settings, but when I wrote this (March 2026) it failed with an authentication error in the Claude Code CLI.

TEXT
Incompatible auth server: does not support dynamic client registration

At the time it was logged as a bug (anthropics/claude-code#36228) and unresolved. It worked on Claude.ai web but not in the CLI, so I configured it manually as 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 --transport http stitch https://stitch.googleapis.com/mcp \
  --header "X-Goog-Api-Key: YOUR_API_KEY" --scope user

--scope user makes the server available in all your projects. In Windows PowerShell, put the command on one line instead of using the trailing \.

Option B: Edit ~/.claude.json directly

MCP servers are stored in ~/.claude.json, not ~/.claude/settings.json. User-scoped servers go under the top-level mcpServers key.

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

Add the following under mcpServers. The file also holds other settings, so Option A or claude mcp add-json is the safer route:

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 also check the connection from the terminal with claude mcp get stitch. 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 move from design generation to code implementation inside Claude Code. It connects with a single Stitch API key — no Google Cloud project setup.

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