MCP Image Processor To Vercel Blob

🚀 画像処理MCPサーバー

このMCPサーバーは、画像処理とVercel Blobストレージへのアップロードを行うツールを提供します。以下のことが可能です：

1. 画像を最適化し、リサイズする（ローカルファイルまたはURLから）
2. 画像をWebP形式に変換する
3. 両方のバージョンをVercel Blobストレージにアップロードする

✨ 主な機能

• 画像最適化：画像をリサイズし、最適化してパフォーマンスを向上させます。
• WebP変換：画像をWebP形式に変換してファイルサイズを小さくします。
• Vercel Blob統合：処理された画像を自動的にVercel Blobストレージにアップロードします。
• カスタマイズ可能なサイズ：画像のリサイズ時にカスタムサイズを指定できます。
• URLサポート：外部URLからの画像を処理できます。

📦 インストール

サーバーはMCP設定ファイルにすでにインストールされ、設定されています。環境変数からVercel Blobトークンを使用します。

💻 使用例

基本的な使用法

Claudeでuse_mcp_tool関数を使用してMCPサーバーを利用できます。

ローカル画像の場合

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

URLからの画像の場合

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

ローカル画像のパラメータ

• imagePath（必須）: 処理する画像ファイルのパス
• newName（必須）: 処理後の画像の新しい名前（拡張子なし）
• width（オプション）: 画像をリサイズする幅（デフォルト: 550）
• height（オプション）: 画像をリサイズする高さ（デフォルト: 300）

URL画像のパラメータ

• imageUrl（必須）: 処理する画像のURL
• newName（必須）: 処理後の画像の新しい名前（拡張子なし）
• width（オプション）: 画像をリサイズする幅（デフォルト: 550）
• height（オプション）: 画像をリサイズする高さ（デフォルト: 300）

レスポンス

サーバーは以下の構造の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"
    }
  }
}

高度な使用法

例1: ローカル画像の処理

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

例2: 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>

両方の例では、以下のことが行われます：

1. 画像を取得する（ローカルパスまたはURLから）
2. 画像を最適化し、550x300ピクセルにリサイズする
3. "_small"サフィックス付きのPNGバージョンを作成する
4. WebPバージョンを作成する
5. 両方をVercel Blobにアップロードする
6. アップロードされた画像のURLを返す

🔧 技術詳細

サーバーは以下を使用しています：

• Sharp：画像処理と最適化
• @vercel/blob：Vercel Blobストレージへのアップロード
• fs-extra：ファイルシステム操作