fassi.dev
Back to projects
2026Under development

Squint MCP

An MCP server that cross-references what the browser reports (DOM/CSS) with what is actually rendered (pixels) to find visual issues, without needing baselines.

Repository

Problem

Code agents generate UI and validate it through the DOM or accessibility tree, which tell you what should appear, not what was actually painted. Cut-off text or poor contrast over an image go unnoticed.

Solution

Capture the stabilized page in a headless Chromium instance and analyze the pixels alongside DOM/CSS data, returning to the agent the problematic element and the evidence: computed styles, box model, sampled colors, and an image crop.

Result

Gives the agent visual evidence of the element it just built, so it can fix the UI before human review instead of after.

How it works

  1. 01The code agent calls a Squint tool passing the URL and a CSS selector
  2. 02Squint opens the page in a headless Chromium, with context isolated per call
  3. 03The page is stabilized: waits for fonts, resets animations and transitions, waits for the network to become idle
  4. 04A Capture is generated: DOM/CSS data plus the rendered pixels
  5. 05The pixels are analyzed: element crop and sampling of the colors actually painted
  6. 06The agent receives computed styles, box model, sampled colors and the crop as evidence

Built with

Python 3.12MCP SDK (FastMCP)PlaywrightChromium headlessPillowPydanticuvpytestPyrightRuffGitHub Actions