What is Playwright Lighthouse Mcp

playwright-lighthouse-mcp is a MCP server that analyzes website performance using Playwright and Lighthouse. It enables Large Language Models (LLMs) to perform detailed performance analysis through the Model Context Protocol (MCP).

Use cases

Use cases include running performance audits on web applications, capturing screenshots for documentation or testing purposes, and integrating with other tools that support the Model Context Protocol for enhanced functionality.

How to use

To use playwright-lighthouse-mcp, first clone the repository and install the necessary dependencies. After building the project, you can run the MCP server and integrate it with compatible clients like Claude for Desktop by configuring the MCP server settings in the client’s configuration file.

Key features

Key features include performance analysis using Lighthouse, which provides insights into various performance metrics, and the ability to capture screenshots of web pages.

Where to use

playwright-lighthouse-mcp can be used in web development, quality assurance, and performance optimization fields, where analyzing website performance is crucial.

Playwright-Lighthouse MCP Server

A MCP server that analyzes web site performance using Playwright and Lighthouse. Through the Model Context Protocol (MCP), LLMs can perform web site performance analysis.

Features

• Performance analysis with Lighthouse
• Screenshot capture

Setup

Prerequisites

• Node.js 18 or higher
• npm

Installation

# Clone the repository
git clone https://github.com/kbyk004/playwright-lighthouse-mcp.git
cd playwright-lighthouse-mcp

# Install dependencies
npm install
npx playwright install

# Build
npm run build

Usage

Debugging MCP Server

npm run inspector

Integration with MCP Clients

This server is designed to be used with clients that support the Model Context Protocol (MCP). For example, it can be integrated with Claude for Desktop.

Configuration Example for Claude for Desktop

Add the following to the Claude for Desktop configuration file (~/Library/Application Support/Claude/claude_desktop_config.json):

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

Available Tools

1. run-lighthouse

Runs a Lighthouse performance analysis on the currently open page.

Parameters:

• url: The URL of the website you want to analyze
• categories: Array of categories to analyze (default: [“performance”])
  • Available categories: “performance”, “accessibility”, “best-practices”, “seo”, “pwa”
• maxItems: Maximum number of improvement items to display for each category (default: 3, max: 5)

2. take-screenshot

Takes a screenshot of the currently open page.

Parameters:

• url: The URL of the website you want to capture
• fullPage: If true, captures a screenshot of the entire page (default: false)

Output Format

The analysis results include:

• Overall scores for each selected category with color indicators
• Key improvement areas grouped by category
• Path to the saved report file

License

MIT License - see LICENSE for details