Skip to main content
Glama

vibeside_visual_diff

Compare a baseline image with the current page or DOM element to detect UI regressions, layout shifts, and pixel mismatches, with highlighted diff output.

Instructions

Compare visual diff between a baseline screenshot/image and the current page or DOM element. Detects UI regressions, layout shifts, pixel mismatch percentage, and diff bounding box with highlighted diff image.

Input Schema

NameRequiredDescriptionDefault
currentNoCurrent image as file path or base64. If omitted, captures active browser page or element.
baselineYesBaseline PNG image as file path or base64 string
fullPageNoWhether to capture full page if capturing current browser screenshot (default: false)
selectorNoCSS selector of DOM element to capture if current is omitted. If omitted, captures active viewport.
thresholdNoPer-pixel color delta tolerance (0.0 to 1.0, default: 0.1)
saveDiffPathNoOptional file path to save the highlighted diff PNG image
includeDiffImageNoWhether to generate base64 diff image with magenta highlights (default: true)

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv0.17.0

TDQS

B3.2/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full behavioral burden. It does disclose the outputs produced (pixel mismatch percentage, diff bounding box, highlighted diff image), which is useful. But it omits that omitting 'current' triggers a live browser/element capture and that saveDiffPath writes a file to disk — side-effect information an agent needs before invoking it.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two compact sentences with the core operation front-loaded and the detected-signal list second; little wasted text. The phrasing 'diff bounding box with highlighted diff image' is slightly compressed but still parses.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With no annotations, no output schema, and seven parameters, the description does enough to convey what comes back, which compensates for the missing output schema. It falls short on the browser-connection prerequisite, the file-write side effect, and differentiation from the sibling compare/diff tools.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so all seven parameters are already documented in the schema and 3 is the baseline. The description's phrase 'current page or DOM element' loosely maps to the current/selector parameters but adds no format, range, or interaction detail beyond what the schema supplies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

Names a specific verb (compare) and resource (visual diff) plus the operands (baseline image vs current page or DOM element), so the core purpose is unambiguous. However, it never distinguishes itself from the near-identical sibling vibeside_compare_visual_diff or from vibeside_perceptual_hash, leaving the agent to guess which visual-comparison tool to pick.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

There is no when-to-use guidance, no prerequisites (e.g. that a connected browser is needed when 'current' is omitted), and no mention of alternative tools. With two sibling tools addressing visual comparison, the absence of routing guidance is a real gap.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Deploy Server

Other Tools