SmallPict Model Context Protocol (MCP) Server

SmallPict MCP Server (@smallpict/mcp) mengimplementasikan standar terbuka Model Context Protocol, memberikan Large Language Models (LLM) dan AI coding agent otonom kemampuan native untuk memeriksa, mengompres, mengonversi, dan mengelola aset gambar web langsung di dalam workflow pemrograman Anda.

⚡ Keunggulan Utama

• Dukungan Banyak AI Agent: Kompatibel dengan Claude Desktop, Cursor, Google Antigravity (AGY), OpenCode, Windsurf, Cline / Roo Code, Goose, dan semua runtime berbasis MCP.
• Tanpa Kompilasi Lokal: Langsung jalan menggunakan npx -y @smallpict/mcp dengan Node.js 18+.
• Keamanan Maksimal: Berjalan melalui aliran input/output standar (stdio) dengan penanganan log error yang diarahkan ke stderr untuk mencegah rusaknya paket data JSON-RPC.
• Mendukung Mode Sandbox: Dapat menggunakan API key live (sp_live_...) maupun Sandbox key (sp_test_...) untuk pengujian bebas kuota.

🛠️ Daftar Tools MCP yang Tersedia

Setelah terpasang, AI Agent Anda secara otomatis memiliki akses ke 3 tools canggih berikut:

1. smallpict_optimize_image

Mengompresi dan mengonversi file gambar lokal atau URL publik ke format modern (WebP, AVIF) dengan penghematan ukuran file hingga 88%.

2. smallpict_get_quota

Memeriksa paket langganan aktif, jumlah byte yang sudah terpakai pada bulan berjalan, serta sisa kuota bandwidth akun SmallPict Anda.

3. smallpict_purge_cdn_cache

Membersihkan cache gambar di Cloudflare Edge CDN secara instan setelah aset gambar diperbarui.

🚀 Panduan Konfigurasi Multi-Agent

1. Claude for Desktop

Tambahkan konfigurasi server smallpict ke file 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

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

Muat ulang aplikasi Claude Desktop. Ikon palu 🔨 di pojok kanan bawah chat akan menunjukkan bahwa tools SmallPict telah aktif.

2. Cursor IDE

Konfigurasikan SmallPict MCP di Cursor baik secara global maupun per-workspace:

Opsi A: Pengaturan Global Cursor

1. Buka Settings Cursor (Cmd + , atau Ctrl + ,).
2. Masuk ke Features → MCP Servers.
3. Klik tombol + Add New MCP Server.
   • Name: smallpict
   • Type: command
   • Command: npx -y @smallpict/mcp
   • Environment Variables: SMALLPICT_API_KEY=sp_live_API_KEY_ANDA

Opsi B: Konfigurasi Workspace (.cursor/mcp.json)

Buat file di .cursor/mcp.json pada direktori root proyek Anda:

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

3. Google Antigravity (AGY)

Bagi pengembang yang menggunakan ekosistem multi-agent Antigravity, daftarkan server SmallPict pada ~/.gemini/antigravity/mcp/smallpict/mcp.json atau pengaturan workspace:

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

Subagent Antigravity kini dapat mengoptimalkan aset gambar web secara otomatis saat proses build atau refactoring komponen UI berlangsung.

4. VS Code (Cline / Roo Code)

Di VS Code dengan ekstensi Cline atau Roo Code:

1. Buka panel Cline lalu klik ikon MCP Servers.
2. Pilih Configure MCP Servers (membuka file cline_mcp_settings.json).
3. Tambahkan konfigurasi berikut:

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

5. Windsurf (Codeium)

Edit file konfigurasi Windsurf pada ~/.codeium/windsurf/mcp_config.json:

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

6. OpenCode, Codex & Custom AI Runner

Untuk AI agent berbasis command line terminal (Goose, OpenCode, script kustom LangChain / LlamaIndex), jalankan @smallpict/mcp langsung melalui aliran standard input/output:

# Jalankan langsung di subprocess AI agent AndaSMALLPICT_API_KEY"sp_live_API_KEY_ANDA" npx -y @smallpict/mcp

💬 Contoh Prompt Instruksi ke AI

Setelah terpasang, Anda cukup berbicara santai dengan AI assistant Anda dalam bahasa alami:

Optimasi Batch Aset Lokal

"Tolong cari semua gambar PNG dan JPG di folder public/images/, konversikan ke format WebP kualitas 80, dan buatkan tabel ringkasan berapa byte yang berhasil dihemat."

Cek Kuota Akun

"Berapa sisa kuota SmallPict saya bulan ini sebelum saya mulai optimasi gambar banner ukuran besar?"

Invalidate Cache CDN

"Saya baru saja menimpa gambar hero-banner.jpg di S3. Tolong purge cache CDN SmallPict untuk aset tersebut."

🧪 Pengujian Menggunakan Sandbox Key

Anda dapat melakukan pengujian tanpa mengurangi kuota langganan bulanan Anda dengan menggunakan API Key Sandbox:

"env": {  "SMALLPICT_API_KEY": "sp_test_sandbox_secret_key"}

• Kompresi gambar tetap diproses oleh mesin produksi libvips dengan performa dan hasil yang sama persis.
• Kuota dicatat pada pool sandbox terisolasi (0 pemotongan kuota produksi).
• Aset hasil konversi disimpan sementara secara otomatis selama 24 jam.