Google Stitch and Claude Code: MCP Setup and DESIGN.md

You can connect Google Stitch to Claude Code with one command. Stitch runs a remote Stitch MCP server, and Claude Code adds it like any other HTTP server: point it at the endpoint, pass your Stitch API key in a header, and Claude can create projects, generate screens, and pull back their HTML without you leaving the terminal.

That's the short answer to "google stitch claude code." The longer answer matters because the guides floating around disagree on setup. Some send an API key header. Others wrap the server in a local proxy with Google Cloud sign-in. Both work, and Google's own SDK code shows why.

Here's what this guide covers:

• What Stitch is and where it came from inside Google Labs
• The Stitch MCP server: the endpoint, the two ways to authenticate, and the tools it exposes
• The exact claude mcp add command, plus a team-friendly .mcp.json version
• DESIGN.md: the file that carries your design rules from Stitch into code
• Google's Stitch skills for Claude Code, and what they add on top of the raw server

What Google Stitch is

Stitch is an AI UI design tool from Google Labs. You describe a screen in plain English, or upload a sketch or screenshot, and it generates a visual design plus front-end code.

Google introduced Stitch in May 2025 as "a new experiment from Google Labs." At launch it offered text-to-UI, image-to-UI, multiple design variants, paste to Figma, and front-end code export.

In March 2026 Google rebuilt Stitch into an AI-native design canvas. That update added:

The last two rows are why Claude Code users care. Google's post describes Stitch as "a bridge" to the rest of your tools, and the MCP server is what makes that bridge work.

How the Stitch MCP server works

The Stitch MCP server is a remote server hosted by Google. You don't run anything locally to use it. Google's Stitch SDK lists its default address as:

https://stitch.googleapis.com/mcp

Two ways to authenticate

This is where third-party guides split. The SDK's own auth code settles it: the server accepts either of two credentials.

So the "API key header" guides and the "Google Cloud sign-in plus proxy" guides are describing two valid routes to the same server. The SDK even ships a StitchProxy class that re-exposes Stitch through your own local MCP server, which is where the proxy-style setups come from.

For Claude Code, the API key route is simpler. Claude Code speaks HTTP to remote servers directly, so you don't need a proxy at all.

Get your key by following the Stitch MCP setup page in Stitch's docs. Treat it like a password. Don't paste it into a file you commit.

The tools Claude gets

Once connected, Claude sees Stitch's tools and calls them when your request fits. Google's SDK and skills reference these, among others:

• create_project and list_projects
• generate_screen_from_text and get_screen
• edit_screens and generate_variants
• upload_design_md and create_design_system_from_design_md

get_screen is the bridge to code. It returns download links for a screen's HTML and screenshot, which Claude can then convert into components in your repo.

Add Stitch to Claude Code with claude mcp add

Claude Code's MCP documentation uses one pattern for every remote HTTP server: claude mcp add --transport http, a name, the URL, and an optional --header.

For Stitch with an API key:

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

A few notes on that command:

• stitch is just the name Claude Code uses for the server. Pick anything.
• --scope user makes Stitch available in every project. Leave it off and Claude Code uses local scope, which loads the server only in the current project and stores it in ~/.claude.json.
• The header goes in as written. Watch for a trailing newline when you paste the key. Claude Code warns about hidden whitespace in header values but doesn't trim it.

Then confirm it connected:

claude mcp get stitch

Inside a session, /mcp shows the server, its status, and how many tools it exposes. If you want the full picture of scopes and where each config file lives, our Claude Code MCP server configuration guide walks through all of it.

The team version: .mcp.json with a variable

To share Stitch with everyone on a repo, add it to .mcp.json at the project root and keep the key out of the file. Claude Code expands environment variables inside headers:

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

Each teammate sets STITCH_API_KEY in their own shell. STITCH_API_KEY is also the variable name Google's SDK reads, so one export covers both.

Claude Code asks each person to approve a project's .mcp.json servers the first time, so expect a prompt on first run.

If you use OAuth instead

An OAuth access token expires, so a static header won't last. Claude Code's answer is headersHelper: a command that prints a JSON object of headers, which Claude Code runs on each connection. Have it print Authorization and X-Goog-User-Project with a fresh token from your Google Cloud sign-in.

When a configured Authorization header gets rejected, Claude Code reports a failed connection instead of falling back to its own OAuth flow. If you see that, the token is the thing to fix.

DESIGN.md: carry design rules from Stitch into code

Generating a screen is the easy part. Keeping fifty generated screens and your real codebase on the same colors, type scale, and spacing is the hard part. That's the job of DESIGN.md.

DESIGN.md is a markdown file that describes a visual identity for coding agents. Google open-sourced the draft spec in April 2026, so it isn't tied to Stitch. The spec repository explains the two layers:

1. YAML tokens at the top: named colors, typography, corner radii, spacing. These are the exact values.
2. Markdown prose below: why each value exists and how to apply it.

The prose layer is the useful part for an agent. A hex code alone doesn't tell Claude whether a color is for errors, links, or the one primary button. A sentence does.

The repo also ships a linter you can run in any project:

npx @google/design.md lint DESIGN.md

It checks the file against the spec, catches broken token references, and flags WCAG contrast problems. A diff command compares two versions and reports regressions.

Where DESIGN.md fits in a Claude Code workflow

Point Claude at the file from your CLAUDE.md so it's read on every session, not just when you remember to mention it.

Google's Stitch skills for Claude Code

The raw MCP server gives Claude tools. Google's stitch-skills repository adds instructions for using them well. It's organized as three plugins:

The README's Claude Code install line:

npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

Two caveats from the same README. The skills require the Stitch MCP server to be configured first, so do the claude mcp add step above before installing them. And the repo states it is "not an officially supported Google product," so treat it as a useful starting point rather than a guaranteed interface.

If you'd rather build the whole loop yourself, Claude Code's plugin system lets you package your own Stitch prompts as skills.

A realistic first session

With the server and skills in place, a first run looks like this:

1. Ask Claude to create a Stitch project and generate a mobile settings screen.
2. Ask for three variants with a different color scheme.
3. Pick one, and have Claude fetch its HTML with get_screen.
4. Have Claude convert it into components that follow your DESIGN.md.

Stitch handles the visual exploration. Claude Code handles the part that touches your repo. If you're also weighing Anthropic's own design tool for that first half, our Claude Design guide covers how it compares.

When setup is the part you never finish

Every step above assumes you're comfortable with API keys, scopes, and JSON config. Plenty of people who want AI-designed screens aren't. If the setup step is where you keep stalling, Taku mirrors a working AI setup into a desktop workspace and runs it, so you can use a power user's configuration without reproducing their environment first. Taku is in Beta, and the Mac app is available now.

FAQ

Does Google Stitch work with Claude Code?

Yes. Stitch exposes a remote MCP server at https://stitch.googleapis.com/mcp, and Claude Code connects to it with claude mcp add --transport http. Once connected, Claude can create Stitch projects, generate and edit screens, and fetch their HTML.

What is the Google Stitch MCP server?

It's Google's hosted MCP endpoint for Stitch. Coding agents use it to call Stitch tools such as create_project, generate_screen_from_text, and get_screen. Google released it alongside the Stitch SDK and mentioned both in its March 2026 Stitch update.

Should I use an API key or OAuth for the Stitch MCP server?

Use an API key unless your team already manages access through Google Cloud. The key goes in an X-Goog-Api-Key header. OAuth needs a bearer token plus a Cloud project ID header, and the token expires, so you'd set it up with a headersHelper script.

Do I need a proxy to use Stitch in Claude Code?

No. Claude Code connects to remote HTTP MCP servers directly. Proxy-based setups come from the SDK's StitchProxy class, which re-exposes Stitch's tools through a local MCP server you run yourself. That's an option, not a requirement.

What is DESIGN.md in Stitch?

It's a markdown file that holds your design system: tokens like colors, type, and spacing, plus prose explaining how to use them. Stitch can export and import it, and Google open-sourced the spec in April 2026 so other tools can read it too.

Are Google's Stitch skills required?

No. The MCP server works on its own. The stitch-skills plugins add tested instructions for common jobs like converting screens to React or writing a DESIGN.md, and they need the MCP server configured first.

The short version

• Stitch is Google Labs' AI UI design tool, rebuilt in March 2026 as a design canvas with an MCP server, SDK, and DESIGN.md.
• Connect it with claude mcp add --transport http to https://stitch.googleapis.com/mcp and an X-Goog-Api-Key header.
• OAuth works too, with a bearer token and a Cloud project header, best handled through headersHelper.
• DESIGN.md keeps Stitch screens and your codebase on the same design rules, and npx @google/design.md lint checks it.
• Google's stitch-skills plugins add ready-made workflows on top, once the MCP server is set up.