Google Stitch turns prompts into UI designs, and its MCP server pulls those designs straight into a coding agent — so Claude Code or Cursor can generate a screen in Stitch and implement it in your codebase in one flow. The API is free, setup is close to zero-config, and it works on any MCP-compatible editor. Here's how to wire it in.
What it does
The Stitch server exposes your Stitch designs as MCP tools: an agent asks for a settings page or a pricing table, Stitch generates it, and the agent receives the result and writes the React or HTML to match. It closes the gap between "design tool" and "code" without a manual export-and-rebuild step in the middle.
Step 1 — enable the API
Create a Google Cloud project and enable the Stitch API. You can authenticate two ways: gcloud auth application-default login for OAuth, or a non-expiring API key generated in Stitch settings and pasted into your config. The key is the simpler path for a solo setup and doesn't need the gcloud CLI installed.
Step 2 — add the server
The server runs on demand with npx, so there's nothing to install globally. Point your client at the package and set the project:
claude mcp add stitch -e GOOGLE_CLOUD_PROJECT=your-project -- npx -y @google/stitch-mcp
Cursor and other clients take the same command in their MCP config file.
Step 3 — prompt for a design
Ask the agent for what you need — "a dashboard with a sidebar and three stat cards" — and it calls Stitch, gets the design back, and implements it in your project. You stay in the editor the whole time, so the design never leaves your workflow as a screenshot to reverse-engineer.
Where it fits
Stitch joins a growing design category. Pair it with Figma for existing files, Framer for sites, or Canva for assets. For a front-end workflow, the React loadout sets up the rest.
Going further
New to client setup? See the Cursor setup guide and Claude Code setup. Browse the design category, and keep third-party servers vetted with how to vet MCP servers.