# stitch-mcp-server [Health: Active]

**Category:** 📐 Architecture & Design  
**Repository:** https://github.com/0x-Professor/Stitch-mcp-server  
**GitHub Stars:** 1  
**npm Downloads (last month):** 1115  
**Views:** 0  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/stitch-mcp-server

## Description
Enterprise-ready MCP Server for Google Stitch SDK - AI-powered UI generation for Claude, Cursor, Cline, and VS Code. Generate beautiful web interfaces from text prompts using Model Context Protocol.

## Tools
Capabilities this server exposes over MCP:

- **create_project** — Create a new Stitch project
- **list_projects** — List all available Stitch projects
- **generate_screen** — Generate a UI screen from a text prompt within a project
- **edit_screen** — Edit an existing screen using a text prompt
- **generate_variants** — Generate design variants of an existing screen
- **get_screen_code** — Retrieve the HTML code download URL (and extract full HTML if possible) for a generated screen
- **get_screen_image** — Retrieve the base64 screenshot image download URL for a generated screen.
- **generate_and_fetch_code** — One-step tool to generate a UI screen and immediately retrieve its HTML code
- **scaffold_project_files** — Maps a specific screen from a project to a local file path. Use this to save UI designs directly into the user's workspace.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "stitch-mcp-server": {
    "command": "npx",
    "args": ["-y","stitch-mcp-server@latest"],
    "env": {
      "STITCH_API_KEY": ""
    }
  }
}
```

**Requires environment variables:** `STITCH_API_KEY` — the values above are empty placeholders; fill in real credentials before running (see the repository for what each one is for).

## Documentation

## 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:

```bash
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:

```bash
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.

_Full upstream README: https://allmcps.com/mcp/stitch-mcp-server/readme_