visual-review-workbench
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@visual-review-workbenchOpen the checkout page and capture a screenshot for review."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Visual Review Workbench
A portable Agent Plugins 1.0.0 package for reviewing real frontend UI variants.
The plugin combines:
An Agent Skill that defines the visual-review workflow and comparison rules.
One MCP tool that opens, refreshes, verifies, captures, and closes review surfaces.
Dependency-free Node.js scripts that implement the review shell.
Package boundaries
This package contains only reusable review infrastructure. It intentionally excludes:
Product source code and product-specific review routes.
Screenshots, recordings, captured application state, and business fixtures.
Local usernames, absolute machine paths, browser profiles, credentials, and environment files.
Repository commits, worktrees, and generated review output.
Project-specific adapters are generated at runtime inside the project being reviewed. Generated review output belongs in a temporary or project-selected directory, never in this plugin package.
Related MCP server: UI Toolkit MCP Server
Components
visual-review-workbench/
├── plugin.json
├── mcp.json
├── skills/
│ └── review-frontend-variants/
│ ├── SKILL.md
│ ├── references/
│ └── scripts/
├── server/
│ └── index.mjs
└── scripts/The MCP server exposes one tool: visual_review_workbench.
Its action field supports open, refresh, verify, capture, and close. Route scaffolding, fixture capture, measurement, and recording remain internal scripts directed by the skill instead of expanding the public tool surface.
Browser-backed commands require Playwright to be resolvable from the target project or plugin runtime. Static generation and serving use only Node.js built-ins.
Validate
npm testTo add organization-specific deny terms to the portability audit:
PORTABILITY_DENY_TERMS="internal-product,example-user" npm run check:portableRuntime paths
The package never embeds installation paths. The client supplies PLUGIN_ROOT and PLUGIN_DATA according to the Agent Plugins specification. MCP subprocess state and server logs use PLUGIN_DATA; target-project paths are accepted only as runtime tool arguments.
This server cannot be deployed
Maintenance
Related MCP Connectors
MCP server for visual regression testing: triage a PR's UI diffs from your coding agent.
Developer utility MCP: screenshots, PDFs, OG, QR, link preview, JSON validate, ShipPack.
Capture screenshots, detect visual regressions between page versions, and analyze with AI.
UX-review and product-feedback MCP: annotated screenshots and reviews your AI agent can act on.
Related MCP Servers
- AlicenseNot gradedqualityAmaintenanceEnables AI assistants to capture screenshots, run visual diffs, accessibility audits, and batch sweep plans for web pages via MCP tools.11 npm2MIT
- AlicenseAqualityFmaintenanceComprehensive MCP server for end-to-end UI development, offering tools to generate components, manage design tokens, audit accessibility, autofix issues, inspect live pages, compare screenshots, and more across multiple frameworks.137 npmMIT
- AlicenseNot gradedqualityBmaintenanceMCP server for rendering responsive screenshots of URLs at multiple viewports. Enables agents to capture screenshots and detect visual issues like overflow, clipped elements, and missing alt text.MIT
- AlicenseNot gradedqualityBmaintenanceMCP-first UI/UX review layer for AI-generated frontends. Enables reviewing web pages via URL, capturing screenshots, extracting layout metrics, and generating structured repair plans for agents.22 npmApache 2.0