snapapi-mcp

SnapAPI 用のMCP (Model Context Protocol) サーバーです。Claude Desktop、Cursor、Windsurf、Cline、ZedなどのAIツールから直接、スクリーンショットの撮影、Webページのスクレイピング、コンテンツの抽出、PDF生成、動画録画、ページ分析を行うことができます。

これは何ですか？

このパッケージは、AIアシスタントをSnapAPI WebキャプチャAPIに接続するローカルMCPサーバーを実行します。設定が完了すると、AIは以下のことが可能になります：

• スクリーンショットの撮影: あらゆるURL（フルページ、モバイル、ダークモード、要素指定、デバイスエミュレーション）

• Webページのスクレイピング: 本物のブラウザを使用して、クリーンなテキスト、HTML、リンクリストを取得

• コンテンツの抽出: LLMでの利用に最適化された形式（Markdown、記事、メタデータ、構造化データ）

• PDF生成: URLまたはHTMLからPDFを作成

• 動画録画: ブラウザセッションの録画（インタラクションシナリオの指定も可能）

• ページ分析: AIによる分析（抽出と分析を1回の呼び出しで実行）

• 利用状況の確認: クォータとアカウント統計の確認

前提条件

• 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 のいずれか1つが必須です。

プロンプト例:

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

本物のブラウザを使用してWebページの内容をスクレイピングします（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 のいずれか1つが必須です。

プロンプト例:

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

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

analyze

URLからコンテンツを抽出し、AIモデルで分析します（1回の呼び出しで実行）。

パラメータ:

プロンプト例:

• "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 ツールがエラーを返す analyzeエンドポイントは、SnapAPIバックエンドでのAnthropic APIクレジットを必要とします。フォールバックとして extract ツールを使用してページコンテンツを取得し、ご自身で分析してください。

ライセンス

MIT