Screen Ruler Screen Ruler
Add to Chrome

MCP Server

Connect any MCP-compatible AI coding agent (Claude Code, Cursor, Windsurf, Cline, Continue) to Screen Ruler. The agent can then inspect, edit, and validate any page running in the browser, all through the extension.

What It Does

Once the bridge is connected, an AI coding agent can:

  • Read element properties: computed CSS, bounding rect, classes, attributes, accessibility tree, matched stylesheet rules.
  • Edit CSS live, including state forcing (:hover, :focus) and media-query-scoped edits.
  • Modify HTML and text directly on the page.
  • Add, remove, and rewrite Tailwind utility classes.
  • Enter responsive mode, switch viewport sizes, detect breakpoints.
  • Capture element screenshots for the agent to reason about visually.

Every change made through the agent is tracked in the side panel's Changes tab, just like a manual edit. Diffs, undo, and copy-as-CSS all work the same.

Requirements

  • Screen Ruler with a Studio license.
  • An MCP-compatible AI client (Claude Code, Cursor, Windsurf, Cline, Continue, or any client that speaks MCP over stdio).
  • Node.js 18 or newer installed on the machine.

Install

The bridge is published on npm as @screen-ruler/mcp. Setup happens in the AI client's configuration, not in the extension.

Claude Code

Run this once in any terminal:

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

Then restart Claude Code.

Cursor, Windsurf, Cline, Continue, others

Add the following entry to the client's MCP config file (location varies by client, but each documents where its mcp.json or equivalent lives):

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

Using It

Open any page in Chrome, then turn Screen Ruler on for that tab. In the AI client, ask the agent to do something with the page:

Use screen-ruler to find the H1 on this page and change its color to rebeccapurple.
Use screen-ruler to take a screenshot of the hero section and tell me what could be improved.

The agent only sees tabs where Screen Ruler is currently active. Tabs without the extension turned on are invisible to it, even if they are open in the same browser.

Only one AI client can drive Screen Ruler at a time. Starting a second client takes control away from the first.

Privacy

The MCP server runs locally and bridges the AI client to the extension over a localhost WebSocket. No page content or browser data is sent to any external service by the bridge itself. The AI client may send what it receives to its own backend; that side is governed by the AI client's own privacy policy.