Chrome MCP server for AI coding agents

Connect Claude Code, Cursor, Windsurf, Cline or any MCP client to Screen Ruler, and your agent can read, audit and edit the real page in your browser instead of guessing from source code.

What your agent can do

The Screen Ruler MCP server is a small local bridge between your AI client and the Screen Ruler extension. Once connected, the agent gets 47 tools that work on any tab where Screen Ruler is active:

• Inspect elements. Query the page with CSS selectors, walk the element tree, read computed styles, bounding boxes and flex or grid layout, and get whatever element you have selected, so you can say "fix this" and it knows what you mean.
• Read the cascade. List every CSS rule that matches an element, sorted by specificity, calculate the specificity of a selector, list the page's CSS custom properties, and fetch the text of cross-origin stylesheets.
• Edit CSS like DevTools. Change real rules so every matching element updates, add new rules inside @media queries, retarget selectors, edit inline styles, and force :hover or :focus to preview states.
• Edit HTML and text. Replace text or inner HTML, insert markup, duplicate or delete elements, and swap Tailwind classes. Inserted HTML is sanitised, so scripts, iframes, forms and inline handlers are stripped.
• Test responsive layouts. Enter responsive mode, set up several viewports side by side, build one viewport per breakpoint the page declares, zoom the canvas and resize frames.
• See the page. Take a screenshot of the viewport that vision-capable models can look at.
• Audit the page. Pull WCAG contrast issues, SEO issues, meta tags, page weight, typography, colors, assets and the technologies the site uses.
• Track and undo. List every edit made on the tab, revert a single CSS change or revert everything.

How to set it up

1. Install Node.js 18 or newer if you do not have it.
2. Add the server to your AI client. In Claude Code, run claude mcp add screen-ruler -- npx -y @screen-ruler/mcp once, then restart Claude Code. In Cursor, Windsurf, Cline, Continue or another client, add a server named screen-ruler with the command npx and the arguments -y @screen-ruler/mcp to its MCP config file.
3. Open Screen Ruler's Settings, find MCP Server and click Connect.
4. Activate Screen Ruler on the tab you want to work on, then ask your agent something like "Use screen-ruler to list my active tabs".

You can also start from the MCP status dot in Screen Ruler's control bar, labelled Connect Agent. It opens a panel with a prompt you can copy and paste into your agent so it adds the server itself. Once an agent is connected, the dot turns green and the same panel shows which agent is attached, with a Disconnect button. Full details are in the MCP setup guide.

Things to ask it

• "Audit this page's color contrast and fix all the issues."
• "Make all the buttons on this page consistent."
• "How does my site look on a tablet?"
• "Redesign this element's hover state."
• "Which colors on this page aren't using the design tokens?"

A good agent will check the page's technologies and custom properties first, then write changes that use your existing variables and match your framework.

How it stays safe and reviewable

• Only tabs you choose. The agent can only see tabs where you have turned Screen Ruler on. Other open tabs are invisible to it.
• Everything runs locally. The server runs on your machine and talks to the extension over a local connection. It rejects connections from web pages, and the bridge sends no page content to any outside service. Your AI client may send what it receives to its own provider, under that client's own policy.
• Edits are tracked. Every change the agent makes appears in the side panel's Changes tab, just like a manual edit, with a diff, undo and copy as CSS. Nothing is written to your source files until you or your agent copy the changes across.

Limits

Changes live in the browser tab. Reloading the page or switching responsive mode on or off discards edits that have not been saved, so ask the agent to review its edits first. Screen Ruler cannot run on chrome:// pages, other extensions or the Chrome Web Store. If you reload the extension, activate it on the tab again before the agent can use that tab.

Who it is for

It is built for developers and designers who already use an AI coding agent and are tired of describing what they see on screen. Instead of pasting screenshots and CSS into a chat, let the agent read the page directly, try changes live where you can watch them, then carry the final CSS back to your code. It pairs with the live CSS editor and change tracking, which use the same edit engine.

The MCP server package is open source under the MIT license. Connecting it to the extension is a Studio feature, and every install starts with a free trial with everything unlocked, including MCP.

Common questions

How do I give Claude Code access to my browser?

Run claude mcp add screen-ruler -- npx -y @screen-ruler/mcp, restart Claude Code, then click Connect under MCP Server in Screen Ruler's Settings. Activate Screen Ruler on a tab and Claude Code can inspect and edit that page.

Which AI clients does it work with?

Any client that supports MCP over stdio, including Claude Code, Cursor, Windsurf, Cline and Continue. Each one needs Node.js 18 or newer to run the server.

How is this different from a browser automation MCP server?

Automation servers drive the browser: they click, type and navigate. Screen Ruler's tools are built for front-end work, such as reading matched CSS rules and specificity, editing real stylesheet rules, testing several viewports at once, and auditing contrast, SEO and page weight, with every edit tracked and reversible.

Does the agent change my source code?

No. The agent edits the live page in your browser, and every change appears in the Changes tab with a diff. Your files only change when you, or your agent in your editor, apply the final CSS to the codebase.

Is the MCP server free?

The npm package is open source under the MIT license, but connecting it to Screen Ruler requires the Studio plan. Every install starts with a free trial with everything unlocked, so you can try it first.