Google Stitch MCP: What It Is, the 5-Minute Setup, and Whether It's Worth It (2026)

Key Stats (June 2026)

• MCP protocol: Anthropic's open Model Context Protocol (introduced late 2024)
• Cost: Free — uses standard Stitch generation quota (350/mo on free tier)
• Supported clients: Claude Code, Cursor (0.45+), Windsurf, Cline, Continue.dev, custom MCP clients
• Setup time: ~5 minutes (config file edit + auth)
• Killer use case: Design + implementation in one closed-loop AI workflow
• Search growth: +515% quarterly — MCP adoption is exploding in AI coding tool ecosystem
• Official docs: stitch.withgoogle.com/docs/mcp

TL;DR: Google Stitch MCP in 90 Seconds

Google Stitch MCP is the MCP server that connects Google Stitch to AI coding tools — one config entry (the server URL https://stitch.googleapis.com/mcp plus your Stitch API key) and Claude Code, Cursor, or Windsurf can generate, refine, and export Stitch designs without you ever opening the web UI. MCP (Model Context Protocol) is the standardized way AI coding tools call external services, and Stitch ships an official server for it — so design generation happens through your normal prompt interface, no context switching to a separate web app.

For developers using Claude Code or Cursor as their main editor, Stitch MCP is the killer integration. Instead of bouncing between your editor and stitch.withgoogle.com, you prompt your AI agent to "design and implement a new dashboard" — the agent calls Stitch for the design, then implements it in your codebase. Closed loop, no context switching, way faster.

I'm a fractional CTO who runs this workflow daily for client projects. This is the practical setup guide and the workflow patterns that actually save time.

What MCP Is (And Why It Matters)

Model Context Protocol is an open protocol Anthropic introduced in late 2024 for connecting AI assistants to external tools and data sources. The premise: instead of every AI coding tool implementing custom integrations with every external service, services provide standardized MCP servers and clients consume them via the protocol.

By mid-2026, MCP has become the default integration pattern for AI coding tools. Dozens of services (GitHub, Slack, databases, design tools, project management) ship MCP servers. Cursor, Claude Code, Windsurf, Cline, and others consume them. The result: an AI agent in your editor has access to anything that ships an MCP server.

Google Stitch was one of the earlier major design tools to ship MCP support, which is why "google stitch mcp" searches grew +515% in Q1 2026.

What Stitch MCP Actually Does

The Stitch MCP server exposes these capabilities to MCP clients (tool list read from Google's server, September 2026):

• Generate a screen from a text prompt (generate_screen_from_text)
• Edit existing screens with a follow-up prompt, or generate variants of them
• Read a screen and its details (get_screen, list_screens)
• Manage design systems: create, update, list and apply one, including from a DESIGN.md file
• List, create, read and delete projects

When an AI client like Claude Code is connected, it sees these as available tools and can invoke them as part of larger tasks. Example: you prompt Claude Code with "I need a settings page for our app with profile, billing, and notification sections." Claude Code decides to call Stitch (via MCP) to generate the design, gets the result back, and implements it in your React codebase — all in one conversation.

Setting Up Stitch MCP in Claude Code

Step-by-step setup, corrected September 2026. An earlier version of this guide pointed at an npm package, @google/stitch-mcp, that does not exist on npm. Stitch's MCP server is hosted by Google, so there is nothing to install:

1. Create your Stitch API key. In Stitch, click your profile picture (top right) → Stitch settings → API key → Create key. Copy it.
2. Add the server to Claude Code with one command (it writes the config for you):

   claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

3. Or add it by hand to your MCP config as a remote server:

   {
     "mcpServers": {
       "stitch": {
         "type": "http",
         "url": "https://stitch.googleapis.com/mcp",
         "headers": {
           "X-Goog-Api-Key": "your-api-key-here"
         }
       }
     }
   }

4. Restart Claude Code.
5. Verify the connection. In a new Claude Code session, ask "what tools do you have access to?" — Stitch should appear in the list.

The exact configuration format may evolve as Anthropic iterates on Claude Code's MCP support. The official Stitch docs at stitch.withgoogle.com/docs/mcp always have the current version. MCP gives Claude Code the tool; a skill tells it how you want the tool used, and how to use Claude skills covers that half.

Setting Up Stitch MCP in Cursor

Cursor supports MCP through its Composer feature (Cursor 0.45+):

1. Open Cursor Settings → MCP → Add Server
2. Choose "Add from URL" and enter https://stitch.googleapis.com/mcp
3. Add your Stitch API key as an X-Goog-Api-Key header
4. Restart Cursor
5. Open Composer and ask a design-related question — Stitch tools appear as available actions

Cursor's MCP UI is friendlier than Claude Code's config file approach but the underlying integration is identical.

The Killer Workflow: Design + Implement in One Pass

The reason Stitch MCP is worth setting up is the closed-loop design-and-implement workflow it enables:

Without MCP:

1. Decide you need a new UI feature
2. Open stitch.withgoogle.com in a separate tab
3. Prompt Stitch, refine, export code
4. Copy code to your editor
5. Refine implementation manually or with AI help
6. Realize the design needs a tweak, go back to step 2

With MCP:

1. Prompt Claude Code: "Design and implement a settings page with profile/billing/notifications"
2. Claude Code calls Stitch via MCP for the design
3. Claude Code implements the design in your codebase
4. Claude Code reviews the result, decides the design needs adjustment
5. Claude Code calls Stitch again with refinement, updates the code
6. Done. Total time: 5-15 minutes for typical features.

The integration eliminates context-switching between design tool and editor, AND lets the AI agent iterate on both design and code in tandem. For developers who already use Claude Code or Cursor as their main editor, this is a 3-5x productivity boost on UI work.

Common Setup Issues

"Server not found" error: Check the URL first. It is https://stitch.googleapis.com/mcp, over HTTP transport, not a local command. If your config still runs npx @google/stitch-mcp, that package does not exist; replace the entry with the URL version above.

"Authentication failed": Double-check your Stitch API token. Tokens expire after 90 days as of June 2026 — regenerate if needed.

Tools not appearing in client: Restart the MCP client fully (not just reload). Some clients cache the tool list aggressively.

Rate limit errors: You're hitting your 350-generation/month free tier limit. Either wait for the next monthly reset or upgrade when Stitch's paid plans launch in Q4 2026.

How Stitch MCP Actually Works: What the Setup Guides Leave Out

Most setup guides, this one included until September 2026, describe Stitch MCP as a package you run on your own machine. It is not. It is a remote server Google runs at https://stitch.googleapis.com/mcp. Your editor sends each tool call over HTTP, and your Stitch API key rides along in an X-Goog-Api-Key header. Nothing is installed, so nothing needs updating, and a leaked key is the whole security story. Keep it out of any config file you commit.

I asked the server what it offers on September 25, 2026. It listed 15 tools: four for projects, two for reading screens, three that generate or edit screens, and six for design systems. What is not on the list matters as much. There is no export-to-React or export-to-Flutter tool. Your agent reads the screen and writes the framework code itself, which is why the result depends on the agent more than on Stitch.

The other thing the guides skip: Google's own tool descriptions warn that the generate and edit calls "can take a few minutes." An agent with a short tool timeout will report a failure on a call that is still running, then try again and burn a second generation. If Stitch seems flaky from Claude Code or Cursor, raise the timeout before you blame the server.

Who Should Set This Up

• Developers using Claude Code or Cursor as their primary editor
• Solo founders who want design + code in one workflow
• Anyone who finds the manual stitch.withgoogle.com workflow disruptive
• Teams building AI-driven development pipelines

Skip if: you don't use any MCP-compatible AI tool, you prefer the visual design experience in Stitch's web UI, or you don't do much UI work.

The Bottom Line

Google Stitch MCP is one of the highest-leverage AI workflow integrations available in 2026. For developers in the Claude Code or Cursor ecosystem, setting it up takes 5 minutes and produces a 3-5x speedup on UI implementation work.

The broader trend: MCP is becoming the default integration pattern for AI coding tools. Expect every major design, project management, database, and infrastructure tool to ship MCP support over the next 12-18 months. Stitch is ahead of the curve.

Related reading: Google Stitch review, how to use Google Stitch, Google Stitch vs Claude Design, Claude Code vs Cursor.

Want help integrating MCP into your team's workflow? Book a free 15-min strategy call. No pitch.

If you've already shipped an AI-built app and it's stalling in production, read the $15K Vibe Code Rescue case study — the exact triage playbook for getting unstuck. Or jump straight to the offer: see the Vibe Code Rescue service for pricing, process, and the free 20-minute repo audit.