CursorでPlaywright MCPを使えると何がうれしいの？
Playwright MCPはLLMがブラウザを操作するためのMCPサーバーです。
Cursorと連携することで、ウェブサイトの構造を理解した上で操作することができるようになります。
具体的な活用事例はこの記事の後半に記します。
CursorでPlaywright MCPを使えるようにする
まず、Node.jsとnpmをインストールする必要があります。
以下のサイトからファイルをダウンロードしてインストールしてください。
ダウンロードしたファイルを実行すると、Node.jsとnpmがインストールされます。
次に、Cursor上で設定します。
Cursorのメニューバーの、
ファイル > ユーザー設定 > Cursor Settings を選択し、
開いたCursor Settingsのウィンドウ左側にあるMCPの項目を選択します。
そして、"+ Add new global MCP server"と書かれている青いボタンをクリックして
以下のように入力してください。
{
"mcpServers": {
"playwright-mcp": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
]
}
}
}
MCP名の左側に表示されているドットが緑色になったら、設定成功です。
試しにPlaywright MCPを使ってみる
ではCursorでPlaywright MCPを使ってみましょう。
サンプルとしてこのウェブサイトを例にあげてみます。
PICOというVRデバイスのマニュアルのページです。
英文で書かれているので和訳したいのですが、
試しにCromeのブラウザの「日本語に翻訳」の機能を使っても、
なぜかページの真ん中に書かれている本文の内容だけ和訳できていません。
そこでCursorとPlaywright MCPの出番です。
CursorのAgentモードで、ウェブサイトのURLと「このページの真ん中に書かれている内容を全て和訳してください。」と記入して実行すると、
CursorがMCP toolを実行するかどうかの許可を求めてきます。
"Run tool"と書かれた青いボタンをクリックすると
マークダウン形式で日本語訳を出力してくれます。
表になっているところはちゃんと表の形式にして出力されています。
（出力が途中で終了してしまった場合は、「続きを和訳してください。」と書いて実行すると続きを出力してくれます。）
このように、Playwright MCPで、ちゃんとLLMがウェブサイトの構造を把握して操作していることがわかるかと思います。
CursorとPlaywright MCPの連携により、ウェブサイトの構造を理解した上での操作が可能となります。この組み合わせを活用することで、ウェブサイトの自動操作や情報抽出が効率的に行えるようになります。ぜひ試してみてください。
この記事が、CursorとPlaywright MCPの連携方法についての理解を深める一助となれば幸いです。新たな技術を活用し、さらなる効率化を目指していきましょう。