Playwright MCP を Claude Code につないで、ブラウザを操作させる

Playwright MCP とは

Playwright MCP は、ブラウザ操作の自動化ツール「Playwright」を使って、AI がウェブページを操作できるようにする MCP サーバーです。README では、次の点が特徴として挙げられています。

• 速くて軽い：画素ではなく、Playwright のアクセシビリティツリー（ページの構造情報）を使う
• AI が扱いやすい：画像を読むモデルが不要で、構造化されたデータだけで動く
• 結果が安定する：スクリーンショットに頼る方法で起きやすい、あいまいさを避けられる

動作には Node.js 18 以降が必要です。Claude Code のほか、VS Code、Cursor、Windsurf、Claude Desktop などの MCP クライアントで使えます。

導入する

Claude Code では、1行で追加できます。

claude mcp add playwright npx @playwright/mcp@latest

ほかのクライアントでは、次の標準の設定を使うのが基本です。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

VS Code のコマンドラインからは、次のように追加できます。

code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

Cursor では、設定の「MCP」から「Add new MCP Server」を開き、種類を command にして npx @playwright/mcp@latest を入れます。

Claude Code での追加先（スコープ）

claude mcp add は、何も指定しないと「ローカル」（そのプロジェクトだけ、自分だけ）に書き込みます。チームで共有したいときは --scope project、すべてのプロジェクトで使いたいときは --scope user を付けます。詳しくは「Claude Code に MCP サーバーをつなぐ方法」を参照してください。

主なオプション

オプション	内容
--headless	画面を出さずに動かす（既定は画面を出す）
--browser	使うブラウザ。chrome、firefox、webkit、msedge
--caps	追加で有効にする機能。vision、pdf、devtools
--isolated	ブラウザのプロファイルをメモリ上にだけ置き、ディスクに保存しない
--storage-state	隔離したセッションに読み込む、ログイン状態などのファイル
--user-data-dir	ユーザーデータの置き場所。省略すると一時フォルダを作る
--allowed-origins / --blocked-origins	アクセスを許すオリジン、止めるオリジン
--config	JSON の設定ファイルを読み込む
--extension	Playwright の拡張機能を入れた Chrome / Edge に接続する
--timeout-action / --timeout-navigation	操作の待ち時間（既定 5 秒）、ページ移動の待ち時間（既定 60 秒）

たとえば、ログイン状態のファイルを使い、プロファイルを保存しない設定は次のとおりです。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--isolated",
        "--storage-state={path/to/storage.json}"
      ]
    }
  }
}

使うときの注意

• 同じプロファイルは同時に1つだけ：永続プロファイルは、同時に1つのブラウザからしか使えません。複数のクライアントが同じ作業フォルダを共有すると衝突します。並列で動かすなら、--isolated を使うか、別々の --user-data-dir を指定します。
• 隔離モードは閉じると消える：--isolated では、ブラウザを閉じるとセッションの保存状態が失われます。
• オリジンの制限は安全の境界ではない：--allowed-origins と --blocked-origins について、README は「セキュリティの境界としては働かない」と明記しています。リダイレクトにも影響しません。
• ファイルへのアクセス：ファイルのアクセスは、既定で作業フォルダの範囲に限られます。
• 永続プロファイルの場所：macOS では ~/Library/Caches/ms-playwright/mcp-{channel}-{workspace-hash} に作られます。

CLI 版との使い分け

README は、コーディングエージェントには、CLI とスキルの組み合わせのほうがトークンの効率がよい場合があると説明しています。一方、MCP は、状態を保ったまま、豊富な情報を見ながら、考えを重ねて進めたい場合に向くとされています。たとえば、ページを見ながら試行錯誤するような使い方です。

どこから始めるか

まず、ローカルで動いている自分のサイトを開かせて、画面の確認や簡単な操作をさせると、動きがつかみやすいでしょう。ログインが必要なページは、--storage-state でログイン状態を渡す方法を試してください。外部のサイトを操作させるときは、アクセスしてよい範囲を自分で見張る前提で使ってください。