# cssprobe-cli MCP server

> Allows AI agents to inspect runtime CSS, layout, and scroll behavior in a live browser using Playwright.

- Repository: https://github.com/mack-peng/cssprobe-cli
- Page: https://hostedmcp.org/servers/mack-peng/cssprobe-cli
- Transport: stdio
- Stars: 1
- License: MIT
- Latest version: 0.3.0

## Install

### Claude Code

```sh
claude mcp add cssprobe-cli -- npx -y cssprobe-cli
```

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

```json
{
  "mcpServers": {
    "cssprobe-cli": {
      "command": "npx",
      "args": [
        "-y",
        "cssprobe-cli"
      ]
    }
  }
}
```

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

```json
{
  "servers": {
    "cssprobe-cli": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "cssprobe-cli"
      ]
    }
  }
}
```

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

```json
{
  "mcpServers": {
    "cssprobe-cli": {
      "command": "npx",
      "args": [
        "-y",
        "cssprobe-cli"
      ]
    }
  }
}
```

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

```toml
[mcp_servers.cssprobe-cli]
command = "npx"
args = ["-y", "cssprobe-cli"]
```

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

```json
{
  "mcpServers": {
    "cssprobe-cli": {
      "command": "npx",
      "args": [
        "-y",
        "cssprobe-cli"
      ]
    }
  }
}
```

## FAQ

### What can cssprobe-cli do for an AI agent?

It provides an AI agent with the ability to inspect computed styles, metrics, overflow issues, and scroll chains in a real browser.

### How can I use this as an MCP server?

You can install it for MCP clients like Claude or Cursor using the 'cssprobe-cli mcp-install' command.

### Can I handle login-protected pages?

Yes, you can open a browser in headed mode to log in manually and then save the session state for future use.