簡単！文字少なめ！Claude for desktop からPlaywrightでブラウザ操作ができるまで

MicrosoftのPlaywright MCPを使います。

https://github.com/microsoft/playwright-mcp

ここにある通りですが、ややこしいことは抜きにして取り敢えず使ってみたい人向けの記事です。

前提として、NodeJSがインストールされていて npx コマンドが実行できる必要があります。
私はMacを使用していますが、やることはWindowsでも変わらないと思います。（たぶん）

1. Claude for desktopの設定を開いて開発者タブを選択しする

2. 構成を編集ボタンを押下するとclaude_desktop_config.jsonが選択された状態でフォルダーが開く

3. claude_desktop_config.jsonを編集

claude_desktop_config.json

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

因みに私はローカルのnodeのバージョン管理をvoltaで行なっているため command には /Users/{ユーザー名}/.volta/bin/npx を指定しています。

4. Claude for desktopを再起動

トンカチアイコンが表示され、アイコン押下でplaywrightの使用可能なツールがリストされます。

5. 使ってみる

おしまい。

Claudeの手順ですが、CursorでもVScode（Insider）でも最終的にmcpの設定ファイルに同じようにJSON設定すれば使えるようになります。