Screen Ruler MCP Server

Drive Screen Ruler from any MCP-compatible AI coding agent (Claude Code, Cursor, Windsurf, Cline, Continue, and more).

What It Does

Connects an AI coding agent to the Screen Ruler Chrome extension, so the agent can:

• Inspect elements on any page (computed CSS, layout, classes, accessibility tree, matched rules)
• Edit real CSS rules (cascade-wide, DevTools style), inline styles, HTML, and text live in the browser
• Add new CSS rules, including inside @media and other at-rules
• Add, remove, and modify Tailwind classes
• Enter responsive mode, set up several viewports at once, and compare them
• Take element screenshots
• Track every edit as a rule-keyed CSS diff with per-change revert

Requirements

• Screen Ruler Chrome extension with a Studio license
• An MCP-compatible AI client
• Node.js 18+

Install

Claude Code

claude mcp add screen-ruler -- npx -y @screen-ruler/mcp

Cursor / Windsurf / Cline / Continue

Add to the MCP config file (location varies by client):

{
  "mcpServers": {
    "screen-ruler": {
      "command": "npx",
      "args": ["-y", "@screen-ruler/mcp"]
    }
  }
}

Usage

Open any page in Chrome with Screen Ruler active, then ask the agent to inspect or edit it:

Use screen-ruler to find the H1 on this page and change its color to rebeccapurple

Use screen-ruler to capture the hero section and tell me what could be improved

How It Works

The server runs locally and bridges the AI client to the Chrome extension via a localhost WebSocket (port 8731). No browser data ever leaves the machine.

Pricing

The MCP server is open source (MIT). Connecting to the extension requires a Screen Ruler Studio license. See pricing.

License

MIT