Google Stitch MCP: What It Is and How to Use 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

MCP (Model Context Protocol) is the standardized way AI coding tools call external services. Google Stitch ships an MCP server, which means AI tools like Claude Code, Cursor, and Windsurf can use Stitch's design generation directly through their 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:

• Generate a design from a natural language prompt
• Refine an existing design with follow-up prompts
• Export design code in any supported format (HTML, Tailwind, Vue, Angular, Flutter, SwiftUI)
• Get design metadata (used components, color palette, typography)
• List your existing Stitch projects
• Update or 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 as of June 2026:

1. Get your Stitch API token. Go to stitch.withgoogle.com → Settings → API Tokens → Generate New Token. Copy it.
2. Edit Claude Code's MCP config. Open ~/.claude/mcp_servers.json (create it if it doesn't exist).
3. Add the Stitch server entry:

   {
     "mcpServers": {
       "stitch": {
         "command": "npx",
         "args": ["-y", "@google/stitch-mcp@latest"],
         "env": {
           "STITCH_API_TOKEN": "your-token-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.

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" or "Add from npm package"
3. Configure with your Stitch API token (paste in the env field)
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: Usually a path or command issue. Try the full path to npx instead of just "npx". On macOS this is typically /opt/homebrew/bin/npx or /usr/local/bin/npx.

"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.

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.