Log inSubmit server
Visionaire Engine logo

Visionaire Engine

by mi60dev

Diagnoses live browser rendering issues with CSS cascade attribution, interaction tracing, visual audits, and trial fixes over MCP.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Visionaire Engine

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "mi60dev-visionaire-engine": {
      "command": "npx",
      "args": [
        "-y",
        "visionaire-engine"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Install not yet sandbox-tested— the server itself is confirmed live (we called its tools/list endpoint). The stdio install command is a separate, ongoing check.

Overview

mi60dev/visionaire-engine MCP server inspects live pages in Chrome through the Chrome DevTools Protocol and reports deterministic rendering evidence. It identifies winning and losing CSS declarations with file and line attribution, traces interactions, measures layout, and verifies visual changes. Connect it to a local or logged-in browser when an agent needs to debug CSS, responsive behavior, WordPress styling, or visual regressions from the rendered page rather than source code alone. Trial CSS patches stay in the live page and can be checked with pixel and assertion-based tools before source files are edited.

Use cases

  • Trace the winning CSS rule for a visual bug
  • Test a scoped CSS fix before editing source
  • Inspect authenticated WordPress or Elementor pages
  • Verify responsive layout changes across viewports
  • Record interaction and animation failures

Key features

  • CSS cascade attribution with file and line
  • WordPress and Elementor origin detection
  • Live CSS trials and style comparisons
  • Deterministic visual assertions and responsive sweeps
  • Interaction timelines with handler and layout evidence
  • Pixel, alignment, geometry, and contrast inspection

Tools28

What Visionaire Engine lets your agent do. Expand a tool for its parameters.

Verified live~11.4k tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked 1d ago

Recent health check succeeded.

21/22 checks healthy over the last 90d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 5d ago via OSV.dev · visionaire-engine (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars5Stargazers on the source repository.
npm downloads237Package downloads in the last 30 days.
Last commit2d agoMost recent push to the default branch.
Tools exposed28Callable tools this server registers over MCP.
Directory activity2 viewsConfig copies, upvotes, and views on AllMCPs.

How Visionaire Engine works

What mi60dev/visionaire-engine does

mi60dev/visionaire-engine MCP server gives an AI agent structured access to a live browser render for front-end diagnosis. It connects to locally launched Chrome or to an existing browser session, then exposes page snapshots, element lookup, computed-style inspection, CSS cascade analysis, interaction tracing, geometry measurement, and visual verification.

The main diagnostic use case is determining why a rendered element looks wrong. explain_styles reports the declaration that wins for a property, the declarations that lost, and the reason for each loss, such as specificity, source order, !important, inline styling, or a cascade layer. Results can include file and line references, WordPress or Elementor origin information, the number of elements affected by a rule, and a selector scoped to the target element.

How it works

Call connect before using the other browser tools. The session can launch a local Chrome instance or attach to a browser URL such as http://127.0.0.1:9222, which is useful for authenticated pages. After connecting, use page_snapshot to obtain a uid-keyed view of the page. Those uids identify elements for inspection and become invalid after navigation or a fresh page state that changes the snapshot.

The engine computes results from browser state and the Chrome DevTools Protocol rather than using an internal AI model. page_origins inventories stylesheets and detects WordPress, themes, page builders, and CSS optimizers. inspect_element describes rendered dimensions and computed values, while inspect_ancestors finds constraints caused by containers, overflow, positioning, or stacking contexts. record_interaction adds time-ordered handlers, DOM changes, animations, layout shifts, and console errors to a click or hover investigation.

Setup and configuration

The documented runtime requires Node.js 20 or newer and an installed Chrome or Chromium browser. The npm quick start registers the server with Claude Code using npx -y visionaire-engine. A local checkout can instead be built with npm install and npm run build, then started from dist/index.js.

Run the server from the project root when possible so the agent can compare the live page with local source files. For a browser already holding an authenticated session, use the documented extension mode and connect through the Visionaire Bridge extension. The README also points to client-specific configuration for Claude Desktop, Cursor, GitHub Copilot, and other clients.

Tools and capabilities

  • Find elements by text, selector, ARIA role, or screen region, and map screenshot coordinates back to elements.
  • Inspect CSS winners, losers, source locations, origins, blast radius, and scoped-fix selectors.
  • Trial live CSS with inject_css, compare changes with style_diff, and verify rendered claims with assert_visual.
  • Diagnose clipping, overflow, visibility, overlap, sizing, alignment, spacing, contrast, and responsive behavior.
  • Capture screenshots, run pixel diffs, inspect listeners and animations, and record interaction timelines.
  • Re-run named visual assertions across default or supplied viewport widths with responsive_sweep.

Limitations and notes

CSS injected with inject_css is temporary and disappears on navigation or when reverted; it does not modify source files. Visual assertions measure the current page, viewport, and state, while impact_preview only sees elements on the open page at the current viewport. Pixel diffs can vary with the rendering environment, so geometry assertions are preferred for stable layout checks.

check_alignment remains available but is deprecated in favor of assert_visual. evaluate can run agent-authored JavaScript, but it is intended as a fallback when a purpose-built tool does not cover the task. A live browser session is required for browser operations, and a fresh snapshot is needed after navigation because earlier element uids may be stale.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Visionaire Engine

mi60dev/visionaire-engine is an MCP server that connects AI agents to a live Chrome browser through the Chrome DevTools Protocol. Its main tools inspect rendered elements, explain winning CSS rules with file and line attribution, trace interactions, trial CSS fixes, measure layout, and verify visual assertions.

Install it with Node.js 20 or newer and Chrome or Chromium, then register it with Claude Code using `claude mcp add visionaire -- npx -y visionaire-engine`. A cloned checkout can be built with `npm install` and `npm run build`, then started from `dist/index.js`.

Use the client-specific setup documented in the repository, then connect the server to a local Chrome session or an existing browser session.

Yes, it can attach to a user's existing logged-in browser through the browser URL or the Visionaire Bridge extension mode. This supports inspecting pages such as authenticated dashboards or WordPress administration screens without loading them in a separate unauthenticated session.

Related MCP servers

All in Browser Automation All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewVisionaire Engine AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/mi60dev-visionaire-engine?style=directory)](https://allmcps.com/mcp/mi60dev-visionaire-engine)
HTML Embed
<a href="https://allmcps.com/mcp/mi60dev-visionaire-engine"><img src="https://allmcps.com/api/badge/mi60dev-visionaire-engine?style=directory" alt="Visionaire Engine on AllMCPs" /></a>