MCP Server
Connect Stitch to Claude Code, Cursor, Gemini CLI, and Antigravity via the Model Context Protocol.
What is the MCP Server?
The Stitch MCP (Model Context Protocol) server connects Google Stitch to AI-powered code editors and assistants. MCP is an open standard that lets AI tools communicate with external services. With the Stitch MCP server, tools like Claude Code, Cursor, Gemini CLI, and Antigravity can directly generate and edit Stitch designs as part of the coding workflow.
Setting Up the MCP Server
Install the MCP server package and add it to your editor's MCP configuration. For Claude Code, add it to your .mcp.json file. For Cursor, configure it in the MCP settings panel. Once connected, your AI coding assistant gains new capabilities: it can generate UI designs, export code, and create DESIGN.md files — all without leaving your editor.
Using Stitch via MCP
Once connected, simply ask your AI coding assistant to design something. For example, in Claude Code: "Use Stitch to design a dashboard for my analytics app, then implement it in React." The assistant will call the Stitch MCP server to generate the design, export the code, and then implement it in your project — maintaining design consistency throughout.
Supported Tools
The Stitch MCP server works with any MCP-compatible tool. Currently, the most popular integrations are Claude Code (Anthropic), Cursor (AI code editor), Gemini CLI (Google), and Antigravity (Google). As the MCP ecosystem grows, more tools will be able to connect to Stitch. The server implements the standard MCP protocol, so any compliant client will work.
Tips & Best Practices
- 1Keep the MCP server running in the background during development sessions.
- 2Combine MCP with DESIGN.md for the best design-to-code consistency.
- 3Use the MCP server for iterative design — ask your AI assistant to refine designs.
- 4Check that your generation quota allows for the number of MCP calls you plan.
- 5Test the MCP connection with a simple generation request before starting a complex project.