🎨
Stitch
MCP
🤖
Claude
→
🔨
Code
5 min
Setup time
3
Tools exposed
0
Copy-paste needed
You open a Stitch project with a design you're proud of. Now you want Claude to build it. Without MCP, you're exporting HTML, copying it, pasting it into the chat, explaining what's what, fixing the context window. With Stitch MCP, Claude just reads the design directly. One config file. Done. Google shipped the Stitch MCP server quietly, and it's genuinely useful. Here's how to set it up in Claude Code in under 5 minutes — and a workflow that makes the whole thing hands-free.
TL;DR: Create .mcp.json in your project root with your Stitch API key, restart Claude Code, and Claude gains access to three Stitch tools: build_site, get_screen_code, and get_screen_image. Pair with MetaWhisp to voice-dictate design instructions without typing.
---

What Is Google Stitch?

Stitch is Google's AI-powered UI prototyping tool. You describe what you want — or upload a sketch — and it generates high-fidelity UI screens. Think of it as a design tool that skips the mockup phase entirely: you go straight from idea to functional-looking HTML. It's still in beta, but it's already useful for two things: The MCP server is the bridge that lets Claude actually see those designs and turn them into real, buildable code without you acting as the middleman. ---

What Is MCP (and Why Does It Matter Here)?

MCP stands for Model Context Protocol — an open standard that lets AI assistants connect to external tools and data sources. Instead of copy-pasting context into a chat window, you give Claude a direct connection to your tools. Claude calls them when it needs them. For Stitch, that means Claude can: ---

Step 1: Get Your Stitch API Key

1

Sign in to Google Stitch

Go to stitch.withgoogle.com and sign in with your Google account. Create a project if you don't have one yet.

2

Generate an API key

In your Stitch project settings, find the API section and generate a new key. It will start with AQ. — keep it, you'll need it in a moment.

---

Step 2: Create .mcp.json in Your Project Root

This is the only file you need to create. Drop it in the root directory of whatever project you're working on in Claude Code:
.mcp.json 
{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"],
      "env": {
        "STITCH_API_KEY": "AQ.your-key-here"
      }
    }
  }
}
Replace `AQ.your-key-here` with the actual API key from Step 1. That's the entire config.
⚠

Don't commit your API key

Add .mcp.json to your .gitignore before committing. API keys in public repos get scraped within minutes.

---

Step 3: Restart Claude Code and Approve

MCP servers are loaded at session start — they don't hot-reload. Quit Claude Code completely and reopen it in your project directory. On startup, Claude Code will prompt: "Allow connection to MCP server 'stitch'?" — click Allow. That's it. Claude now has direct access to your Stitch designs. ---

Step 4: Verify It's Working

Ask Claude: *"What Stitch tools do you have available?"* If setup worked, it should list:
Tool What It Does Best For
build_site Builds full site from all screens, maps to routes Scaffolding an entire project
get_screen_code Returns HTML for one specific screen Component-level work
get_screen_image Downloads screenshot of a screen as base64 Visual reference for Claude
If Claude doesn't see the tools, check: Is Node.js installed? (node -v). Is the .mcp.json in the root of the directory you opened Claude Code in? Run the proxy manually to test: STITCH_API_KEY="your-key" npx @_davideast/stitch-mcp proxy — it should start without errors. ---

The Part Nobody Talks About: Using It Hands-Free

Here's where it gets interesting. Stitch MCP removes copy-paste friction. But you're still typing your prompts. And if you're the type who thinks faster than you type — which most people are — that's still a bottleneck. The workflow I use:
🎤
Speak your prompt
"Build the dashboard screen from Stitch, make the sidebar collapsible, use Tailwind"
MetaWhisp
⚡
Transcribed instantly, on-device
Whisper AI runs locally on your Mac's Neural Engine. No cloud, no delay.
~1 sec
🤖
Claude receives the prompt
Calls get_screen_code to pull the dashboard HTML from Stitch directly.
Claude Code
🔨
Code is ready
Dashboard component built from design, sidebar wired up, Tailwind classes applied. Zero copy-paste.
Done
Speaking is ~150 words per minute. Typing is ~50. For longer, detailed prompts — "take the settings screen, extract the form section, convert to React with Zod validation and a submit handler that calls `/api/settings`" — you're 3x faster dictating than typing. The combination is genuinely different. Stitch handles the visual layer. MetaWhisp handles the prompt layer. Claude handles the implementation layer. Each tool doing exactly one thing. ---

Real Prompts That Work Well

Once Stitch MCP is connected, these prompts give consistently good results:
🌟

Full site scaffold

"Use build_site to assemble all my Stitch screens into a Next.js project. Map each screen to a route based on its name."

🌟

Single component extraction

"Get the code for the pricing screen. Extract just the pricing card component and convert it to a reusable React component with TypeScript props."

🌟

Design-to-code with constraints

"Get the onboarding screen image and code. Implement it exactly as shown using Tailwind CSS, but make the steps dynamic — data should come from a props array."

🌟

Iterating on a design

"Get the dashboard screen image. The card layout doesn't scale well below 768px. Rewrite the grid using CSS Grid with auto-fill columns."

---

Troubleshooting

❓

Claude doesn't see the Stitch tools

The .mcp.json must be in the exact directory you opened Claude Code in. Check with ls .mcp.json. Then fully restart (quit, reopen) — not just a new conversation.

❓

npx fails or can't find the package

Run node -v and npx --version to confirm both are installed. Then test manually: STITCH_API_KEY="your-key" npx @_davideast/stitch-mcp proxy. It should start without errors.

❓

API key rejected

Valid keys start with AQ.. Regenerate from the Stitch dashboard if needed. Don't add extra spaces or quotes when pasting into .mcp.json.

---

Frequently Asked Questions

What is Google Stitch MCP? Google Stitch MCP is a Model Context Protocol server that connects Claude (or other AI assistants) directly to your Stitch design projects. It exposes three tools — build_site, get_screen_code, and get_screen_image — letting Claude read your designs and generate matching code without copy-pasting.
Do I need to pay for Google Stitch to use the MCP? No. Google Stitch is currently free during its beta period. You need a Google account and a free API key from stitch.withgoogle.com.
Does the Stitch MCP work with Claude Code on Mac? Yes. Claude Code reads .mcp.json from your project root automatically. Drop in the config, restart your session, and Claude gets access to the Stitch tools.
How does voice dictation work with Stitch MCP? Use a voice-to-text tool like MetaWhisp to dictate your design prompt. MetaWhisp transcribes your speech locally on-device (no cloud), pastes it directly into Claude Code, and Claude calls the Stitch MCP tools to pull the design and generate code. No typing needed.
What's the difference between get_screen_code and build_site? get_screen_code returns the raw HTML for one specific screen. build_site assembles multiple screens into a full site, maps them to routes, and returns the complete structure. Use get_screen_code for component-level work, build_site for scaffolding an entire project.
---
🎤

Stop typing prompts. Just say them.

MetaWhisp turns your voice into text in under a second — locally, privately, on your Mac's Neural Engine. No cloud, no subscription, no lag.

Download MetaWhisp free →
Related reading: