# WebPerf Snippets MCP server

> Diagnose Core Web Vitals and web performance using curated snippets in a headless Chromium browser via Playwright.

- Repository: https://github.com/nucliweb/webperf-snippets
- Page: https://hostedmcp.org/servers/nucliweb/webperf-snippets
- Transport: stdio
- Stars: 1457
- License: MIT
- Latest version: 1.16.0

## Install

### Claude Code

```sh
claude mcp add --env 'CRUX_API_KEY=<YOUR_CRUX_API_KEY>' webperf-snippets -- npx -y webperf-snippets
```

### Cursor (`~/.cursor/mcp.json`)

```json
{
  "mcpServers": {
    "webperf-snippets": {
      "command": "npx",
      "args": [
        "-y",
        "webperf-snippets"
      ],
      "env": {
        "CRUX_API_KEY": "<YOUR_CRUX_API_KEY>"
      }
    }
  }
}
```

### VS Code (`.vscode/mcp.json`)

```json
{
  "servers": {
    "webperf-snippets": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "webperf-snippets"
      ],
      "env": {
        "CRUX_API_KEY": "<YOUR_CRUX_API_KEY>"
      }
    }
  }
}
```

### VS Code CLI

```sh
code --add-mcp '{"name":"webperf-snippets","type":"stdio","command":"npx","args":["-y","webperf-snippets"],"env":{"CRUX_API_KEY":"<YOUR_CRUX_API_KEY>"}}'
```

### Claude Desktop (`claude_desktop_config.json`)

```json
{
  "mcpServers": {
    "webperf-snippets": {
      "command": "npx",
      "args": [
        "-y",
        "webperf-snippets"
      ],
      "env": {
        "CRUX_API_KEY": "<YOUR_CRUX_API_KEY>"
      }
    }
  }
}
```

### Codex

```sh
codex mcp add webperf-snippets --env 'CRUX_API_KEY=<YOUR_CRUX_API_KEY>' -- npx -y webperf-snippets
```

### Codex config.toml (`~/.codex/config.toml`)

```toml
[mcp_servers.webperf-snippets]
command = "npx"
args = ["-y", "webperf-snippets"]

[mcp_servers.webperf-snippets.env]
CRUX_API_KEY = "<YOUR_CRUX_API_KEY>"
```

### Gemini CLI

```sh
gemini mcp add -s user -e 'CRUX_API_KEY=<YOUR_CRUX_API_KEY>' webperf-snippets npx -- -y webperf-snippets
```

### Gemini settings.json (`~/.gemini/settings.json`)

```json
{
  "mcpServers": {
    "webperf-snippets": {
      "command": "npx",
      "args": [
        "-y",
        "webperf-snippets"
      ],
      "env": {
        "CRUX_API_KEY": "<YOUR_CRUX_API_KEY>"
      }
    }
  }
}
```

## Environment variables

| Name | Required | Secret | Description |
|---|---|---|---|
| `CRUX_API_KEY` | no | yes | Chrome UX Report API key for the field data of get_crux; the other tools work without it |

## FAQ

### How do I measure pages that require a login?

You can use a Playwright storage state file containing cookies and localStorage by passing it with the --storage-state flag.

### Can I use this in a CI/CD pipeline?

Yes, you can gate pull requests on performance budgets and output results in Markdown for PR comments or JSON for automated processing.

### How can I compare synthetic measurements with real user data?

By providing a Chrome UX Report (CrUX) API key, the tool compares your lab measurements with field data from real users.

### Does the tool make external calls by default?

No, the CLI does not make any external calls unless you explicitly use the --report-to flag to send results to an endpoint.