Playwright Lighthouse MCP

🚀 Playwright-Lighthouse MCP Server

這是一個使用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 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"（漸進式Web應用）
  • maxItems：每個類別要顯示的最大改進項數量（默認：3，最大：5）

2. take-screenshot

對當前打開的頁面進行截圖。

• 參數：
  • url：要捕獲的網站URL
  • fullPage：如果為true，則捕獲整個頁面的截圖（默認：false）

輸出格式

分析結果包括：

• 每個選定類別的總體得分及顏色指示
• 按類別分組的關鍵改進領域
• 保存的報告文件路徑

📄 許可證

本項目採用MIT許可證，詳情請參閱 LICENSE。