Playwright Lighthouse MCP

🚀 Playwright-Lighthouse MCP サーバー

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

✨ 主な機能

• 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 と統合できます。

デスクトップ版の設定例

デスクトップ版の設定ファイル (~/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 - 詳細は LICENSE を参照してください。