# MCP-GDX-Image-Webify

![Node.js](https://img.shields.io/badge/Node.js-6DA55F?logo=node.js&logoColor=white)
![npm](https://img.shields.io/badge/npm-CB3837?logo=npm&logoColor=fff)
![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=fff)
[![Sharp](https://img.shields.io/badge/sharp-gray?logo=sharp)](https://github.com/lovell/sharp)
[![Modelcontextprotocol](https://img.shields.io/badge/modelcontextprotocol-gray?logo=modelcontextprotocol)](https://img.shields.io/badge/Modelcontextprotocol)

![Coverage](https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/geckod22/4b0f7c71e830d845a8758300d862652c/raw/mcp-gdx-image-webify-coverage.json)

## 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
[![Node.js](https://img.shields.io/badge/nodejs-v22.17.0%20or%20higher-5FA04E?logo=nodedotjs&logoColor=fff)](https://nodejs.org/)
[![NPM](https://img.shields.io/badge/npm-v10.9.2%20or%20higher-CB3837?logo=npm&logoColor=fff)](https://www.npmjs.com/)

### Install

1. Clone the repository:

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

2. Install deps

```bash
npm install
```

3. Build

```bash
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:

```bash
{
  "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:

```bash
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](https://github.com/lovell/sharp) for high-performance image processing, licensed under the Apache License 2.0.