WebPerfect MCP Server

📷✨ WebPerfect MCP Server

Transform your images into web-optimized masterpieces with AI-powered precision

License: MIT

Node.js Version

Sharp

</div>

✨ Overview

WebPerfect is a cutting-edge MCP server that revolutionizes image optimization for the web. Using advanced AI algorithms and sophisticated processing techniques, it automatically enhances your images while dramatically reducing file sizes - all without compromising visual quality.

🚀 Key Benefits

Intelligent Processing: AI-powered algorithms adapt to each image's unique characteristics
Superior Quality: Enhanced visual clarity with smart sharpening and noise reduction
Maximum Compression: Achieve up to 80% size reduction while preserving image quality
Batch Automation: Process entire directories with a single command
Web Optimized: Perfect for modern web applications and responsive designs

🛠 Features

🔄 Advanced Image Processing Pipeline

Strong noise reduction using median filtering
Intelligent auto levels and curves based on image entropy
Advanced texture enhancement with modulation and sharpening
Smart resolution optimization (up to 4K)
Optimized WebP conversion

🔧 Tools

📦 `process_images`

Effortlessly process and optimize entire image collections with our advanced enhancement pipeline.

{
  inputDir: string;      // Directory containing input images
  outputDir: string;     // Directory for optimized output
}

📊 Resources

📈 Resource Templates

logs/{date}: Access processing logs by date (YYYY-MM-DD)

{
  "date": "2024-01-20",
  "entries": [{
    "timestamp": "2024-01-20T10:00:00Z",
    "imagesProcessed": 15,
    "totalInputSize": "5.2MB",
    "totalOutputSize": "1.1MB",
    "compressionRatio": "78.8%",
    "averageProcessingTime": "1.2s"
  }]
}

stats/monthly/{month}: Monthly statistics (YYYY-MM)

{
  "month": "2024-01",
  "totalImagesProcessed": 450,
  "averageCompressionRatio": "82%",
  "popularFormats": {
    "input": ["JPEG", "PNG"],
    "output": ["WebP"]
  },
  "totalStorageSaved": "150MB"
}

Static Resources

stats/summary: Overall processing statistics

{
  "totalImagesProcessed": 5280,
  "averageCompressionRatio": "81%",
  "totalStorageSaved": "1.8GB",
  "popularEnhancements": [
    "noise_reduction",
    "auto_levels_curves",
    "texture_enhancement"
  ],
  "performanceMetrics": {
    "averageProcessingTime": "1.5s",
    "peakThroughput": "45 images/minute"
  }
}

config/optimization-presets: Available optimization presets

{
  "presets": {
    "web_standard": {
      "maxWidth": 1920,
      "format": "webp",
      "quality": 85,
      "enhancements": ["noise_reduction", "auto_levels_curves"]
    },
    "web_high_quality": {
      "maxWidth": 3840,
      "format": "webp",
      "quality": 90,
      "enhancements": [
        "noise_reduction",
        "auto_levels_curves",
        "texture_enhancement"
      ]
    },
    "thumbnail": {
      "maxWidth": 400,
      "format": "webp",
      "quality": 80,
      "enhancements": ["noise_reduction"]
    }
  }
}

🚀 Getting Started

📥 Installation

Clone the repository:

git clone https://github.com/splendasucks/webperfect-mcp-server.git
cd webperfect-mcp-server

Install dependencies:

npm install

Build the server:

npm run build

🤖 Usage with Claude

Add the server to your Claude MCP settings (typically in claude_desktop_config.json):

{
  "mcpServers": {
    "webperfect": {
      "command": "node",
      "args": ["/path/to/webperfect-mcp-server/build/index.js"],
      "env": {}
    }
  }
}

Restart Claude to load the MCP server.
The server will be available through Claude's MCP tools and resources:

// Process a batch of images
<use_mcp_tool>
<server_name>webperfect</server_name>
<tool_name>process_images</tool_name>
<arguments>
{
  "inputDir": "/path/to/input",
  "outputDir": "/path/to/output"
}
</arguments>
</use_mcp_tool>

// Access processing statistics
<access_mcp_resource>
<server_name>webperfect</server_name>
<uri>stats/summary</uri>
</access_mcp_resource>

📋 Requirements

📦 Node.js >= 16
🖼️ Sharp image processing library
🔌 Model Context Protocol SDK