README.md•3.9 kB
# 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