How to Connect Google Stitch to Coding Agents via MCP
Set up Stitch's MCP server so coding agents like Antigravity can list, read, and edit your Stitch design projects directly.
What is Stitch’s MCP integration?
Stitch’s MCP integration lets a coding agent talk to your Stitch design projects as a set of callable tools instead of exported files. Once connected, an agent can list your Stitch projects, read individual screens, request new generations, ask for edits, and create variations, all without you manually exporting HTML and dragging it into an editor. This matters if you move back and forth between design and implementation often, since the agent can pull the current state of a design straight from Stitch rather than working off a stale export.
TL;DR
- Stitch exposes its projects through MCP tools that let coding agents list projects, read screens, generate designs, request edits, and create variations directly.
- Setup starts in Stitch settings, where you create an API key under the API keys section before wiring anything into your coding tool.
- The key should stay server-side or agent-side only, never embedded in front-end application code where it could leak.
- Antigravity’s setup runs through its MCP servers panel, where you add the Stitch configuration and your key via the raw config view.
- A sanity check matters before real work: ask the agent to list your Stitch projects first, then point it at the specific project so you know it’s reading the right one.
- Google also publishes a CLI and SDK plus “Stitch skills” for design and build workflows, aimed at people who want to script the process instead of clicking through a browser.
- MCP is one of several handoff paths out of Stitch, alongside HTML/CSS export, Figma export, and direct publishing, so it’s worth choosing based on how tightly you want design and code loops connected.
Why use MCP instead of exporting files?
The standard Stitch workflow ends with a download: HTML, images, and a design file (design.md) zipped up and handed to a developer or dropped into a coding editor. That works fine for a one-time handoff. The friction shows up when you need to iterate, change a screen in Stitch, then re-export, then re-import, then re-explain to your coding agent what changed.
MCP collapses that loop. Instead of a static export, the agent has live access to the project through defined tools. It can ask Stitch what screens exist, pull the latest version of a screen, or even request a new variation on the agent’s own initiative if your workflow calls for it. For small teams or solo developers who treat design and code as a continuous back-and-forth rather than a single handoff, that’s a meaningful difference in how much manual re-syncing you have to do.
How do you set up the Stitch API key?
The key is generated inside Stitch itself. Open Stitch settings, find the API keys section, and create a new key. This key is what authenticates your coding agent’s requests to the Stitch MCP server, so treat it like any other API credential: keep it private, and keep it out of your application’s front-end code. A key embedded in client-side JavaScript is visible to anyone who opens dev tools, which defeats the purpose of scoping it to your account.
From there, the exact configuration steps depend on which coding tool you’re connecting. Google publishes setup instructions for different tools, and following those for your specific agent is the reliable path since MCP server configuration formats vary.
How do you connect Stitch to Antigravity?
Antigravity is one of the coding agents with a documented Stitch MCP path. The setup runs through Antigravity’s own MCP management interface:
- Open the agent panel menu in Antigravity.
- Navigate to MCP servers, then manage MCP servers.
- Open the raw config view.
- Add the Stitch MCP server configuration (from Google’s documentation) into that config.
- Supply the API key you generated in Stitch settings.
Once that’s saved and the connection is active, don’t jump straight into asking the agent to build something. Start by asking it to list your Stitch projects. This confirms the connection actually works and that the agent can see your account’s projects before you trust it with anything more specific. After that, point it at the project you want (for example, a named project rather than a vague description) and ask it to inspect the particular screens before it starts implementing. That inspection step is what gives you confidence the agent is working from the design you intended, not a guess.
What can an agent actually do once it’s connected?
Based on Stitch’s published MCP capabilities, the operations available to a connected agent include:
- Listing projects: seeing what exists in your Stitch workspace.
- Reading screens: pulling the current state of a specific screen or set of screens.
- Generating designs: creating new screens from a prompt, invoked by the agent rather than the Stitch browser UI.
- Requesting edits: asking for targeted changes to an existing screen.
- Creating variations: generating alternate directions on a screen, the same variation mechanic available in the Stitch interface itself.
Built like a system. Not vibe-coded.
Remy manages the project — every layer architected, not stitched together at the last second.
In practice, this means you can describe a build task to your coding agent (implement this dashboard as a React app, keep the sidebar consistent across screens) and have the agent itself go pull the correct screen references from Stitch rather than you manually exporting and attaching files each time something changes.
Is the MCP route worth it over plain export?
For a single project with one clean handoff, exporting the zip with HTML, images, and design.md is simpler and requires no API key setup at all. It’s a reasonable default if you’re building one app and moving to a coding agent once.
MCP earns its setup cost when the loop between design and code is ongoing. If you expect to keep refining screens in Stitch after the agent has already started implementing, or if you want the agent to be able to check the design system or pull a new screen without you intervening each time, the live connection removes a layer of manual syncing. It’s also the more natural fit if your team already automates parts of the build pipeline, since the CLI and SDK Google provides alongside MCP are built for scripting rather than clicking through a browser each time.
The tradeoff is that MCP setup is more steps than a download button: generating a key, finding the right config for your specific coding tool, and verifying the connection before trusting it. For a quick one-off project, that overhead may not pay for itself.
Frequently Asked Questions
What is MCP in the context of Stitch?
MCP (Model Context Protocol) is the mechanism Stitch uses to expose its design projects as tools a coding agent can call directly, covering actions like listing projects, reading screens, generating designs, requesting edits, and creating variations.
Where do I get a Stitch API key?
Inside Stitch’s own settings menu, under API keys. You create the key there and then use it to authenticate your coding agent’s connection to Stitch’s MCP server.
Which coding agents support Stitch’s MCP integration?
Antigravity is the specifically documented example, configured through its MCP servers panel. Google’s own setup instructions should be checked for other coding tools, since connecting MCP servers is tool-specific.
Should I use MCP or just export HTML and design.md?
Use plain export for a single clean handoff on a project you won’t keep bouncing back into Stitch for. Use MCP if you expect ongoing iteration between the Stitch project and your coding agent, since it avoids repeated manual re-exports.
Is there a way to automate Stitch outside the browser entirely?
Yes. Google publishes a CLI and SDK alongside the MCP integration and a set of “Stitch skills” for design and build workflows, intended for people who want to script parts of the process rather than work through the Stitch web interface each time.