Home · Setup · VS Code

MCP Image Tools in VS Code

Resize, convert, compress and watermark images, pure JavaScript. It reads PNG, JPEG, BMP, GIF and TIFF, resizes with inside, cover or exact fit, converts formats, compresses with a byte report, crops, batches thumbnails, strips metadata by re-encoding, and watermarks with the shared business name or custom text.

In agent mode image_resize and image_convert are reachable mid-task, so "shrink the screenshots in this PR to 1200 wide before I commit" runs as one instruction rather than a manual export pass.

What you get in VS Code

You say	Tool
Make this 1200 px wide and under 300 KB.	`image_compress`
Thumbnail these five and watermark them.	`image_thumbnails then image_watermark`
Strip the GPS coordinates before I send this.	`image_strip_metadata`

Quantizing a 300x220 noisy PNG to 16 colours was measured against the original: 115,451 bytes against 39,262, 2.9 times larger, because quantizing destroys the row similarity PNG's own compression depends on. That is why quality only applies to a JPEG output and the extension of out_path picks the codec.

Install it in VS Code

The file is .vscode/mcp.json, and the key inside it is servers.

Scope	Path
This workspace	`<workspace>/.vscode/mcp.json`
Every workspace	`the user profile mcp.json, opened by the MCP: Open User Configuration command`

// .vscode/mcp.json  (the key is "servers")
{
  "servers": {
    "image": {
      "command": "npx",
      "args": ["-y", "@theluckystrike/mcp-image"]
    }
  }
}

Or from a terminal:

code --add-mcp '{"name":"image","command":"npx","args":["-y","@theluckystrike/mcp-image"]}'

VS Code asks you to confirm you trust the server and its capabilities before it starts. Nothing runs until you answer.

The npm publish of @theluckystrike/mcp-image is pending; until then use the .mcpb bundle or a clone and build from the latest release.

No install: the hosted endpoint

There is no hosted endpoint for this one yet. MCP Image Tools runs locally over stdio with the config above, which is also the only form in which it reads and writes files on your own disk. Three of the servers in this collection are served at https://mcp.zovo.one/mcp/<name> over MCP streamable HTTP: time-tracker, price-tracker and invoice.

VS Code notes worth knowing first

The top-level key is "servers", not "mcpServers". A config pasted from a Claude Desktop or Cursor README parses cleanly, contributes no servers, and gives you no error to read, which makes it the most expensive one-word mistake here. Alongside it an "inputs" array holds secrets. The newer Agent Host reads a workspace .mcp.json instead.

Free: info, resize, convert, compress, crop and strip-metadata on images up to 4 MP; batches of 5. Pro is $19 once, verified offline.

Questions

Why does my mcp.json do nothing?

The key is servers, not mcpServers. A config copied from a Claude Desktop README parses cleanly and contributes nothing. Rename it. On the newer Agent Host, use a workspace .mcp.json instead.

Do I have to edit the file at all?

No. code --add-mcp takes the server object on the command line, and MCP: Add Server in the palette asks whether the target is Workspace or Global.

Where do the MCP Image Tools tools show up?

In Chat, behind the tools picker, once the server has started. Adding or changing one raises a prompt asking you to confirm you trust it; if the picker is empty, that prompt is usually still waiting.

MCP Image Tools in detail · The same server in Cursor and Windsurf · Every server in VS Code · Guides · VS Code docs