🌌
【Electron】playwright MCPを使いAI Agentにレンダラープロセスを操作してもらう。

2025/10/06に公開
Electron
Model Context Protocol
GitHub Copilot
zennfes2025ai
tech
 はじめに皆さんこんにちは。

Electronを使った自作ソフトウェアを作成中の高校生です。
Github Copilotが学生なら無料で使えるということで、最新のClaude Code 4.5やGPT-5 CodexとMCPを使ってVibe Codingをモンスター片手に楽しんでいたのですが、その過程でPlaywright MCPというものを知りました。
Microsoft製のブラウザ自動化ツールPlaywrightをMCPサーバー( AIに追加のツールを与えるもの )として動作させるもののようです。
いままでElectronを使ったプロジェクトをAI Agentに作業してもらうときは、
レンダラープロセスでエラー発生(AI Agentは見れない)
エラー内容をコピー
AI Agentが修正もしくは 1 へ戻る
というプロセスだったので、時間と労力が無駄に発生していました。
そこでこのPlaywright MCPの登場です。これ経由でレンダラープロセスをAI Agentになんとか見せれればこのプロセスは省略でき、開発スピードも向上するというわけです。

 解決方法(VSCode + Github Copilot)Electronのメインプロセス側に以下の内容を記述。

ファイルのなるべく先頭に書く必要あり。
後にも書きますが、リモートデバッグを開くのでセキュリティ的にはよろしくないです。@electron-toolkit/utilsなどを使って開発時にのみ実行するようにしてください。
app.commandLine.appendSwitch('--remote-debugging-port', '9222')

//残りの記述(app.whenReady() とか function createWindow() とか...)
​

2. .vscode/mcp.jsonに以下の内容を記述。
{
  "servers": {
    "playwright": {
      "command": "npx",
      "args": ["--", "@playwright/mcp@latest", "--cdp-endpoint", "http://localhost:9222"]
    }
  },
  "inputs": []
}
​

3. Github Copilotに「Playwright MCPを使ってElectronのレンダラープロセスの状況を見て」と指示。

​

4. レンダラープロセスの状況を見てくれるようになります🎉🎉🎉


 解説ここからは少し掘り下げて解説していきます。

仕組みを理解しておくと、ElectronのデバッグやAI Agentとの連携をより柔軟に扱える用になると思います。（たぶん...)

 ElectronのリモートデバッグポートについてElectronはデフォルトでは外部からレンダラープロセスにアクセスできないようになっています。しかし、--remote-debugging-portオプションを使うことで、Chrome DevTools Protocolを経由した外部アクセスが可能になります。
app.commandLine.appendSwitch('--remote-debugging-port', '9222')
この一行を追加することで、Electronアプリケーションは起動時にポート9222でデバッグ接続を待ち受けるようになります。これにより、外部ツール(今回はPlaywright MCP)がレンダラープロセスの状態を監視・操作できるようになるわけです。

 Github CopilotとMCPの統合現状(2025/10/06)、VSCodeのGithub Copilotは、.vscode/mcp.jsonファイルを読み込むことでMCPサーバーと連携できます。
{
  "servers": {
    "playwright": {
      "command": "npx",
      "args": ["--", "@playwright/mcp@latest", "--cdp-endpoint", "http://localhost:9222"]
    }
  },
  "inputs": []
}
この設定により、Copilotは起動時にnpx @playwright/mcp@latest --cdp-endpoint http://localhost:9222を実行し、Playwright MCPサーバーを立ち上げます。--cdp-endpointオプションで先ほど設定したElectronのリモートデバッグポートを指定することで、PlaywrightがElectronに接続できるようになるわけです。

 メリットと注意点
 メリット開発速度の向上: エラー確認&修正のサイクルの自動化による効率化
正確なデバッグ: AI Agentが実際にレンダラープロセスを見てくれるので、推測してエラーを起こすといったことがなくなり、事実に基づく修正ができる。
学習効率の向上: AI Agentの問題解決方法を人間が見ることにより、デバッグスキルが向上

 注意点リモートデバッグポートを開くことで、誰でもそのアプリを完全に操作できる状態になります。(引用)

開発環境でのみ使用し、本番環境では絶対に有効にしないようにしてください。
また、ポート9222が既に使用されている場合は別のポート番号を指定する必要があります。

 おわりにこんなことをしていたらすでに時計の針は12時を超えて、「おはようございます」の時間です!👁️👁️
Playwright MCPとElectronのリモートデバッグ機能を組み合わせることで、AI Agentによる開発体験が大きく向上しました。モンスター片手にVibe Codingがさらに捗りそうです🎉
皆さんもぜひ試してみてください!
はじめに

解決方法(VSCode + Github Copilot)

解説

Electronのリモートデバッグポートについて

Github CopilotとMCPの統合

メリットと注意点

メリット

注意点

おわりに

Discussion
