PinchTab 攻略ガイド — Claude CodeにブラウザをつなぐMCPの導入から実践パターンまで

「Claude Codeにブラウザの目を与える」。PinchTabを一言で表すなら、これだ。

AIコーディングエージェントは賢いが、ブラウザの中で何が起きているかは見えない。デプロイ後の表示崩れ、SaaSダッシュボードの確認、フォームの動作テスト。これらは結局、人間がブラウザを開いて目視で確認している。PinchTabはその「目と手」をAIに渡すためのMCPサーバーだ。

この記事では、PinchTabの導入からClaude Code/Cursorへの接続設定、実践的な活用パターン、そしてPlaywrightとの使い分けまで、手を動かしながら理解できるレベルで解説する。

PinchTabとは何か（30秒で理解する）

PinchTabは12MBのGoバイナリ1つで動くブラウザ自動化サーバーだ。Chrome（またはChromium）を起動し、HTTP APIを公開する。MCP（Model Context Protocol）サーバーとしても動作するため、Claude Code、Cursor、Claude Desktopなどのクライアントから直接ブラウザを操作できる。

特徴を3つに絞ると以下の通り。

• アクセシビリティツリーベース: DOM要素を e0, e1, e2… のような安定したリファレンスIDで参照する。CSSセレクタの脆さから解放される
• ステートフルなセッション管理: ログイン状態やCookieがプロファイル単位で永続化される。再起動してもログインし直す必要がない
• トークン効率が高い: スクリーンショットベースの操作に比べて、テキスト抽出で約800トークン/ページ。スクリーンショットの5〜13分の1のコスト

ライセンスはMIT。macOS、Linux、Windowsに対応している。

pinchtab.com

PinchTab — Browser Control for AI Agents 12MB Go binary. Zero config. Accessibility-first HTTP API for browser automation.

インストールとセットアップ

バイナリのインストール

macOS/Linuxならワンライナーで入る。

curl -fsSL https://pinchtab.com/install.sh | bash

npmでもインストール可能。

npm install -g pinchtab

Dockerで動かしたい場合はこう。--shm-size=2g はChromeがクラッシュしないために必須。

docker run -d \
  --name pinchtab \
  -p 127.0.0.1:9867:9867 \
  -v pinchtab-data:/data \
  --shm-size=2g \
  pinchtab/pinchtab

サーバーの起動

インストールしたら、まずサーバーを起動する。

pinchtab

デフォルトで http://localhost:9867 にバインドされる。localhostのみなので、外部からのアクセスはブロックされている。ヘルスチェックは以下で確認できる。

curl http://localhost:9867/health

Claude Codeへの接続

プロジェクトルートの .mcp.json に以下を追加する。

{
  "mcpServers": {
    "pinchtab": {
      "command": "pinchtab",
      "args": ["bridge", "--mcp"]
    }
  }
}

bridge モードで起動すると、stdio経由のMCPサーバーとして動作する。Claude Codeが自動的にツールを認識し、ブラウザ操作が可能になる。

ユーザースコープ（全プロジェクト共通）で設定したい場合は、~/.claude/settings.json に追加する。

{
  "mcpServers": {
    "pinchtab": {
      "command": "pinchtab",
      "args": ["bridge", "--mcp"]
    }
  }
}

Cursorへの接続

Cursorの場合は、Settings → MCP Servers で設定する。.cursor/mcp.json に記述する方法もある。

{
  "mcpServers": {
    "pinchtab": {
      "command": "pinchtab",
      "args": ["bridge", "--mcp"]
    }
  }
}

認証トークンの設定

PinchTabサーバーにトークン認証を設定している場合は、環境変数で渡す。

{
  "mcpServers": {
    "pinchtab": {
      "command": "pinchtab",
      "args": ["bridge", "--mcp"],
      "env": {
        "PINCHTAB_TOKEN": "your-secret-token"
      }
    }
  }
}

PINCHTAB_TOKEN を設定しない場合、ローカルネットワーク上の誰でもAPIにアクセスできてしまう。共有マシンやリモート環境では必ず設定しよう。

基本操作：MCPツール一覧と使い方

PinchTabが公開するMCPツールは pinchtab__ プレフィックスで名前空間が区切られている。主要なツールを機能カテゴリ別に整理する。

ナビゲーション

ツール名	説明	主要パラメータ
pinchtab__navigate	指定URLに遷移	url (必須)
pinchtab__snapshot	ページのアクセシビリティツリーを取得	interactive (bool)
pinchtab__text	ページのテキストを抽出	mode (readability/raw)

インタラクション

ツール名	説明	主要パラメータ
pinchtab__action	単一のDOM操作を実行	kind, ref
pinchtab__actions	複数のDOM操作をバッチ実行	actions配列

action の kind には以下が指定できる。

• click: 要素をクリック（ref で対象指定）
• fill: テキスト入力欄に値をセット（ref + value）
• type: キーストロークをシミュレート（ref + text）
• press: 特定キーを押す（ref + key、例: Enter, Tab）
• focus: 要素にフォーカスを当てる
• hover: 要素にマウスオーバー
• select: ドロップダウンから選択
• scroll: ページまたは要素をスクロール

fill と type の違いは重要だ。fill はフィールドの値を直接書き換える（JavaScriptの .value セット相当）。type は人間がキーボードで入力するようにキーイベントを発火する。リアルタイムバリデーションがあるフォームでは type を使わないと入力が反映されないケースがある。

キャプチャ

ツール名	説明	主要パラメータ
pinchtab__screenshot	JPEG形式でスクリーンショット取得	quality (0-100)
pinchtab__pdf	ページをPDF出力	-

システム

ツール名	説明
pinchtab__health	サーバーの死活確認
pinchtab__instances	起動中のブラウザインスタンス一覧
pinchtab__instance-start	新しいブラウザインスタンスを起動
pinchtab__instance-stop	インスタンスを停止
pinchtab__tabs	タブ一覧を取得
pinchtab__cookies-get	Cookieを取得
pinchtab__stealth-status	ステルスモードの状態確認
pinchtab__evaluate	任意のJavaScriptを実行

CLIからの直接操作

MCPを介さず、CLIから直接操作することもできる。デバッグ時に便利。

# URLに遷移
pinchtab nav https://example.com

# インタラクティブ要素のスナップショット
pinchtab snap -i -c

# 要素をクリック（リファレンスID指定）
pinchtab click e5

# テキスト入力
pinchtab fill e3 "user@example.com"

# Enterキーを押す
pinchtab press e7 Enter

# テキスト抽出
pinchtab text

実践パターン集

ここからは、実際に使って効果が高かったパターンを紹介する。

パターン1：デプロイ後の表示チェック自動化

これが最も費用対効果が高い使い方だと思う。

Webアプリをデプロイした直後、本番URLにアクセスしてページが正常に表示されるか確認する作業。人間がやると1ページあたり30秒〜1分かかるが、PinchTabなら数秒で終わる。

Claude Codeへの指示例：

デプロイ完了。以下のURLにアクセスして、ページが正常に表示されるか確認して。
スクリーンショットも撮って。
- https://example.com/
- https://example.com/about
- https://example.com/pricing

内部的には pinchtab__navigate → pinchtab__snapshot → pinchtab__screenshot の順で実行される。スナップショットからテキスト構造を解析し、主要な要素が存在するかを確認してくれる。

ポイントはスナップショットとスクリーンショットの併用だ。スナップショット（アクセシビリティツリー）だけだと視覚的なレイアウト崩れを検知できない。スクリーンショットだけだとトークンコストが高い。両方使うことで、構造的な正しさと視覚的な正しさの両方をチェックできる。

パターン2：SaaSダッシュボードのスクショ取得

アナリティクスの定期レポート作成で使えるパターン。GA4やSearch Consoleなどのダッシュボードにアクセスし、特定の画面のスクリーンショットを撮る。

PinchTabのプロファイル機能でGoogleアカウントのログインセッションを保持しておけば、毎回ログインし直す必要がない。

PinchTabのプロファイル「analytics」でGA4のダッシュボードを開いて、
過去7日間のトラフィック概要のスクリーンショットを撮って。

ログインセッションの維持方法は後述の「セッション管理」セクションで詳しく解説する。

パターン3：フォーム自動入力＆動作テスト

問い合わせフォームやサインアップフローのE2Eテストに近いことができる。

https://example.com/contact にアクセスして、以下の内容でフォームを入力して送信。
送信後の画面もスクショを撮って。
- 名前: テスト太郎
- メール: test@example.com
- 件名: テスト問い合わせ
- 本文: これはテスト送信です

PinchTabは pinchtab__snapshot でフォーム要素のリファレンスIDを取得し、pinchtab__action の fill で各フィールドに値を入力、最後に送信ボタンの click で送信する。

フォームにリアルタイムバリデーションがある場合は fill ではなく type を使う必要がある、という点は覚えておこう。fill はJavaScriptの値書き換えなので、input/changeイベントが発火しない実装もある。

パターン4：OGP画像の検証

ブログ記事やnote記事を公開した後、SNSでシェアした時にOGP画像が正しく表示されるか確認するパターン。

https://yuto-lab.com/blog/new-article/ のOGPタグを確認して。
og:title, og:description, og:image が正しく設定されているか教えて。
og:imageのURLにもアクセスして、画像が表示されるかスクショを撮って。

pinchtab__evaluate でJavaScriptを実行し、document.querySelector('meta[property="og:image"]') から直接OGPメタタグを取得する方法もある。Webフェッチ系ツールと違い、JavaScriptで動的に生成されるOGPタグも取得できるのがPinchTabの強みだ。

パターン5：競合サイトの定点観測

定期的に競合のプライシングページやランディングページのスクショを撮っておくと、変更を検知できる。

以下のURLのスクリーンショットを撮って、前回との差分があれば教えて。
- https://competitor-a.com/pricing
- https://competitor-b.com/features

これをcronジョブやClaude Codeのタスクキューと組み合わせると、自動化された競合モニタリングになる。

セッション管理：プロファイルとログイン維持

PinchTabの真価はセッション管理にある。

プロファイルの仕組み

PinchTabは「プロファイル」単位でブラウザの状態を管理する。プロファイルには以下が含まれる。

• Cookie
• LocalStorage / SessionStorage
• ブラウザ履歴
• 保存されたパスワード（Chromeのパスワードマネージャ）

プロファイルは ~/.pinchtab/ ディレクトリに保存される。このディレクトリには認証情報が含まれるため、パーミッションには注意が必要だ。

プロファイルを指定してインスタンスを起動

# CLIからプロファイル指定で起動
pinchtab instance start --profile alice

MCPツール経由の場合は、pinchtab__instance-start に profileId パラメータを渡す。

{
  "profileId": "analytics",
  "mode": "headed"
}

ログイン維持のコツ

一度headedモード（ブラウザウィンドウが表示されるモード）でGoogleやSaaSにログインしておけば、以降はheadlessモードでもセッションが維持される。手順はこうなる。

1. headedモードでインスタンスを起動する
2. ブラウザが開くので、手動でログインする
3. インスタンスを停止する
4. 次回以降、同じプロファイルIDでheadlessモードで起動すればログイン状態が継続

# 初回: headed で起動してログイン
pinchtab instance start --profile my-google --mode headed

# （ブラウザでGoogleにログインする）

# 停止
pinchtab instance stop <instance-id>

# 次回以降: headless で起動してもログイン維持
pinchtab instance start --profile my-google --mode headless

重要なのは**「ログインは人間がやる、操作はAIがやる」という分担**だ。二段階認証やCAPTCHAは人間が突破し、その後のセッションをAIが活用する。

ステルスモード

PinchTabにはステルスモードが内蔵されている。navigator.webdriver のパッチやUser-Agentのスプーフィングが自動的に行われる。これにより、Seleniumを検知するタイプのbot対策を回避できる。

ステルスモードの状態は pinchtab__stealth-status で確認できる。

Playwrightとの使い分け

「Playwrightでよくない？」という疑問は当然出る。結論から言うと、用途が違う。

PinchTabが向いているケース

• AIエージェントからのブラウザ操作: MCP対応なので、Claude CodeやCursorからシームレスに呼び出せる
• ログイン状態を保持したい操作: プロファイル機能で永続的なセッション管理ができる
• 二段階認証やOAuthがあるサービスの操作: 初回だけ人間がログインして、以降はAIが操作する
• アドホックな操作: 「このページ見て」「ここスクショ撮って」といった対話的な操作
• ステルス性が求められる操作: bot検知回避が内蔵されている

Playwrightが向いているケース

• CI/CDパイプラインでのE2Eテスト: テストランナーとの統合が充実している
• プログラマティックな大量操作: 数百ページのクローリングなど、スクリプトで制御するケース
• マルチブラウザテスト: Chrome、Firefox、Safariを横断してテストする場合
• コード内での精密な制御: waitForSelector、networkイベントの監視など、きめ細かい制御が必要な場合
• Headless専用環境: サーバーサイドで完結する操作

二段階認証・OAuth・CAPTCHAの壁

ブラウザ自動化で必ずぶつかる壁がこの3つだ。

Playwright の場合、二段階認証やOAuthリダイレクトはテストの大敵になる。storageStateでセッションをシリアライズする方法はあるが、トークンの有効期限切れ管理が面倒で、OAuthのリフレッシュトークンフローもカバーしきれない。

PinchTab の場合、プロファイル機能で「本物のChromeブラウザのセッション」がまるごと永続化される。Chromeのパスワードマネージャに保存された認証情報も含まれる。ログイン状態が切れたら、headedモードで起動して手動で再ログインするだけだ。

CAPTCHAに関しては、どちらのツールでも自動突破は基本的にできない（するべきでもない）。PinchTabの場合は「headedモードで人間がCAPTCHAを突破 → その後のセッションをAIが利用」というワークフローが自然に組める。

使い分けの早見表

判断基準	PinchTab	Playwright
AIからの呼び出し	◎ MCP対応	△ ラッパー必要
ログイン維持	◎ プロファイル永続	○ storageState
2FA/OAuth	◎ 人間+AIの分担	△ セットアップ複雑
E2Eテスト	△ テストランナーなし	◎ Jest/Vitest統合
大量クローリング	△ サーバー常駐	◎ スクリプト向き
マルチブラウザ	× Chromeのみ	◎ 3ブラウザ対応
セットアップ	◎ ゼロコンフィグ	○ npm installのみ

トラブルシューティング

サーバーが起動しない

# ポートが既に使われているか確認
lsof -i :9867

デフォルトポート9867が別プロセスに使われている場合、設定ファイルまたは起動時のオプションでポートを変更する。

Chromeが見つからない

PinchTabはシステムにインストールされたChromeまたはChromiumを利用する。macOSなら /Applications/Google Chrome.app にChromeがインストールされていれば自動検出される。

Chromiumを使いたい場合や、カスタムパスにChromeがある場合は、環境変数で明示的に指定する。

タブが増えすぎてメモリを食う

長時間稼働させていると、開きっぱなしのタブが蓄積してメモリを圧迫する。pinchtab__tabs でタブ一覧を確認し、不要なタブは閉じる運用を入れよう。

headlessモードでログインが弾かれる

一部のサービス（特にGoogleの一部サービス）は、headlessブラウザからのアクセスをブロックすることがある。PinchTabのステルスモードで回避できるケースもあるが、完全ではない。

確実なのは初回ログインを必ずheadedモードで行うこと。headedモードでセッションを確立した後なら、headlessに切り替えてもセッションが維持される場合が多い。

スナップショットが巨大になる

動的なSPAページでは、アクセシビリティツリーが数万トークンに膨れることがある。interactive フラグをオンにして、インタラクティブ要素のみに絞ると改善する。

# CLIの場合
pinchtab snap -i -c

-i はインタラクティブ要素のみ、-c はコンパクト表示。トークン消費を大幅に削減できる。

MCPツールが認識されない

Claude Codeで pinchtab__ ツールが出てこない場合、以下を確認する。

1. .mcp.json のパスが正しいか（プロジェクトルート直下にあるか）
2. pinchtab コマンドにPATHが通っているか（which pinchtab で確認）
3. Claude Codeを再起動したか（MCP設定の反映にはリロードが必要）

# PinchTabのパスを確認
which pinchtab

# バージョン確認
pinchtab --version

セキュリティ上の注意

PinchTabはAIエージェントにログイン済みブラウザのフルコントロールを与えるツールだ。便利な反面、以下のリスクは理解しておく必要がある。

• ~/.pinchtab/ ディレクトリにはセッション情報（Cookie、ログイン状態）が保存される。このディレクトリのパーミッションは 700（所有者のみ）に設定すること
• PINCHTAB_TOKEN を設定しないと、localhostの9867ポートに誰でもアクセスできる
• AIエージェントがPinchTab経由で行った操作は、すべてそのプロファイルのログインユーザーとして実行される。クレジットカード情報が入力されたページや、金銭に関わる操作には注意が必要
• データは基本的にローカルマシンから出ないが、接続されたAIエージェント（Claude Code等）はページ内容を読み取れる

原則: PinchTabに与えるプロファイルは、失っても問題ないアカウントか、操作範囲を限定できるアカウントにすること。

まとめ

PinchTabは「AIにブラウザの目と手を与える」という、シンプルだが強力なツールだ。

MCPサーバーとして動作するため、Claude CodeやCursorからの呼び出しが自然に統合される。プロファイルベースのセッション管理で二段階認証やOAuthの壁も実用的に乗り越えられる。12MBのGoバイナリで依存ゼロ、ゼロコンフィグで起動できる手軽さも魅力的だ。

一方で、E2Eテストの自動化やCI/CDパイプラインへの組み込みはPlaywrightの領域。PinchTabは「対話的なAIエージェントのブラウザ拡張」という位置づけで使うのが正解だろう。

導入は5分で終わる。まずは curl -fsSL https://pinchtab.com/install.sh | bash で入れて、Claude Codeの .mcp.json に設定を追加するところから始めてみてほしい。

github.com

pinchtab/pinchtab — GitHub Browser control for AI agents. 12MB Go binary, zero config, accessibility-first HTTP API.

pinchtab.com

PinchTab — Browser Control for AI Agents 公式サイト。インストールスクリプト、ドキュメント、APIリファレンスなど。