Glamour MCP server

Glamour

Glamour is a local-first visual compiler and debugging workspace for coding agents. It renders an existing web implementation in pinned Playwright Chromium, compares it to one or more references, attributes visual residuals to DOM/SVG/Canvas/WebGL objects, tests temporary changes, and exports browser-validated vector geometry. Glamour does not generate application source code.

Requirements

• Installed plugin: Node.js 22+ available to the agent host and network access on first use. The plugin downloads and caches its versioned runtime and Chromium automatically; users do not install Python, uv, pnpm, or a browser.
• Source development: Node.js 22+, pnpm 9.15.9, Python 3.12+, and uv.

Develop and verify from source

pnpm install
pnpm exec playwright install chromium
uv sync --project python/glamour_cv --group dev
pnpm format:check
pnpm lint
pnpm typecheck
pnpm test
pnpm build

pnpm format, pnpm lint, and pnpm test include Ruff formatting/lint and pytest for the Python worker.

Projects and immutable run artifacts are stored in .glamour/ under the current directory. Set GLAMOUR_HOME to choose another store. Reference coordinates are CSS viewport pixels; device scale factor remains separate. A viewport PNG must have bitmap dimensions equal to viewport × DPR. Full-page screenshots are retained as structural data; the pinned browser compare currently renders viewport captures.

Reference input

The minimum input is a lossless PNG plus exact viewport and DPR. For multi-state and responsive work, use a bundle directory with manifest.json and paths relative to it:

{
  "schemaVersion": "1",
  "name": "shop",
  "screenshots": [
    {
      "referenceId": "desktop",
      "path": "screenshots/desktop.png",
      "viewport": { "width": 1440, "height": 900, "deviceScaleFactor": 1 },
      "familyId": "home"
    },
    {
      "referenceId": "mobile",
      "path": "screenshots/mobile.png",
      "viewport": { "width": 390, "height": 844, "deviceScaleFactor": 1 },
      "familyId": "home"
    }
  ],
  "assets": [],
  "fonts": [],
  "textBlocks": [],
  "scene": [],
  "layout": [],
  "typography": [],
  "colors": [],
  "gradients": [],
  "effects": [],
  "geometry": [],
  "interactions": [],
  "responsiveMappings": [],
  "chartData": [],
  "crops": [],
  "uncertainties": []
}

Bundle fields retain provenance (exact, provided, measured, derived, estimated, unknown) and confidence. Scene nodes can store raw measurements separately from semantic interpretation so an estimated role cannot overwrite exact geometry. Explicit facts are surfaced by analyze; measured pixel palette, full-page bitmap/content dimensions, and captured browser geometry are distinguished from supplied facts. Multiple references are rendered independently. Responsive changes are observations; breakpoint behavior remains a hypothesis unless supplied explicitly. Crops, assets, font metadata, text blocks, layout relations, scene graph, states, interactions, geometry, and chart data are preserved in the versioned Reference IR.

Each screenshot may set its own targetUrl, actions, and videoTimeSeconds so state references are reproducible against the live implementation. When videoTimeSeconds is supplied, compare/override/optimization pause each video, seek to that time when it is in a browser-reported seekable range, and capture the frozen frame. If the media does not expose that time as seekable, Glamour keeps the current frame and reports the limitation instead of silently claiming the requested time was used. Without videoTimeSeconds, the current frame is paused with a nondeterminism warning. Actions run in order before readiness checks and capture. Supported actions are click, hover, focus, fill, press, selectOption, check, and uncheck; the same setup is replayed for overrides and optimization. For example:

Shortened. The full README is on GitHub.