mcp-gdx-image-webify

MCP-GDX-Image-Webify

!Node.js !npm !TypeScript  

!Coverage

Description

MCP-GDX-Image-Webify is an MCP Server (Stdio) based on Node.js and typescript, that allows you to convert images into the WebP or AVIF formats using the sharp library. It supports multiple image formats such as JPG, JPEG, PNG, WebP, TIFF, AVIF, GIF, and SVG. The tool allows you to specify the quality of the conversion and the output directory for the converted images. On result it shows original size, new size and saving.

Installation

Prerequisites

 

Install

1. Clone the repository:

git clone https://github.com/geckod22/MCP-GDX-Image-Webify.git
cd MCP-GDX-Image-Webify

1. Install deps

npm install

1. Build

npm run build

MCP Client configuration

<details open> <summary>Automatic</summary>

Just run: ``bash npm run installToClients `` then follow the steps.

At the moment the script supports the following clients: Claude Desktop, Gemini Cli, Visual Code </details> <details> <summary>Manual</summary> General config:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "node",
      "args": ["your_path\\MCP-GDX-Image-Webify\\build\\index.js"]
    }
  }
}

<details> <summary>Claude Desktop</summary> Follow the <a href="https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_other-options-to-add-an-mcp-server">guide</a> and use the standard config from above. </details> <details> <summary>Copilot / VS Code</summary>

Follow the MCP install <a href="https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_other-options-to-add-an-mcp-server">guide</a>, and use the above general config. </details> <details> <summary>Cursor</summary>

Click the button to install:

Go to Cursor Settings -> MCP -> New MCP Server. Use the General config above. </details> <details> <summary>Gemini CLI</summary>

Follow the <a href="https://github.com/google-gemini/gemini-cli/blob/main/docs/tools/mcp-server.md#how-to-set-up-your-mcp-server">MCP guide</a> and use the standard config from above.

</details> <details> <summary>Windsurf</summary> Follow the <a href="https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json">configure MCP guide</a> using the standard config from above. </details> </details>

Your first prompt

Ex of usage. Open your project folder and run gemini cli, then Enter the following prompt to check if everything is working:

Convert the images in the current project images folder to webp with quality 80.

Testing

Run the Inspector:

npx @modelcontextprotocol/inspector node build/index.js

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests to improve the project.

License

This project is licensed under the MIT License.

Credits

This project uses Sharp for high-performance image processing, licensed under the Apache License 2.0.