screenshotty

screenshotty-mcp

Screenshotty のスクリーンショット API 用 Model Context Protocol サーバーです。 Claude、Cursor、Cline など、あらゆる MCP クライアントでウェブページのスクリーンショットを撮影したり、HTML を画像や PDF としてレンダリングしたりできます。画像はインラインで返されるため、結果を確認できます。

API キーの取得

https://screenshotty.link/sign-up?utm_source=mcp で登録し（毎月 250 枚まで無料、クレジットカード不要）、Dashboard → API Keys からキーをコピーします。

クライアントの設定

Claude Code

claude mcp add screenshotty --env SCREENSHOTTY_API_KEY=your_key -- npx -y screenshotty-mcp

Claude Desktop / Cursor / Cline

{
  "mcpServers": {
    "screenshotty": {
      "command": "npx",
      "args": ["-y", "screenshotty-mcp"],
      "env": {
        "SCREENSHOTTY_API_KEY": "your_key"
      }
    }
  }
}

Claude Desktop の設定ファイルは、~/Library/Application Support/Claude/claude_desktop_config.json（macOS）または %APPDATA%\Claude\claude_desktop_config.json（Windows）にあります。

ツール

ツール	説明
screenshot_url	ページのスクリーンショットを撮影します（PNG、JPEG、WebP）。ホストされた URL を返します。また、画像が 2 MB 以下の場合はインラインで画像も返します。オプション：ビューポート、全ページ、CSS セレクター、待機、広告ブロック、Cookie バナーのブロック、ライト／ダークモード、デバイススケールファクター。
screenshot_html	HTML ドキュメント（インライン CSS／JS、公開された http(s) アセットのみ）を PNG、JPEG、WebP にレンダリングします。ソーシャルカード、チャート、メールのプレビューなどに使えます。URL とインライン画像を返します。
generate_pdf	ページ（url）または HTML ドキュメント（html）を PDF にレンダリングします。ホストされた PDF の URL を返します。

プロンプトの例：「幅 390px のビューポートで https://example.com のスクリーンショットを撮り、モバイル表示で問題がある箇所を教えてください」、「料金ページを PDF として保存してください」、「このブログ記事用に 1200×630 の Open Graph カードをデザインして、レンダリングしてください」。

環境変数

変数	必須	デフォルト
SCREENSHOTTY_API_KEY	はい	—
SCREENSHOTTY_API_URL	いいえ	https://api.screenshotty.link

開発

npm install
npm run build
SCREENSHOTTY_API_KEY=your_key npx @modelcontextprotocol/inspector node dist/index.js

ライセンス

MIT