Model Context Protocol (MCP) AI連携

SmallPictの画像最適化ツールをAIエージェントに直接接続：Claude Desktop, Cursor, Google Antigravity, OpenCode, Windsurf。

SmallPict Model Context Protocol (MCP) サーバー

SmallPict MCP Server (@smallpict/mcp) は、オープンスタンダードである Model Context Protocol に準拠しており、大規模言語モデル（LLM）や自律型AIコーディングエージェントに、画像検査、圧縮、フォーマット変換、CDNキャッシュ管理のためのネイティブツールを提供します。

Interactive Architecture Flowchart

End-to-End Image Processing & Edge CDN Flow

Sub-50ms image optimization lifecycle from client upload to Cloudflare Enterprise edge delivery.

Origin Request

Client Application

WordPress / SDK / API

Uploads raw image binary with HMAC-SHA256 signature and UUID v4 idempotency key.

Phase 1 Ready

Cache & Delivery

Cloudflare Edge CDN

Global Edge PoPs

Checks global edge cache. On cache HIT, delivers AVIF/WebP in <20ms worldwide.

Phase 2 Ready

Auth & Scoping

SmallPict Go Gateway

AWS Lambda / API Gateway

Validates HMAC credentials, verifies quota limits, and scopes access to customer_id.

Phase 3 Ready

Transcoding

libvips SIMD Worker

High-Speed C-Engine

Multi-threaded quantization transcode to AVIF & WebP with 0 visual loss and ~88% compression.

Phase 4 Ready

Persistent Sync

S3 Pipeline & Storage

Global Object Store

Stores optimized output, invalidates outdated cache tags, and hydrates Cloudflare Edge.

Phase 5 Ready

Zero Data Interception:End-to-end HMAC validation & SHA256 integrity check

Engine: libvips SIMD·Latency: <50ms

⚡ 主な特徴

多様なAIエージェントに対応: Claude for Desktop、Cursor IDE、Google Antigravity (AGY)、OpenCode、Windsurf、Cline / Roo Code など、MCPをサポートするあらゆる環境で動作します。
ローカルビルド不要: Node.js 18+ 環境があれば npx -y @smallpict/mcp で即座に実行可能。
堅牢なセキュリティ設計: 標準入出力 (stdio) 経由で通信し、ログ出力はすべて stderr にルーティングされるため、JSON-RPC通信ストリームを汚染しません。
本番・サンドボックス両対応: 本番APIキー (sp_live_...) と無料サンドボックスキー (sp_test_...) の両方をサポート。

🛠️ 利用可能なMCPツール一覧

接続が完了すると、AIエージェントは以下の3つのツールを自動的に認識して実行できます：

1. `smallpict_optimize_image`

ローカルの画像ファイルまたはWeb上の画像URLを、最大88%の削減率で次世代フォーマット（WebP, AVIF）に圧縮・変換します。

パラメータ	型	必須	説明
`image_path`	`string`	必須	ローカルファイルの絶対/相対パス、または公開HTTP/HTTPS画像URL。
`target_format`	`string`	任意	出力フォーマット: `webp`（デフォルト）, `avif`, `jpg`, `png`。
`quality`	`number`	任意	圧縮品質: `1`〜`100`（デフォルト: `80`）。
`mode`	`string`	任意	最適化モード: `balanced`（デフォルト）, `aggressive`, `ultra`, `lossless`。
`max_long_edge_px`	`number`	任意	アスペクト比を維持した最長辺の最大ピクセルサイズ制限。
`output_path`	`string`	任意	カスタムの保存先パス（省略時は同一フォルダに新拡張子で保存）。

2. `smallpict_get_quota`

現在のSmallPictアカウントの契約プラン、月間クォータ上限、消費済みバイト数、残り帯域を確認します。

パラメータ	型	必須	説明
(なし)	-	-	設定されたAPIキーを使用してアカウントの最新状態を取得します。

3. `smallpict_purge_cdn_cache`

画像アセットを更新した後、Cloudflare Edge CDNのエッジキャッシュを即座にパージします。

パラメータ	型	必須	説明
`urls`	`string[]`	任意	キャッシュを即時無効化する画像URLまたはCDN相対パスの配列。
`purge_all`	`boolean`	任意	対象ドメインの全キャッシュを無効化するかどうか（デフォルト: `false`）。

🚀 各種AIクライアントでの設定方法

1. Claude for Desktop

claude_desktop_config.json ファイルに以下の設定を追加します：

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Linux: ~/.config/Claude/claude_desktop_config.json

JSON

{  "mcpServers": {    "smallpict": {      "command": "npx",      "args": [        "-y",        "@smallpict/mcp"      ],      "env": {        "SMALLPICT_API_KEY": "sp_live_YOUR_API_KEY"      }    }  }}

Claude Desktopを再起動すると、チャット欄に金づち 🔨 のアイコンが表示され、SmallPictツールが有効化されます。

2. Cursor IDE

方法 A: Cursor グローバル設定

Cursorの Settings (Cmd + , または Ctrl + ,) を開きます。
Features → MCP Servers に移動します。
+ Add New MCP Server をクリックします：
- Name: smallpict
- Type: command
- Command: npx -y @smallpict/mcp
- Environment Variables: SMALLPICT_API_KEY=sp_live_YOUR_API_KEY

方法 B: ワークスペース個別設定 (`.cursor/mcp.json`)

プロジェクトのルートディレクトリに .cursor/mcp.json を作成します：

JSON

{  "mcpServers": {    "smallpict": {      "command": "npx",      "args": [        "-y",        "@smallpict/mcp"      ],      "env": {        "SMALLPICT_API_KEY": "sp_live_YOUR_API_KEY"      }    }  }}

3. Google Antigravity (AGY)

Antigravityマルチエージェント環境をご利用の場合は、~/.gemini/antigravity/mcp/smallpict/mcp.json またはプロジェクト設定に追加します：

JSON

{  "mcpServers": {    "smallpict": {      "command": "npx",      "args": [        "-y",        "@smallpict/mcp"      ],      "env": {        "SMALLPICT_API_KEY": "sp_live_YOUR_API_KEY"      }    }  }}

これにより、Antigravityサブエージェントがビルドやリファクタリング作業中にアセットを自動で最適化できるようになります。

4. VS Code (Cline / Roo Code)

Clineパネルを開き、MCP Servers アイコンをクリックします。
Configure MCP Servers を選択します（cline_mcp_settings.json が開きます）。
以下の設定を追加します：

JSON

{  "mcpServers": {    "smallpict": {      "command": "npx",      "args": [        "-y",        "@smallpict/mcp"      ],      "env": {        "SMALLPICT_API_KEY": "sp_live_YOUR_API_KEY"      },      "disabled": false,      "autoApprove": [        "smallpict_get_quota",        "smallpict_optimize_image"      ]    }  }}

💬 AIへの自然言語プロンプト例

設定完了後、スクリプトを書くことなく自然言語でAIエージェントに指示できます：

ローカル画像の一括最適化

「public/images/ フォルダ内のすべてのPNGとJPEG画像を検索して、画質80のWebP形式に変換して。どれだけ容量が削減されたか表でまとめて報告して。」

アカウントのクォータ確認

「トップページの画像を一括最適化する前に、今月のSmallPictの残りクォータを調べて。」

CDNキャッシュの即時クリア

「S3の hero-banner.jpg を差し替えたから、SmallPictのCDNキャッシュをパージして。」

Model Context Protocol (MCP) AI連携

SmallPict Model Context Protocol (MCP) サーバー

End-to-End Image Processing & Edge CDN Flow

Client Application

Cloudflare Edge CDN

SmallPict Go Gateway

libvips SIMD Worker

S3 Pipeline & Storage

⚡ 主な特徴

🛠️ 利用可能なMCPツール一覧

1. smallpict_optimize_image

2. smallpict_get_quota

3. smallpict_purge_cdn_cache

🚀 各種AIクライアントでの設定方法

1. Claude for Desktop

2. Cursor IDE

方法 A: Cursor グローバル設定

方法 B: ワークスペース個別設定 (.cursor/mcp.json)

3. Google Antigravity (AGY)

4. VS Code (Cline / Roo Code)

💬 AIへの自然言語プロンプト例

ローカル画像の一括最適化

アカウントのクォータ確認

CDNキャッシュの即時クリア

1. `smallpict_optimize_image`

2. `smallpict_get_quota`

3. `smallpict_purge_cdn_cache`

方法 B: ワークスペース個別設定 (`.cursor/mcp.json`)