Playmcp

🚀 PlayMCPブラウザ自動化サーバー

Playwrightを使用した包括的なMCP（Model Context Protocol）サーバーです。このサーバーは、ウェブスクレイピング、テスト、自動化のための強力なツールを提供します。

🚀 クイックスタート

1. インストールとセットアップ:

   git clone <repo-url> && cd PlayMCP
   npm install && npm run build && npx playwright install
   

2. MCPクライアントの設定に追加

3. 自動化を開始:

   await openBrowser({ debug: true })
   await navigate({ url: "https://news.ycombinator.com" })
   const links = await getLinks()
   console.log(`Found ${links.length} links`)
   

✨ 主な機能

ブラウザの基本制御

• openBrowser - オプションのヘッドレスモードで新しいブラウザインスタンスを起動します。
• navigate - 任意のURLに移動します。
• click - CSSセレクタを使用して要素をクリックします。
• type - 入力フィールドにテキストを入力します。
• moveMouse - マウスを特定の座標に移動します。
• scroll - 指定された量だけページをスクロールします。
• screenshot - ページ、ビューポート、または特定の要素のスクリーンショットを撮ります。
• closeBrowser - ブラウザインスタンスを閉じます。

ページコンテンツの抽出

• getPageSource - 完全なHTMLソースコードを取得します。
• getPageText - HTMLを取り除いたテキストコンテンツを取得します。
• getPageTitle - ページのタイトルを取得します。
• getPageUrl - 現在のURLを取得します。
• getScripts - ページからすべてのJavaScriptコードを抽出します。
• getStylesheets - すべてのCSSスタイルシートを抽出します。
• getMetaTags - すべてのメタタグとその属性を取得します。
• getLinks - href、テキスト、タイトルを含むすべてのリンクを取得します。
• getImages - src、alt、寸法を含むすべての画像を取得します。
• getForms - すべてのフォームとそのフィールドおよび属性を取得します。
• getElementContent - 特定の要素のHTMLとテキストコンテンツを取得します。

高度な機能

• executeJavaScript - ページ上で任意のJavaScriptコードを実行し、結果を返します。

利用可能なツールのリファレンス

📦 インストール

完全なインストール手順

1. 前提条件

   • Node.js 16以上（nodejs.org からダウンロード）
   • Git（リポジトリをクローンするため）

2. クローンとセットアップ

   git clone <repository-url>
   cd PlayMCP
   npm install
   npm run build
   

3. Playwrightブラウザのインストール

   npx playwright install
   

   これにより、必要なブラウザバイナリ（Chromium、Firefox、Safari）がダウンロードされます。

4. インストールの確認

   npm run start
   

   すべてが正常に動作している場合、「Browser Automation MCP Server starting...」と表示されます。

クイックインストール

git clone <repository-url>
cd PlayMCP
npm install && npm run build && npx playwright install

💻 使用例

MCPサーバーとして

MCP設定ファイルに追加します。

標準的なMCP設定:

{
  "servers": {
    "playmcp-browser": {
      "type": "stdio",
      "command": "node",
      "args": ["./dist/server.js"],
      "cwd": "/path/to/PlayMCP",
      "description": "Browser automation server using Playwright"
    }
  }
}

代替設定（VS Code GitHub Copilotで動作）:

{
  "servers": {
    "playmcp-browser": {
      "type": "stdio",
      "command": "node",
      "args": ["/absolute/path/to/PlayMCP/dist/server.js"]
    }
  }
}

Windowsユーザー用:

{
  "servers": {
    "playmcp-browser": {
      "type": "stdio",
      "command": "node",
      "args": ["C:\\path\\to\\PlayMCP\\dist\\server.js"]
    }
  }
}

VS Code GitHub Copilotとの統合

このMCPサーバーは、VS Code GitHub Copilotと完全に互換性があります。上記の設定をMCP設定に追加した後、VS Code内ですべてのブラウザ自動化ツールを直接使用できます。

設定例

Claude Desktop（config.jsonの場所）:

• Windows: %APPDATA%\Claude\config.json
• macOS: ~/Library/Application Support/Claude/config.json
• Linux: ~/.config/Claude/config.json

VS Code MCP拡張機能: VS Codeのsettings.jsonまたはMCP設定ファイルに追加します。

完全な設定例:

{
  "mcpServers": {
    "playmcp-browser": {
      "type": "stdio",
      "command": "node",
      "args": ["/Users/username/PlayMCP/dist/server.js"],
      "description": "Browser automation with Playwright"
    }
  }
}

ツールの使用例

基本的なウェブスクレイピング

// ブラウザを開き、移動する
await openBrowser({ headless: false, debug: true })
await navigate({ url: "https://example.com" })

// コンテンツを抽出する
const title = await getPageTitle()
const links = await getLinks()
const forms = await getForms()

フォーム自動化

// フォームに入力する
await click({ selector: "#login-button" })
await type({ selector: "#username", text: "user@example.com" })
await type({ selector: "#password", text: "password123" })
await click({ selector: "#submit" })

ページインタラクション

// スクロールしてインタラクションする
await scroll({ x: 0, y: 500 })
await moveMouse({ x: 100, y: 200 })
await click({ selector: ".dropdown-menu" })

高度なJavaScript実行

// カスタムJavaScriptを実行する
await executeJavaScript({ 
  script: "document.querySelectorAll('h1').length" 
})

// ページコンテンツを変更する
await executeJavaScript({ 
  script: "document.body.style.backgroundColor = 'lightblue'" 
})

// 複雑なデータを抽出する
await executeJavaScript({ 
  script: `
    Array.from(document.querySelectorAll('article')).map(article => ({
      title: article.querySelector('h2')?.textContent,
      summary: article.querySelector('p')?.textContent
    }))
  `
})

スクリーンショットとドキュメント化

// スクリーンショットを撮る
await screenshot({ path: "./full-page.png", type: "page" })
await screenshot({ path: "./element.png", type: "element", selector: "#main-content" })

🔧 技術詳細

• src/server.ts - 主なMCPサーバーの実装
• src/controllers/playwright.ts - Playwrightブラウザコントローラー
• src/mcp/ - MCPプロトコルの実装
• src/types/ - TypeScriptの型定義

システム要件

• Node.js 16以上（LTSバージョンを推奨）
• オペレーティングシステム: Windows、macOS、またはLinux
• メモリ: 少なくとも2GB RAM（大量の使用時は4GB以上を推奨）
• ディスク容量: ブラウザバイナリと依存関係に約500MB

依存関係

• Playwright: ブラウザ自動化を処理します（自動的にインストールされます）
• TypeScript: コンパイル用（開発依存関係）
• ブラウザバイナリ: npx playwright install を通じてダウンロードされます。

トラブルシューティング

一般的な問題

1. 「Browser not initialized」エラー

   • 他のブラウザ操作の前に openBrowser を呼び出すことを確認してください。
   • Node.jsのバージョンが16以上であることを確認してください。

2. Playwrightのインストールが失敗する

   # 手動でブラウザをインストールする
   npx playwright install chromium
   # またはすべてのブラウザをインストールする
   npx playwright install
   

3. Linux/macOSでのパーミッションエラー

   # スクリプトが実行可能であることを確認する
   chmod +x dist/server.js
   

4. MCP設定でのパスの問題

   • 設定で絶対パスを使用してください。
   • Windowsでは、ダブルバックスラッシュを使用してください: C:\\path\\to\\PlayMCP\\dist\\server.js
   • パスが存在することを確認してください: node /path/to/PlayMCP/dist/server.js

5. ブラウザがクラッシュまたはタイムアウトする

   • デバッグ用に headless: false で実行してみてください。
   • 複数のブラウザインスタンスを実行している場合は、システムメモリを増やしてください。
   • ウイルス対策ソフトがブラウザプロセスをブロックしていないか確認してください。

インストールのテスト

# サーバーを直接テストする
echo '{"jsonrpc":"2.0","id":1,"method":"tools/list","params":{}}' | node ./dist/server.js

利用可能なすべてのツールをリストするJSONレスポンスが表示されるはずです。

📄 ライセンス

MITライセンス