# 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:

```json
{
  "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

```javascript
<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

```javascript
<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