[ブログ & ガイド](https://openscreenshot.app/ja/blog/) · 開発者 & エージェント

# AI エージェント向けにローカルのスクリーンショット MCP サーバーを設定する

OpenScreenShot を stdio の MCP クライアントに接続し、URL、ビューポート、ページ全体のオプションを指定して PNG を取得します。

執筆: [OpenScreenShot](https://github.com/pghqdev/OpenScreenShot)

OpenScreenShot には、ツールを 1 つ持つローカル MCP サーバー `capture_screenshot` があります。MCP クライアントはウェブページの URL を指定してこのツールを呼び出し、PNG の画像コンテンツを受け取れます。サーバーは手元のマシンで別のヘッドレス Chrome 互換ブラウザを起動します。ブラウザ拡張機能は不要です。

## MCP クライアントにサーバーを追加する

まず、Node.js、pnpm、Chrome 互換ブラウザをインストールします。クライアントの設定形式に合わせて、サーバーのエントリを追加します。`mcpServers` オブジェクトを受け付けるクライアントでは、次のように書けます。

```
{
  "mcpServers": {
    "openscreenshot": {
      "command": "pnpm",
      "args": ["dlx", "openscreenshot"]
    }
  }
}
```

クライアントは、実行パス上で `pnpm` を見つけられる必要があります。設定を保存したら、クライアントを再起動するか MCP 接続を再読み込みします。サーバーは stdio を使うため、クライアントがローカルのプロセスを起動します。入力するホスト型の MCP URL はありません。

Chrome が通常とは異なる場所にインストールされている場合は、クライアントの環境変数の設定で `CHROME_PATH` を渡します。アプリケーションを含むフォルダーではなく、実行ファイルのフル パスを指定してください。

## capture_screenshot を呼び出す

最小のツール入力は次のとおりです。

```
{ "url": "https://example.com" }
```

これは、デフォルトの 1280 × 800 のサイズでビューポートをキャプチャします。再現できるリクエストにするには、ビューポートとページ全体のオプションを明示的に設定します。

```
{
  "url": "https://example.com",
  "fullPage": true,
  "width": 1440,
  "height": 900
}
```

`width` には 200～3840、`height` には 200～2160 の整数を指定できます。ツールは MIME タイプ `image/png` の MCP 画像コンテンツを返します。このツールには出力パスの引数はありません。結果を表示するか保存するかはクライアントによって異なります。名前付きのファイルを直接得たい場合は、[CLI](https://openscreenshot.app/ja/blog/screenshot-cli/) を使ってください。

## 画像がツールを離れる前にデータを墨消しする

`redact` オブジェクトを追加すると、スクリーンショットを撮る前にページ内のデータを黒い四角で覆います。クライアントが受け取るのは、墨消しした画像だけです。

```
{
  "url": "https://example.com",
  "redact": {
    "selectors": ["#account-menu"],
    "patterns": ["email", "phone", "secret"],
    "rects": [{ "x": 0, "y": 0, "width": 200, "height": 40 }]
  }
}
```

`selectors` は、一致する各要素を、そのすべての子要素とともに覆います。`patterns` は、一致するテキストとフォームの値を覆います。対象は `email`、`phone` (9～15 桁の数字)、`secret` (一般的な API キーやトークンの形式、長いハッシュ) です。`rects` は、出力画像のピクセル単位で指定した四角形を覆います。キャンバス、画像、クロスオリジンの iframe に使います。セレクターに一致する要素がない場合、四角形が画像の外にある場合、またはキャプチャ中にページが対象を動かした場合、ツールはエラーを返し、画像は返しません。パターンは、複数の要素に分かれたテキストや、画像として描かれたテキストを見逃すことがあります。

## エージェントに見えるものと見えないもの

キャプチャは新しいヘッドレス ブラウザで始まります。普段使っている Chrome ウィンドウの Cookie やログイン済みのセッションは引き継ぎません。そのため、認証が必要なページではログイン画面が表示されることがあります。現在のツールには、ログイン手順、Cookie の注入、セレクターの待機、操作のためのクリックはありません。

結論を出す前に、返された画像に実際に何が見えているかをエージェントに確認させてください。スクリーンショットは、レイアウト、余白、目に見えるエラーの確認には役立ちます。しかし、フォームが正しく送信されることや、キーボード操作が機能することは証明できません。

## スクリーンショットはどこに送られるか

スクリーンショットはローカルで生成され、MCP クライアントに返されます。そのクライアントがホスト型のモデルを使っている場合、クライアント自身の設定に従って、返された画像をモデルの提供元に送信することがあります。キャプチャがローカルであっても、エージェントとの会話全体がデバイス上に留まるとは限りません。提供元に届いてはならないデータには、`redact` を使ってください。

サイズが予測できる自動キャプチャについては、[CI 向けのスクリーンショット](https://openscreenshot.app/ja/blog/screenshots-for-ci/)をご覧ください。[エージェント用のキャプチャ スキル](https://openscreenshot.app/skills/capture-screenshot.md)と[サーバーのソース](https://github.com/pghqdev/OpenScreenShot/blob/main/mcp/src/serve.ts)に、機械向けの手順とツールの定義があります。

## さらに読む

[ドキュメントを読む](https://openscreenshot.app/ja/docs/)、[すべてのガイドを見る](https://openscreenshot.app/ja/blog/)、または[キャプチャについてサポートを受ける](https://openscreenshot.app/ja/support/)。

---

Canonical page: https://openscreenshot.app/ja/blog/screenshot-mcp-server/