MCP Image Processor To Vercel Blob

🚀 Image Processor MCP Server

This Image Processor MCP Server offers a suite of tools for image processing and uploading to Vercel Blob storage. It enables you to optimize and resize images, convert them to WebP format, and seamlessly upload the processed images to Vercel Blob.

✨ Features

• Image Optimization: Resize and optimize images to enhance performance.
• WebP Conversion: Transform images into the WebP format for reduced 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 sourced from external URLs.

📦 Installation

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

💻 Usage Examples

Basic Usage

You can leverage 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>

Advanced Usage

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"
    }
  }
}

🔧 Technical Details

The server relies on the following technologies:

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

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 perform the following steps:

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