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。