microsoft/playwright-mcp: Playwright MCP serverをCursorで使おうと思ったときにエラーが出たので対応方法をメモしておきます。

事象

CursorのMCP Serversの設定画面でplaywright-mcpを設定する際、以下画像の状態が期待値です。

Image from Gyazo

しかし、問題があると赤文字で

Failed to Create Client

と表示されてしまいます。

原因

MCPサーバを起動するための手順を踏んでいない可能性があります。

ググるとplaywright-mcp関連の記事がたくさん出てきますが、最初の設定部分が飛ばされているものも多いので、おそらく初心者が個々の記事を参考にやるとハマる場合があるだろうと思われます。

対応

大きな流れは以下です。

  1. node.jsをインストール
  2. npmを使ってplaywright-mcpをインストール
  3. CursorのMCP Serversの設定画面でplaywright-mcpを設定

node.jsをインストール

たとえばこのあたりを参考。

Node.jsとnpmをWindowsにインストールする方法 #Windows10 - Qiita

Node.jsのインストール情報はたくさんあるので、ここは問題ないと思います。

npmを使ってplaywright-mcpをインストール

Windows PowerShellやmacのターミナルを開いて以下のコマンドを実行。

npm install -g @playwright/mcp@latest

※ -g はグローバルにインストールするためのオプションです。よくワカランけど自宅PCにインストールしてみよう、くらいならいいですが、仕事用のPCや開発用のPCに入れようという場合は身近なわかる人に確認したほうがいいかもしれません。

CursorのMCP Serversの設定画面でplaywright-mcpを設定

Cursorの画面右上の歯車マークをクリック。

Image from Gyazo

次にMCPを選択してMCP Servers画面に行きます。私は設定済なのでplaywright-mcpが表示されていますが、まだの方はここは何もでていません。

そして右上のAdd new global MCP serverを選択。

そうすると mcp.json というファイルが開かれるので、以下内容を貼り付け。

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

※ mcp.jsonが空の前提で話をしています。既に記載されているものがある場合は、上記の内容で置き換えるのではなく、既存の内容に上記内容を追加してください。

この状態で、

Image from Gyazo

のようにグリーンの●が表示されていればOKです。

もしうまくいかないときは？

可能性がいくつも考えられるので「これで解決！」とは断言できませんが、まずMCPの一覧の中にあるトグルを一度OFFにして再度ONにしてみてください。私はこれで解消したこともあります。

ほかには、C:\Users\ユーザー名\AppData\Roaming\npm\node_modulesの中にある @playwright フォルダを一度消して、再度 npm install -g @playwright/mcp@latest を実行してみるといいかもしれません。