MCP server setup

HolyStitch runs as an MCP (Model Context Protocol) server inside your IDE. Once configured, your AI assistant can call the convert_stitch_to_react tool directly.

Prerequisites

Before configuring your IDE, build the server from source:

git clone https://github.com/BaselAshraf81/holystitch
cd holystitch
npm install
npm run build

Note the full absolute path to the cloned folder — you’ll need it in the config below.

Get your Stitch API key

Go to your Stitch project settings and copy your API key. This key is passed to the server via the STITCH_API_KEY environment variable.

STITCH_API_KEY is required when converting by projectId. If you pass screens directly via htmlScreens, the key is not needed.

Configure your IDE

Claude Desktop
Cursor
Windsurf
Other MCP hosts

Open your Claude Desktop config file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

Add the holystitch entry inside mcpServers:

claude_desktop_config.json

{
  "mcpServers": {
    "holystitch": {
      "command": "node",
      "args": ["/Users/alice/holystitch/packages/mcp-server/dist/index.js"],
      "env": {
        "STITCH_API_KEY": "your-api-key-here"
      }
    }
  }
}

Replace /Users/alice/holystitch with the actual path where you cloned the repo.Restart Claude Desktop after saving the file.

Open Cursor’s MCP settings file at ~/.cursor/mcp.json (create it if it doesn’t exist) and add:

~/.cursor/mcp.json

{
  "mcpServers": {
    "holystitch": {
      "command": "node",
      "args": ["/Users/alice/holystitch/packages/mcp-server/dist/index.js"],
      "env": {
        "STITCH_API_KEY": "your-api-key-here"
      }
    }
  }
}

Replace /Users/alice/holystitch with the actual path where you cloned the repo.Reload the Cursor window after saving.

Open Windsurf’s MCP config file at ~/.codeium/windsurf/mcp_config.json and add:

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "holystitch": {
      "command": "node",
      "args": ["/Users/alice/holystitch/packages/mcp-server/dist/index.js"],
      "env": {
        "STITCH_API_KEY": "your-api-key-here"
      }
    }
  }
}

Replace /Users/alice/holystitch with the actual path where you cloned the repo.Restart Windsurf after saving.

Any MCP-compatible host accepts the same mcpServers block format. Point args at the built entry point and pass STITCH_API_KEY in the env map:

{
  "mcpServers": {
    "holystitch": {
      "command": "node",
      "args": ["/absolute/path/to/holystitch/packages/mcp-server/dist/index.js"],
      "env": {
        "STITCH_API_KEY": "your-api-key-here"
      }
    }
  }
}

Consult your IDE’s documentation for the exact config file location.

Path format by operating system

The args array must contain an absolute path to the built dist/index.js file.

macOS / Linux
Windows

"args": ["/Users/alice/holystitch/packages/mcp-server/dist/index.js"]

Use forward slashes or escaped backslashes — both are valid in JSON:

"args": ["C:/Users/alice/holystitch/packages/mcp-server/dist/index.js"]

"args": ["C:\\Users\\alice\\holystitch\\packages\\mcp-server\\dist\\index.js"]

Environment variables

string

Your Google Stitch API key. Required when using projectId to fetch screens from the Stitch API. Not required when passing screens directly via htmlScreens.Obtain this from your Stitch project settings page.

Verify the setup

Once your IDE is configured and restarted, ask your AI assistant:

List available MCP tools

You should see convert_stitch_to_react in the response. To run a conversion:

Convert my Stitch project 12828868370598194178 into a Next.js app at /Users/alice/projects/my-app

The project ID is in the Stitch URL: https://stitch.withgoogle.com/project/12828868370598194178

Get Started

Configuration

How It Works

Output

Contributing

Prerequisites

Get your Stitch API key

Configure your IDE

Path format by operating system

Environment variables

Verify the setup

​Prerequisites

​Get your Stitch API key

​Configure your IDE

​Path format by operating system

​Environment variables

​Verify the setup

Prerequisites

Get your Stitch API key

Configure your IDE

Path format by operating system

Environment variables

Verify the setup