{
  "id": "mcp_3d3fd4e278b1",
  "slug": "visual-sentinel-mcp",
  "asset_type": "mcp",
  "name": "Visual Sentinel MCP — Automated UI Pixel-Diff & Layout QA Server",
  "tagline": "Capture multi-viewport Playwright screenshots, run perceptual pixel-diff comparisons against baseline snapshots, and detect CSS overflow or dark-mode contr",
  "description_md": "### Server Architecture & Capability Summary\n**Visual Sentinel MCP — Automated UI Pixel-Diff & Layout QA Server** (`visual-sentinel-mcp`) is a verified **STDIO** Model Context Protocol (MCP) server curated with **@iraiansar** for Grok Bot, Claude Code, and Cursor.\n\nCapture multi-viewport Playwright screenshots, run perceptual pixel-diff comparisons against baseline snapshots, and detect CSS overflow or dark-mode contrast regressions.\n\n### 1-Click CLI Installation\nRun the command below to register `visual-sentinel-mcp` in Claude Code or your MCP client:\n```bash\nclaude mcp add visual-sentinel -- npx -y visual-sentinel-mcp@latest\n```\n\n### Standard `mcpServers` JSON Configuration (`.cursor/mcp.json` / `claude_desktop_config.json`)\n```json\n{\n  \"mcpServers\": {\n    \"visual-sentinel-mcp\": {\n      \"command\": \"npx\",\n      \"args\": [\n        \"-y\",\n        \"visual-sentinel-mcp@latest\"\n      ],\n      \"env\": {\n        \"VISUAL_SENTINEL_DIR\": \"./.visual-sentinel\"\n      }\n    }\n  }\n}\n```\n\n### Exposed MCP Tools\n- `capture_viewport_baseline` — Deterministic JSON-RPC 2.0 tool exposed by `visual-sentinel-mcp`.\n- `compare_visual_diff` — Deterministic JSON-RPC 2.0 tool exposed by `visual-sentinel-mcp`.\n- `detect_horizontal_overflow` — Deterministic JSON-RPC 2.0 tool exposed by `visual-sentinel-mcp`.\n- `audit_wcag_contrast` — Deterministic JSON-RPC 2.0 tool exposed by `visual-sentinel-mcp`.\n\n### Authentication & Environment Variables\n- **Transport Protocol:** `stdio`\n- **Auth Mechanism:** `none`\n- `VISUAL_SENTINEL_DIR`: `./.visual-sentinel`\n- **Documentation / Source:** [https://github.com/iraiansar/visual-sentinel](https://github.com/iraiansar/visual-sentinel)\n",
  "primary_category": "engineering",
  "categories_json": "[\"engineering\", \"mcp\"]",
  "tags_json": "[\"visual-sentinel-mcp\", \"stdio\", \"engineering\", \"mcp-server\", \"capture-viewport-baseline\", \"compare-visual-diff\"]",
  "compatible_agents_json": "[\"grok-bot\", \"claude-code\", \"cursor\"]",
  "integrations_json": "[\"Visual Sentinel MCP\", \"MCP Client\"]",
  "includes_json": "[]",
  "safety_level": "Read-Only / Ask-First",
  "safety_summary": "Verified capability blueprint by @iraiansar.",
  "share_url": "",
  "deep_link_uri": "",
  "mcp_endpoint": "",
  "mcp_transport": "stdio",
  "install_command": "claude mcp add visual-sentinel -- npx -y visual-sentinel-mcp@latest",
  "skill_markdown": "",
  "starter_prompt": "Connect to the Visual Sentinel MCP — Automated UI Pixel-Diff & Layout QA Server (visual-sentinel-mcp) MCP server using `claude mcp add visual-sentinel -- npx -y visual-sentinel-mcp@latest`. First run a read-only discovery check invoking `capture_viewport_baseline` to verify connectivity and credentials, then summarize the structured response and ask before executing any state-modifying tool calls.",
  "project_url": "https://github.com/iraiansar/visual-sentinel",
  "repo_url": "https://github.com/iraiansar/visual-sentinel",
  "creator_handle": "iraiansar",
  "creator_name": "Irai Ansar (@iraiansar)",
  "creator_avatar_url": null,
  "creator_url": "https://x.com/iraiansar",
  "creator_platform": "x",
  "creator_cal_url": null,
  "claimed_by_user_id": null,
  "scouted_by_handle": null,
  "source_url": "https://github.com/iraiansar/visual-sentinel",
  "source_tweet_id": null,
  "source_origin": "certified_builder",
  "source_posted_at": null,
  "x_likes": 520,
  "x_bookmarks": 1084,
  "x_retweets": 271,
  "x_views": 7280,
  "human_upvotes": 520,
  "human_installs": 520,
  "bot_pulls": 1084,
  "pulse_score": 89,
  "gravity_rank_score": 3973.5,
  "is_featured": 1,
  "is_verified": 1,
  "is_sponsored": 0,
  "sponsor_tier": "verified_claimed_299",
  "sponsor_label": "",
  "sponsor_cta_url": "",
  "sponsor_expires_at": null,
  "commercial_intent_score": 0,
  "status": "active",
  "created_at": "2026-10-24T20:00:00Z",
  "updated_at": "2026-10-24T20:00:00Z",
  "verified_at": null,
  "primitive": "mcp",
  "title": "Visual Sentinel MCP — Automated UI Pixel-Diff & Layout QA Server",
  "description": "Capture multi-viewport Playwright screenshots, run perceptual pixel-diff comparisons against baseline snapshots, and detect CSS overflow or dark-mode contr",
  "category": "engineering",
  "tags": "[\"visual-sentinel-mcp\", \"stdio\", \"engineering\", \"mcp-server\", \"capture-viewport-baseline\", \"compare-visual-diff\"]",
  "agent_compatibility": "[\"grok-bot\", \"claude-code\", \"cursor\"]",
  "author_handle": "iraiansar",
  "author_name": "Irai Ansar (@iraiansar)",
  "author_avatar": null,
  "source_tweet_url": "https://github.com/iraiansar/visual-sentinel",
  "github_url": "https://github.com/iraiansar/visual-sentinel",
  "external_url": "https://github.com/iraiansar/visual-sentinel",
  "upvotes_count": 520,
  "installs_count": 520
}