snapapi-mcp

SnapAPI를 위한 MCP(Model Context Protocol) 서버입니다. Claude Desktop, Cursor, Windsurf, Cline, Zed와 같은 AI 도구에서 직접 웹 페이지 스크린샷 촬영, 스크래핑, 콘텐츠 추출, PDF 생성, 비디오 녹화 및 페이지 분석을 수행할 수 있습니다.

이것은 무엇인가요?

이 패키지는 AI 어시스턴트를 SnapAPI 웹 캡처 API에 연결하는 로컬 MCP 서버를 실행합니다. 설정이 완료되면 AI는 다음을 수행할 수 있습니다:

• 모든 URL의 스크린샷 촬영 (전체 페이지, 모바일, 다크 모드, 요소 선택, 기기 에뮬레이션)

• 실제 브라우저를 사용하여 웹 페이지 스크래핑 및 깔끔한 텍스트, HTML 또는 링크 목록 가져오기

• LLM 사용에 최적화된 콘텐츠 추출 (마크다운, 기사, 메타데이터, 구조화된 데이터)

• URL 또는 HTML에서 PDF 생성

• 선택적 상호작용 시나리오와 함께 브라우저 세션 비디오 녹화

• AI를 통한 페이지 분석 (한 번의 호출로 추출 및 분석)

• 사용량 할당량 및 계정 통계 확인

사전 요구 사항

• Node.js 18 이상

• SnapAPI API 키 — app.snapapi.pics에서 발급 가능

빠른 시작

Claude Desktop

~/Library/Application Support/Claude/claude_desktop_config.json(macOS) 또는 %APPDATA%\Claude\claude_desktop_config.json(Windows)에 추가하세요:

{
  "mcpServers": {
    "snapapi": {
      "command": "npx",
      "args": ["-y", "snapapi-mcp"],
      "env": {
        "SNAPAPI_API_KEY": "sk_live_your_key_here"
      }
    }
  }
}

저장 후 Claude Desktop을 재시작하세요.

Cursor

~/.cursor/mcp.json에 추가하세요:

{
  "mcpServers": {
    "snapapi": {
      "command": "npx",
      "args": ["-y", "snapapi-mcp"],
      "env": {
        "SNAPAPI_API_KEY": "sk_live_your_key_here"
      }
    }
  }
}

Windsurf

~/.codeium/windsurf/mcp_config.json에 추가하세요:

{
  "mcpServers": {
    "snapapi": {
      "command": "npx",
      "args": ["-y", "snapapi-mcp"],
      "env": {
        "SNAPAPI_API_KEY": "sk_live_your_key_here"
      }
    }
  }
}

Cline (VS Code)

Cline 설정 → MCP Servers → Add Server를 엽니다:

• Command: npx

• Args: -y snapapi-mcp

• Environment: SNAPAPI_API_KEY=sk_live_your_key_here

VS Code (네이티브 MCP 지원)

워크스페이스(또는 사용자 설정)의 .vscode/mcp.json에 추가하세요:

{
  "servers": {
    "snapapi": {
      "command": "npx",
      "args": ["-y", "snapapi-mcp"],
      "env": {
        "SNAPAPI_API_KEY": "sk_live_your_key_here"
      }
    }
  }
}

Zed

~/.config/zed/settings.json에 추가하세요:

{
  "context_servers": {
    "snapapi": {
      "command": {
        "path": "npx",
        "args": ["-y", "snapapi-mcp"],
        "env": {
          "SNAPAPI_API_KEY": "sk_live_your_key_here"
        }
      }
    }
  }
}

자동 설치 프로그램

포함된 헬퍼 스크립트를 실행하세요:

# For Claude Desktop
./install-mcp.sh claude

# For Cursor
./install-mcp.sh cursor

# For Windsurf
./install-mcp.sh windsurf

사용 가능한 도구

ping

SnapAPI에 연결 가능한지, API 키가 유효한지 확인합니다. 매개변수가 필요하지 않습니다.

예시 프롬프트: "Ping SnapAPI to check it's working"

screenshot

광범위한 사용자 정의를 통해 모든 URL의 스크린샷을 촬영합니다.

매개변수:

*url, html, markdown 중 하나 이상이 제공되어야 합니다.

예시 프롬프트:

• "Take a screenshot of https://example.com in dark mode"

• "Screenshot https://github.com on an iPhone 15 Pro"

• "Capture a full-page screenshot of https://news.ycombinator.com with ads blocked"

• "Render this HTML as a screenshot: <h1>Hello</h1>"

scrape

실제 브라우저를 사용하여 웹 페이지 콘텐츠를 스크래핑합니다 (JavaScript 렌더링 페이지 작동).

매개변수:

예시 프롬프트:

• "Scrape the text content from https://example.com/blog"

• "Get all links from https://news.ycombinator.com"

• "Scrape https://example.com/pricing as HTML"

extract

LLM에 최적화된 깔끔하고 구조화된 콘텐츠를 추출합니다.

매개변수:

예시 프롬프트:

• "Extract the article content from https://example.com/post as markdown"

• "Get the metadata (title, description, OG image) from https://example.com"

• "Extract price and rating from https://example.com/product"

pdf

URL 또는 HTML에서 PDF를 생성합니다.

매개변수:

*url 또는 html 중 하나 이상이 제공되어야 합니다.

예시 프롬프트:

• "Generate a PDF of https://example.com/report in landscape A4"

• "Convert this HTML to a PDF with 2cm margins"

analyze

한 번의 호출로 URL에서 콘텐츠를 추출하고 AI 모델로 분석합니다.

매개변수:

예시 프롬프트:

• "Analyze https://example.com/article — what are the main arguments?"

• "Extract all product specs from https://example.com/product"

• "What is the sentiment of this news article: https://example.com/news"

video

브라우저 세션을 비디오(WebM)로 녹화합니다.

매개변수:

예시 프롬프트:

• "Record a 10-second video of https://example.com scrolling down"

• "Record https://example.com on an iPhone 15 Pro"

get_usage

SnapAPI 할당량 및 월간 통계를 확인합니다. 매개변수가 필요하지 않습니다.

예시 프롬프트:

• "How many SnapAPI requests do I have left this month?"

• "Show me my SnapAPI usage"

list_devices

스크린샷 및 비디오 에뮬레이션을 위한 모든 사용 가능한 기기 프리셋을 나열합니다. 매개변수가 필요하지 않습니다.

예시 프롬프트: "What device presets are available for screenshots?"

환경 변수

개발

# Clone the repo
git clone https://github.com/Sleywill/snapapi-mcp.git
cd snapapi-mcp

# Install dependencies
npm install

# Build
npm run build

# Run locally (reads MCP protocol from stdin)
SNAPAPI_API_KEY=sk_live_your_key node dist/index.js

문제 해결

"SNAPAPI_API_KEY environment variable is required" MCP 설정의 env 블록에 API 키가 포함되어 있는지 확인하세요. sk_live_로 시작하는지 확인하세요.

Claude Desktop에 도구가 나타나지 않음 설정 저장 후 Claude Desktop을 재시작하세요. 다음 위치에서 MCP 로그를 확인하세요:

• macOS: ~/Library/Logs/Claude/mcp*.log

• Windows: %APPDATA%\Claude\logs\mcp*.log

첫 실행 시 npx가 너무 오래 걸림 "args": ["-y", "snapapi-mcp"]를 사용하세요. -y 플래그는 상호작용 없이 설치 프롬프트를 자동으로 확인합니다.

screenshot / scrape 오류 반환

• app.snapapi.pics/dashboard에서 API 키가 유효한지 확인하세요.

• get_usage 도구로 남은 할당량을 확인하세요.

• JavaScript가 많은 페이지의 경우 "waitUntil": "networkidle" 및 "delay" 값을 추가해 보세요.

analyze 도구 오류 반환 분석 엔드포인트는 SnapAPI 백엔드에서 Anthropic API 크레딧을 요구합니다. extract 도구를 대체제로 사용하여 페이지 콘텐츠를 가져온 후 직접 분석하세요.

라이선스

MIT