Image Processor MCP Server

This MCP server provides tools for image processing and uploading to Vercel Blob storage. It allows you to:

1. Optimize and resize images (from local files or URLs)
2. Convert images to WebP format
3. Upload both versions to Vercel Blob storage

Features

• Image Optimization: Resize and optimize images for better performance
• WebP Conversion: Convert images to the WebP format for smaller file sizes
• Vercel Blob Integration: Automatically upload processed images to Vercel Blob storage
• Customizable Dimensions: Specify custom dimensions for image resizing
• URL Support: Process images from external URLs

Installation

The server is already installed and configured in the MCP settings file. It uses the Vercel Blob token from your environment variables.

Usage

You can use the MCP server in Claude by using the use_mcp_tool function:

For Local Images

<use_mcp_tool>
<server_name>image-processor</server_name>
<tool_name>process_and_upload_image</tool_name>
<arguments>
{
  "imagePath": "/path/to/image.png",
  "newName": "new-image-name",
  "width": 550,
  "height": 300
}
</arguments>
</use_mcp_tool>

For Images from URLs

<use_mcp_tool>
<server_name>image-processor</server_name>
<tool_name>process_and_upload_image_from_url</tool_name>
<arguments>
{
  "imageUrl": "https://example.com/image.jpg",
  "newName": "new-image-name",
  "width": 550,
  "height": 300
}
</arguments>
</use_mcp_tool>

Parameters for Local Images

• imagePath (required): Path to the image file to process
• newName (required): New name for the processed image (without extension)
• width (optional): Width to resize the image to (default: 550)
• height (optional): Height to resize the image to (default: 300)

Parameters for URL Images

• imageUrl (required): URL of the image to process
• newName (required): New name for the processed image (without extension)
• width (optional): Width to resize the image to (default: 550)
• height (optional): Height to resize the image to (default: 300)

Response

The server will return a JSON response with the following structure:

{
  "success": true,
  "message": "Successfully processed and uploaded image: new-image-name",
  "results": {
    "png": {
      "fileName": "new-image-name_small.png",
      "localPath": "/path/to/temp/new-image-name_small.png",
      "blobUrl": "https://vercel-blob-url/new-image-name_small.png"
    },
    "webp": {
      "fileName": "new-image-name.webp",
      "localPath": "/path/to/temp/new-image-name.webp",
      "blobUrl": "https://vercel-blob-url/new-image-name.webp"
    }
  }
}

Implementation Details

The server uses:

• Sharp: For image processing and optimization
• @vercel/blob: For uploading to Vercel Blob storage
• fs-extra: For file system operations

Examples

Example 1: Processing a Local Image

<use_mcp_tool>
<server_name>image-processor</server_name>
<tool_name>process_and_upload_image</tool_name>
<arguments>
{
  "imagePath": "/pathto_file/image_name.png",
  "newName": "test-processed-image",
  "width": 550,
  "height": 300
}
</arguments>
</use_mcp_tool>

Example 2: Processing an Image from URL

<use_mcp_tool>
<server_name>image-processor</server_name>
<tool_name>process_and_upload_image_from_url</tool_name>
<arguments>
{
  "imageUrl": "https://pplx-res.cloudinary.com/image/upload/v1749567759/pplx_project_search_images/6dff647e4fb1083aecf9ea6b1d49ea19386be588.jpg",
  "newName": "cloud-image",
  "width": 550,
  "height": 300
}
</arguments>
</use_mcp_tool>

Both examples will:

1. Take the image (from local path or URL)
2. Optimize and resize it to 550x300 pixels
3. Create a PNG version with "_small" suffix
4. Create a WebP version
5. Upload both to Vercel Blob
6. Return the URLs of the uploaded images