Model Context Protocol (MCP) AI 통합

SmallPict MCP Server (@smallpict/mcp)는 오픈 표준인 Model Context Protocol을 구현하여 대규모 언어 모델(LLM)과 자율 AI 코딩 에이전트가 작업 흐름 내에서 직접 이미지를 검사, 압축, 변환 및 CDN 캐시 관리할 수 있는 도구를 제공합니다.

주요 특징

• 범용 에이전트 호환성: 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 툴 목록

에이전트가 연결되면 다음 세 가지 생산성 도구를 자동으로 인식하여 호출할 수 있습니다:

1. smallpict_optimize_image

로컬 이미지 파일이나 원격 이미지 URL을 차세대 포맷(WebP, AVIF)으로 변환하여 용량을 크게 줄입니다.

2. smallpict_get_quota

현재 계정의 구독 요금제 등급, 월간 처리 한도, 사용된 바이트 수 및 잔여 대역폭을 확인합니다.

3. smallpict_purge_cdn_cache

이미지 업데이트 후 SmallPict 글로벌 Edge CDN 캐시를 즉시 삭제합니다.

클라이언트별 연동 설정

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

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

Claude Desktop을 재시작하면 채팅창에 망치 아이콘이 활성화됩니다.

2. Cursor IDE

방법 A: Cursor 전역 설정

1. Cursor Settings (Cmd + , 또는 Ctrl + ,)를 엽니다.
2. Features → MCP Servers 메뉴로 이동합니다.
3. + 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 파일을 생성합니다:

{  "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 또는 프로젝트 설정에 등록합니다:

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

이제 Antigravity 서브에이전트가 프론트엔드 리팩토링이나 빌드 파이프라인에서 이미지를 자율적으로 최적화합니다.

4. VS Code (Cline / Roo Code)

1. Cline 패널을 열고 MCP Servers 아이콘을 클릭합니다.
2. Configure MCP Servers를 선택합니다 (cline_mcp_settings.json).
3. 다음 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 캐시 즉시 삭제

"사이트에서 hero-banner.jpg를 새로 교체했어. 해당 파일의 SmallPict CDN 캐시를 즉시 퍼지해 줘."