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`

If you also run Claude Desktop, the shortest path there is one click: image.mcpb from the bundle catalog opens as an extension, with no JSON and no terminal. VS Code reads its own config, so here it is:

// .vscode/mcp.json  (the key is "servers")
{
  "servers": {
    "image": {
      "command": "node",
      "args": ["/absolute/path/to/mcp-servers/servers/image/dist/index.js"]
    }
  }
}

Or from a terminal:

code --add-mcp '{"name":"image","command":"node","args":["/absolute/path/to/mcp-servers/servers/image/dist/index.js"]}'

The node command above wants a built file. From a clone, once:

git clone https://github.com/theluckystrike/mcp-servers.git
cd mcp-servers && npm install
npm run build -w packages/mcp-license -w servers/image

That writes servers/image/dist/index.js, and its absolute path is the one argument the config needs.

The npm packages are not published yet, so the form below returns a 404 today. It is here because it is what the entry becomes the day the publish lands, with nothing else changed:

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.

Nothing is published to npm yet, so the working install paths are the ones above: the .mcpb bundle from the bundle catalog, a clone and build, or the hosted URL.

No install: the hosted endpoint

The same server runs at https://mcp.zovo.one/mcp/image over MCP streamable HTTP, no install. Mint a free token with curl https://mcp.zovo.one/mcp/token, or use a Pro key. It has no filesystem, so a file comes back as a one-hour download link.

{
  "servers": {
    "image": {
      "url": "https://mcp.zovo.one/mcp/image",
      "headers": { "Authorization": "Bearer <token>" }
    }
  }
}

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 · Buy Pro

Related guides & tools

Resize, compress and watermark images from a chat message