Mask Editor

Mask Editor

An MCP App that lets you drop an image onto a canvas, paint a selection with a brush tool, and send the resulting mask to the server.

Setup

npm install
npm run build

Running

npm run serve        # serve pre-built dist/
npm start            # build + serve
npm run dev          # watch + serve (rebuilds on change)

Server starts at http://localhost:3001/mcp (stateless streamable HTTP).

Set PORT env var to change the port.

Masks are saved to ./output/ as <name>_mask_<timestamp>.png.

Connecting an MCP Client

Claude Desktop

Edit ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "mask-editor": {
      "url": "http://localhost:3001/mcp"
    }
  }
}

Restart Claude Desktop. The open-mask-editor tool will appear in the tools list.

Cursor

Open Settings → MCP and add a new server:

• Type: HTTP
• URL: http://localhost:3001/mcp

VS Code (Continue extension)

In .continue/config.json:

{
  "mcpServers": [
    {
      "name": "mask-editor",
      "transport": {
        "type": "http",
        "url": "http://localhost:3001/mcp"
      }
    }
  ]
}

Any MCP client (generic)

The server uses the Streamable HTTP transport (stateless). Point your client at:

http://localhost:3001/mcp

No API key or session setup required.

Testing with basic-host

git clone --branch "v$(npm view @modelcontextprotocol/ext-apps version)" --depth 1 \
  https://github.com/modelcontextprotocol/ext-apps.git /tmp/mcp-ext-apps

cd /tmp/mcp-ext-apps/examples/basic-host && npm install
SERVERS='["http://localhost:3001/mcp"]' npm run start

Open http://localhost:8080, then call the open-mask-editor tool.

Usage

1. Drop an image onto the canvas (or click Upload Image)
2. Paint a selection using the brush — adjust size with the slider
3. Click Confirm Mask to generate a black/white mask and send it to the server
4. The saved file path is shown in the status bar