Stitch MCP Server

What stitch-mcp-server does

stitch-mcp-server exposes Google's Stitch UI generation capabilities to MCP clients such as Claude Desktop, Cursor, and Cline in VS Code. An AI assistant can create and manage Stitch projects, describe a screen in natural language, revise an existing design, and request alternative designs. Generated screens can be inspected as HTML or previewed through a screenshot URL.

The server also supports moving generated output into a local project. Its scaffolding operation writes HTML to project files, making it useful for prototyping pages or components from an assistant-driven workflow. A combined generation-and-fetch operation reduces the number of calls needed when the immediate goal is obtaining the generated source.

How it works

The server communicates with the Stitch UI Generation API using the Google Stitch SDK and exposes the operations through MCP. Typical workflows begin by creating or selecting a project, then generating a screen from a description. Subsequent calls can edit that screen, create design alternatives, retrieve its HTML, or obtain a screenshot URL.

Two MCP resources provide project context: stitch://projects lists projects, while stitch://projects/{id}/screens lists the screens associated with a project. The create_web_app prompt provides a guided workflow for taking a web app idea through generation and file scaffolding.

Setup and configuration

Node.js 18 or newer and a Stitch API key are required. The key is supplied through the STITCH_API_KEY environment variable. Google Stitch provides the key after signing in at stitch.google.com.

The interactive setup command is:

npx stitch-mcp-server setup

The setup wizard asks which supported AI tools to configure, collects the API key, and updates their MCP configuration. For manual setup, register the server with the npx command and pass -y stitch-mcp-server@latest as its argument. Add STITCH_API_KEY to the server's environment configuration, then restart the client.

For local development, clone the repository, install dependencies, build the TypeScript project, and start it with the key in the environment:

npm install
npm run build
STITCH_API_KEY=your-key npm start

Tools and capabilities

The MCP tool set includes:

• create_project: creates a Stitch project.
• list_projects: returns the user's projects.
• generate_screen: creates a UI screen from a description.
• edit_screen: changes an existing screen using a prompt.
• generate_variants: produces alternative designs.
• get_screen_code: retrieves a screen's HTML source.
• get_screen_image: returns a screenshot URL.
• generate_and_fetch_code: generates a screen and fetches its code in one operation.
• scaffold_project_files: writes generated HTML into local files.

Inputs are checked with Zod schemas. File writes include path-traversal protection so output cannot be written outside the workspace. API key files created by the setup flow use restricted permissions, and HTTP responses receive validation and error handling.

Limitations and notes

The server depends on access to Google's Stitch UI Generation API, so a valid Stitch API key is needed for operation. Generated output is HTML, and the local export workflow writes that HTML into project files; additional application logic or framework conversion is outside the listed capabilities. The package uses a standard MCP configuration with npx, and the documented runtime requirement is Node.js 18 or newer.