refract

valternunez/refract

★ 0 stars TypeScript Browser/Web Updated today

Agent-first responsive screenshots — render a URL at N viewports, get images + structured findings. MCP server + CLI + Node library on Playwright.

View on GitHub → Try with Claude — $10 free →

Quick Install

Copy the config for your editor. Some servers may need additional setup — check the README.

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "refract": {
      "command": "npx",
      "args": [
        "-y",
        "valternunez/refract"
      ]
    }
  }
}

README Excerpt

<p align="center"> <img src="docs/icon.svg" width="128" alt="Refract" /> </p> Agent-first responsive screenshots. Give a coding agent (or yourself) one primitive: *render this URL at N viewports, return the images, and tell me what visually broke.* Built on Playwright, shipped as an **MCP server + CLI + Node

Tools (6)

curlelement_clippedhorizontal_overflowimage_no_alttap_target_smalltext_overflow

Topics

agentchromiumclimcpmodel-context-protocolplaywrightresponsive-designscreenshotstypescriptvisual-testing

refract

Quick Install

README Excerpt

Tools (6)

Topics

Related Browser/Web Servers