AI エージェント（Claude Code / Cursor / OpenCode 等）から、MCP 経由でブラウザ操作ができるようになります。ナビゲーション、クリック、フォーム入力、スクリーンショット、JS 実行まで、単一の pinchtab ツールに集約。
- 単一ツール設計 --
actionパラメータ1つで16種類の操作を振り分け。コンテキスト消費を最小限に抑える - Zod バリデーション -- 全パラメータに型付きバリデーション
- スクリーンショット対応 -- base64 JPEG で MCP 画像コンテンツとして返却
- 認証トークン転送 -- PinchTab 側の
BRIDGE_TOKENをそのまま転送 - タイムアウト制御 -- リクエスト単位でタイムアウトを設定可能
graph LR
A[AI クライアント] -->|MCP stdio / JSON-RPC| B[pinchtab-mcp]
B -->|HTTP| C[PinchTab :9867]
C -->|CDP| D[Chrome / Brave]
style A fill:#5865F2,color:#fff,stroke:none
style B fill:#2b2d31,color:#fff,stroke:#8B5CF6
style C fill:#00ADD8,color:#fff,stroke:none
style D fill:#FB542B,color:#fff,stroke:none
| アクション | 説明 | 主なパラメータ |
|---|---|---|
navigate |
URL に遷移 | url, newTab?, blockImages?, timeout? |
snapshot |
アクセシビリティツリー取得 | filter?, format?, diff?, maxTokens?, depth? |
click |
要素をクリック | ref |
type |
テキスト入力 | ref, text |
fill |
入力欄をクリアして値セット | ref, text |
press |
キー押下 | ref, key (例: Enter, Tab) |
hover |
要素にホバー | ref |
scroll |
スクロール | ref?, scrollY |
select |
ドロップダウン選択 | ref, value |
focus |
要素にフォーカス | ref |
text |
ページテキスト抽出 | mode? (readability / raw) |
tabs |
タブ操作 | tabAction? (list / new / close) |
screenshot |
スクリーンショット (JPEG) | quality? (1-100) |
evaluate |
ページ内で JS 実行 | expression |
pdf |
PDF 出力 | landscape?, scale? |
health |
接続確認 | — |
全アクションで tabId を指定してタブを切り替え可能。
フォーム送信は
press Enterより送信ボタンのclickが確実。
| やりたいこと | 推奨 | トークン目安 |
|---|---|---|
| ページの中身を読む | text |
~800 |
| ボタンやリンクを探す | snapshot + filter=interactive&format=compact |
~3,600 |
| 変更差分だけ取る | snapshot + diff=true |
差分のみ |
| 見た目を確認 | screenshot |
~2,000 |
# macOS / Linux
curl -fsSL https://pinchtab.com/install.sh | bash
# Docker
docker run -d -p 9867:9867 ghcr.io/pinchtab/pinchtab:latest
npm install -g pinchtabは環境によってバイナリが入らないことがある。上記を推奨。
公式ドキュメント: pinchtab.com/docs
git clone https://github.com/cUDGk/pinchtab-mcp.git
cd pinchtab-mcp
npm install
npm run buildsrc/index.ts → dist/index.js にコンパイルされます。
~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"pinchtab": {
"command": "node",
"args": ["/path/to/pinchtab-mcp/dist/index.js"],
"env": {
"PINCHTAB_URL": "http://localhost:9867"
}
}
}
}~/.cursor/mcp.json またはプロジェクトルートの .cursor/mcp.json:
{
"mcpServers": {
"pinchtab": {
"command": "node",
"args": ["/path/to/pinchtab-mcp/dist/index.js"],
"env": {
"PINCHTAB_URL": "http://localhost:9867",
"PINCHTAB_TOKEN": "my-secret"
},
"type": "stdio"
}
}
}~/.config/opencode/opencode.json またはプロジェクトルート:
| 変数 | デフォルト | 説明 |
|---|---|---|
PINCHTAB_URL |
http://localhost:9867 |
PinchTab サーバーの URL |
PINCHTAB_TOKEN |
(なし) | PinchTab 側の BRIDGE_TOKEN と一致させる |
PINCHTAB_TIMEOUT |
30000 |
リクエストタイムアウト (ms) |
# そのまま
pinchtab
# トークン付き（推奨）
BRIDGE_TOKEN=my-secret pinchtabhttps://news.ycombinator.com を開いてトップ10の記事タイトルを抽出して
use pinchtab
https://example.com/login でユーザー名とパスワードを入力してログインして
use pinchtab
今のページのスクショ撮って
use pinchtab
pinchtab-mcp/
├── src/
│ └── index.ts # MCP stdio サーバー（全ロジック集約）
├── dist/ # ビルド出力 (gitignore)
├── package.json
└── tsconfig.json
| 症状 | 原因と対処 |
|---|---|
Connection failed: ... Is PinchTab running? |
PinchTab が起動していない。別ターミナルで pinchtab を実行 |
npm install -g pinchtab したがコマンドが見つからない |
npm 版は環境依存。curl -fsSL https://pinchtab.com/install.sh | bash を使う |
press Enter でフォームが送信されない |
サイトによってはボタンクリックで送信。送信ボタンの ref を click する |
検索欄に "queryEnter" が入る |
press が値として追加されるケース。fill で値をセットしてからボタンを click |
BRIDGE_TOKEN/PINCHTAB_TOKENは本番では必ず設定し、定期的にローテーションevaluateはページ内で任意 JS を実行する。信頼できるドメインのみで使用すること- PinchTab は
localhostかプライベートネットワーク内で運用。外部に公開しない
このプロジェクトは以下のオープンソースプロジェクトの上に構築されています:
- PinchTab -- Go 製のブラウザ自動化エンジン。HTTP API 経由で Chrome を操作。PinchTab authors によるプロジェクト。
- MCP TypeScript SDK -- Model Context Protocol の公式 TypeScript 実装。Anthropic による MCP 仕様 に基づく。
- 元リポジトリ: domci/pinchtab-mcp
MIT License -- Copyright (c) 2026 cUDGk
{ "$schema": "https://opencode.ai/config.json", "mcp": { "pinchtab": { "type": "local", "command": ["node", "/path/to/pinchtab-mcp/dist/index.js"], "enabled": true, "environment": { "PINCHTAB_URL": "http://localhost:9867", "PINCHTAB_TOKEN": "my-secret" } } } }