Screenshot Api

AI エージェント向けスクリーンショット API

AI エージェントに目を与えましょう。MCP ツールを 1 回呼び出すだけで、エージェントが実際に 見られる スクリーンショットを取得できます。

→ アーリーアクセスのウェイトリストに登録 · 無料プランあり · ホスト型 API は近日公開

---

できること

AI エージェントはウェブページを見ることができません。取得できるのは生の HTML ですが、ノイズが多く、不完全（JavaScript で描画されたコンテンツは含まれません）で、定型的な内容が大量に含まれています。この MCP サーバーは、Claude、Cursor、および MCP 互換エージェントに、ネイティブな 3 つのツールを提供します。

ツール	戻り値
take_screenshot	URL → エージェントが直接確認できる base64 PNG/JPEG
describe_page	スクリーンショット、タイトル、H1、メタディスクリプションを 1 回の呼び出しで取得
capture_pdf	URL → A4 PDF

describe_page が最大の差別化要素です。ほとんどのエージェントには、スクリーンショット と テキストによるコンテキストの両方が必要です。このツールなら、追加の往復を省けます。

---

アーキテクチャ

flowchart LR
  Agent[MCP agent] -->|tool call| MCP[screenshot-api MCP]
  MCP --> Cache{URL cache<br/>5-min TTL}
  Cache -->|hit| Resp[base64 PNG / PDF]
  Cache -->|miss| PW[Playwright + stealth]
  PW --> Page[Rendered page]
  Page --> Resp
  MCP -->|HTTP| API[Fastify capture API]
  API --> PW

MCP ツールの契約： take_screenshot(url, format?)、describe_page(url)、capture_pdf(url) — エージェントのループ向けに設計された構造化出力であり、生の HTTP ラッパーではありません。

障害モード：

• ボットによるブロック／CAPTCHA → ステルス回避を適用。それでも強固なブロックを突破できない場合は、明示的なエラーを返します（空白のページを捏造しません）
• Playwright のクラッシュ／タイムアウト → 回数を制限して再試行し、その後はステータスとともに安全に失敗します
• 同一 URL へのキャッシュ集中 → TTL キャッシュで重複するエージェントループを集約します
• ホスト型とセルフホスト型 → セルフホスト型はデータをローカルに保持し、ホスト型は運用の手間と引き換えに稼働率を高めます

---

クイックスタート（セルフホスト、無料）

Claude Desktop

// ~/Library/Application Support/Claude/claude_desktop_config.json
{
  "mcpServers": {
    "screenshot-api": {
      "command": "npx",
      "args": ["-y", "screenshot-api-mcp"]
    }
  }
}

Claude Desktop を再起動します。その後、次のように依頼します。

「https://news.ycombinator.com のスクリーンショットを撮って、上位 5 件の記事を要約してください」

Cursor

設定 → MCP → サーバーを追加：

{
  "name": "screenshot-api",
  "command": "npx",
  "args": ["-y", "screenshot-api-mcp"]
}

Python（LangChain／CrewAI）

from langchain_mcp_adapters.client import MultiServerMCPClient

client = MultiServerMCPClient({
    "screenshot": {
        "command": "npx",
        "args": ["-y", "screenshot-api-mcp"],
        "transport": "stdio",
    }
})

tools = await client.get_tools()
# → [take_screenshot, describe_page, capture_pdf]

---

HTML をそのまま使わない理由

• JavaScript で描画されたコンテンツ — SPA、遅延読み込みされるセクション、canvas 要素はスクレイパーでは見えません。Playwright ならすべてを描画できます。
• ステルスモード — 実際の URL の約 40% は、単純なスクレイパーにボットブロックページを返します。回避機能を組み込み済みです。
• レスポンスキャッシュ — ループ内で同じ URL を 2 回呼び出した場合、2 回目は即座に返ります（TTL は 5 分、二重課金なし）。
• MCP ネイティブ — エージェントループ向けに設計された構造化出力であり、後付けの HTTP ラッパーではありません。

---

ホスト型 API（近日公開）

セルフホスト版には、Node.js とローカルへの Playwright／Chromium のインストール（約 300 MB）が必要です。ホスト型 API なら、そうした準備は不要です。エージェントがエンドポイントにリクエストを送ると、画像が返されます。

ウェイトリストに登録 — アーリーアクセスでは、最初の 3 か月間が 40% 割引になります。

予定されているプラン：

プラン	料金	月間スクリーンショット数
無料トライアル	$0	100（7 日間）
Starter	$19/mo	2,000
Pro	$49/mo	10,000

---

HTTP API（セルフホスト）

GET /screenshot

パラメーター	型	デフォルト	説明
url	string	必須	公開 URL（http/https のみ）
format	png | jpeg | pdf	png	出力形式
full_page	true | false	false	スクロール可能なページ全体
width	number	1280	ビューポートの幅（320～3840）
height	number	800	ビューポートの高さ（200～2160）

curl "http://localhost:3099/screenshot?url=https://example.com" -o out.png

GET /health

{ "status": "ok", "browserConnected": true }

---

ローカル開発

npm install
npm run dev        # tsx watch
npm test           # vitest + real Chromium (~60s)
npm run typecheck

---

Fly.io にデプロイ（大規模なセルフホスト）

export PATH="$HOME/.fly/bin:$PATH"
flyctl auth login
flyctl launch --no-deploy --copy-config
flyctl secrets set PROXY_SECRET=$(openssl rand -hex 24)
flyctl deploy
flyctl checks list   # /health should be green

メモリ： Fly のデフォルトの 256MB では Chromium がメモリ不足で強制終了します。fly.toml は 1GB に設定済みです。512MB 未満に縮小しないでください。

main へのプッシュ時に自動デプロイを有効にするには、GitHub リポジトリのシークレットに FLY_API_TOKEN を追加します。

---

設定

すべての設定は環境変数で行います。.env.example を参照してください。

主な変数：PORT（3099）、MAX_CONCURRENCY（2）、PROXY_SECRET（空の場合、ローカルでは認証オフ）、NAV_TIMEOUT_MS（20000）。

---

ロードマップ

フェーズ A — 検証 (現在)

• 3 つのツールを備えた MCP サーバー
• ステルス／Cloudflare のバイパス
• レスポンスキャッシュ（TTL は 5 分）
• ランディングページとウェイトリスト
• npm で公開（screenshot-api-mcp）
• Smithery、mcp.so、Glama への掲載
• ウェイトリスト登録 20 件 ← フェーズ B への移行条件

フェーズ B — ホスト型 API (ゲート通過時)

• Lemon Squeezy の課金（利用量別のプラン）
• API キーの発行と使用量計測
• Fly.io へのデプロイ（1GB VM、min_machines_running=1）
• 最初の有料顧客

フェーズ C — 成長

• SEO コンテンツ（「Claude にスクリーンショットを渡す方法」）
• Zapier 連携
• LangChain / CrewAI ツールパッケージ