performance-mcp

Analysis MCP Service a web performance analysis service based on MCP (Model Context Protocol), which performance metrics and provides optimization suggestions. ## Features - **Web Performance Analysis**: Collects and analyzes various performance metrics - **Performance Issue Detection**: Ident performance bottlenecks - **Optimization Suggestions Generation**: Provides targeted optimization solutions - **Screenshot Functionality**: Captures webpage states ## Environment Requirements Node.js (v16+) - npm or yarn - Environment supporting Playwright ## Installation ```bash # Install dependencies npm install the project npm run build## Usage The project supports two usage modes: - As a CLI tool for direct webpage analysis - As an MCP service integrated into clients via STDIO or SSE ### CLI Mode Local usage: ```bash # Build the project npm run build # Direct analysis npm run cli -- https://example.com # Or directly execute the script node scripts/analyze.js https://example.com ``` After installation: ```bash # Global installation performance-cli https://example.com performance-analyzer https://example.com # Without installation, use via npx npx -p @ylmz/performance-analyzer-mcp performance-cli https://example.com ``` Common options: ```bash # Set timeout performance-cli https://example.com --timeout 45000 # Warm up cache before measurement performance-cli https://example.com --warm-cache # Do not save screenshot performance-cli https://example.com --no-screenshot # Output JSON performance-cli https://example.com --json # Output Markdown report performance-cli https://example.com --format md -o report.md ``` Full parameters: ```bash performance-cli --help ``` ### Transmission Mode #### STDIO Mode (Default) Suitable for integration into LLM applications: ```bash npm start ``` #### SSE Mode Suitable for web application integration, providing real-time communication over HTTP: ```bash npm run start:sse ``` Or specify a port: ```bash node build/index.js --transport=sse --port=3002 ``` ### MCP Tool Invocation After starting the MCP service, tools can be invoked through the MCP client: ```json { "jsonrpc": "2.0", id": "1", method": "tools/call", params": { "name": "analyze-performance", "arguments": {} } } ``` The service will prompt for a URL, then invoke the tool again with the provided URL: { "json "2.0", "id": "1", "method": "tools/call", " { "name": "", "arguments": { "url": "https://example.com" } } ### Development Mode Run directlyScript (without pre-compilationbash # STDIO mode run dev # SSE mode run dev:sse Client Examples ### STDIO ```bash # Analyze a specified URL node scripts/analyze://example.com # Interactive URL input node scripts/analyze.js### SSE Mode Client ```bash # Analyze a specified URL port 3001) npm:sse https://example.com Analyze a specified URL () node scripts/sse-client.js https://example.com 3002 # Interactive URL input npm:sse ``` ## SSE Mode Description In SSE mode, the server and client communicate via Server-Sent Events: 1. **Connection Establ - Client connects to the `/sse` endpoint - Server generates a unique connection ID and returns it to the client 2. **Message Passing**: - Client adds `X-Connection-ID` in the request header - Requests are sent to the `/messages` endpoint in JSON 2.0 format **Connection Maintenance**: sends heartbeat messages every 30 seconds - Connection times out and closes automatically after 30 minutes ## Available Tools The MCP service provides three main tools: 1. **analyze - Analyzes of a specified URL : - `url`: URL to analyze - `saveScreenshot`: Whether to save a screenshot (optional, default true) - `timeout`: Page load timeout ( default 30000ms) - `warmCache`: Whether to warm up the cache before measurement (optional, default false) 2. **get-screenshot** - Retrieves a page screenshot for a specified session - Parameters: - `sessionId`: Analysis session ID 3. **get-analysis-details** - Retrieves a detailed analysis report - Parameters: `sessionId`: ID ## Project Structure└── src/ ├── # Core performance analysis ├── server/ # implementation ├── types/ Type definitions ├── # Utility functions └── index.ts # Program entry point ``` ## Performance Metrics Description The service collects and analyzes key performance metrics, including: ### Navigation Timing Metrics **loadTime**: Time for the page to fully load - **domContentLoaded**: Time for DOM content to load - **firstPaint**: First paint time - **firstContentfulPaint**: First contentful paint time - **largestContentfulPaint**: Largest contentful paint time ### Resource Statistics Metrics - **totalSize**: Total size resources - **totalCount**: Total number of resources -Type**: Resource statistics by type **slowestResources**: slowest resources to load