Getting Started with SmartUI MCP Server

The SmartUI MCP Server allows you to debug visual regressions using SmartUI comparison runs, returning natural-language insights such as human-like summaries, visual change detection, and root cause analysis. It is built on Model Context Protocol (MCP) and connects to the TestMu AI SmartUI infrastructure via comparisonId.

How Does It Work?

This MCP server processes SmartUI visual comparison data by calling specific analysis tools with a comparisonId. Each tool simulates a different debugging layer—pixel diff, layout, DOM structure, and human perception.

The server fetches the visual assets (screenshots, DOM snapshots, metadata) and returns natural-language outputs such as:

"The CTA button lost color contrast, impacting accessibility."
"Header layout shifted left due to padding changes."

Key Benefits of SmartUI MCP Server

Here are the key benefits of using the SmartUI MCP Server:

No Manual Debugging: Automatically detects visual regressions and UI layout shifts from screenshots and DOM changes.
Human-Like Interpretation: Simulates how a real user perceives visual changes using cognitive and Gestalt principles.
Context-Aware Fixes: Suggests accurate UI fixes based on visual evidence (React, HTML, CSS).
Rapid RCA: Identifies exact UI elements responsible for changes and provides the root cause in plain language.
Layered Visual Analysis: Run independent or combined analysis: pixel-level, layout, DOM structure, and perceptual.
MCP-Native Integration: Seamlessly works with TestMu AI’s MCP-enabled environments and SmartUI workflows.
Developer-Ready Summaries: Outputs are designed for frontend teams—easy to read, act, and commit to code.

Supported Tools

The following tools return human-readable summaries and require only a comparisonId as input.

getSmartUIResources:

Fetches all assets for a SmartUI visual comparison run.

Input:

{
  "comparisonId": "string"
}

Output:

A human-friendly description of which assets were found (e.g., screenshots, DOM JSONs), and suggestions if any are missing.

summarizePixelDiff:

Summarizes raw pixel differences between baseline and current screenshots.

Example Output:

"Significant pixel differences were detected in the hero banner and footer. These likely stem from background color changes and text shifts."

summarizeLayoutDiff:

Identifies spacing, alignment, and size-related layout issues.

Example Output:

"The login button has moved 16px downward compared to the baseline. This affects the visual balance of the form."

summarizeDomDiff:

Describes what changed in the DOM structure and attributes.

Example Output:

"The aria-label for the submit button has been removed. The button also now includes an extra disabled attribute."

analyzeHumanDiff:

Simulates how a human eye would perceive the change. Focuses on color, emphasis, and Gestalt principles.

Example Output:

"The pricing table appears visually heavier due to a font weight increase. This disrupts the balance between sections."

analyzeSmartUIRun:

Runs a multi-layer analysis across pixel, layout, DOM, and perception layers. Best used when you want a full debugging summary.

Example Output:

"The 'Subscribe' CTA lost its background color and dropped in emphasis. This is likely due to a CSS override on .cta-btn. Padding changes have also affected alignment. Suggest restoring background and resetting layout values."