Playwright Lighthouse MCP

🚀 Playwright-Lighthouse MCP Server

PlaywrightとLighthouseを使用してウェブサイトのパフォーマンスを分析するMCPサーバーです。モデルコンテキストプロトコル（MCP）を通じて、LLMがウェブサイトのパフォーマンス分析を行うことができます。

🚀 クイックスタート

このセクションでは、Playwright-Lighthouse MCP Serverのセットアップと使用方法について説明します。

✨ 主な機能

• Lighthouseによるパフォーマンス分析
• スクリーンショットの取得

📦 インストール

前提条件

• Node.js 18以上
• npm

インストール手順

# リポジトリをクローンする
git clone https://github.com/kbyk004/playwright-lighthouse-mcp.git
cd playwright-lighthouse-mcp

# 依存関係をインストールする
npm install
npx playwright install

# ビルドする
npm run build

💻 使用例

基本的な使用法

MCPサーバーのデバッグ

npm run inspector

MCPクライアントとの統合

このサーバーは、モデルコンテキストプロトコル（MCP）をサポートするクライアントと一緒に使用するように設計されています。例えば、Claude for Desktopと統合することができます。

Claude for Desktopの設定例

Claude for Desktopの設定ファイル（~/Library/Application Support/Claude/claude_desktop_config.json）に以下を追加します。

{
  "mcpServers": {
    "playwright-lighthouse": {
      "command": "node",
      "args": [
        "/path-to/playwright-lighthouse-mcp/build/index.js"
      ]
    }
  }
}

高度な使用法

利用可能なツール

1. run-lighthouse

現在開いているページでLighthouseのパフォーマンス分析を実行します。

パラメータ:

• url: 分析したいウェブサイトのURL
• categories: 分析するカテゴリの配列（デフォルト: ["performance"]）
  • 利用可能なカテゴリ: "performance", "accessibility", "best-practices", "seo", "pwa"
• maxItems: 各カテゴリで表示する改善項目の最大数（デフォルト: 3, 最大: 5）

2. take-screenshot

現在開いているページのスクリーンショットを取得します。

パラメータ:

• url: キャプチャしたいウェブサイトのURL
• fullPage: trueの場合、ページ全体のスクリーンショットをキャプチャします（デフォルト: false）

出力形式

分析結果には以下が含まれます。

• 色付きのインジケーター付きの各選択カテゴリの総合スコア
• カテゴリ別にグループ化された主要な改善領域
• 保存されたレポートファイルのパス

📄 ライセンス

このプロジェクトはMITライセンスの下で公開されています。詳細はLICENSEを参照してください。