What is Visionaire Engine MCP?
Visionaire Engine is an MCP server that reads the live page and hands your AI coding agent the exact CSS rule, file and line that win the cascade, and why each rival lost. One solve gateway fronts 26 engine tools. It requires Node 22.12 or newer and Chrome or Chromium.
Visionaire reads the live page and hands the LLM the exact rule, file and line behind a visual bug. Everything is computed deterministically from the Chrome DevTools Protocol plus closed rulesets, with zero AI inside the server.
It answers three questions: which CSS rule wins the cascade for a property and why the others lost, which file and line the winner lives in, and why an element is invisible, misaligned or the wrong size.
The two tools your agent needs
In a session the agent needs two tools. connect launches Chrome, or uses your own browser through the extension. solve takes an intent such as why the hero CTA is blue instead of white and routes it to a diagnostic plan.
solve answers verdict first: the winning rule with file and line, why each rival lost, visibility and overlap causes, and one NEXT step. The element can be a uid, a selector or visible text.
Engine tools behind solve
- Grounding:
page_snapshot,page_origins,find_elements,node_at_pointandpick_elementfind the right element. - Explanation:
inspect_element,explain_styles,inspect_ancestors,get_listenersandexplain_animationsgive the why. - Pixel checks:
measure_element,pick_colorandread_textmeasure what is actually painted. - Fixing:
inject_css,style_diffandannotated_screenshottrial a fix on the page without touching source. - Verification:
assert_visual,visual_diff,impact_preview,diagnose,responsive_sweepandcapture_proofprove a fix.
Use your own browser
The Visionaire Bridge extension inspects pages in the browser you already use, such as logged in dashboards and staging behind SSO, with no remote debugging port. Chrome family browsers get the full engine and Firefox gets a lite engine.
The agent can only touch tabs it opened or you shared, on sites you approved. The localhost and *.test hosts are pre approved, and any other site asks you first.
Who Visionaire Engine MCP is for
Best for
- Fixing a visual bug when you would otherwise screenshot it and explain it to the LLM.
- Finding which rule wins the cascade and which file and line it lives in.
- Checking claims such as equal heights, alignment and gaps with PASS or FAIL verdicts after an edit.
- WordPress sites, where answers point to the Site Editor or a theme file instead of a generated path.
Not for
- Linting a project for design problems across 12 weighted dimensions, which the UI UX Suite MCP covers.
- A CSS reference of container queries, OKLCH color, scroll driven animation and anchor positioning, which the modern-css skill covers.
- Running Dembrandt against a live URL to return colors, typography, spacing, components and W3C design tokens, which the extract-design skill covers.
- Drawing UI on the Figma canvas with JavaScript and reading designs back as data, which the Figma UI MCP covers.
Connect Visionaire Engine MCP: Live CSS Cascade Inspector to your AI client
claude mcp add visionaire -- npx -y visionaire-engineCheck the requirements
Install Node 22.12 or newer and Chrome or Chromium.
Register the server
Run the command above from your project's root directory, so the agent has both the running site and its source on disk.
Connect to a page
Ask the agent to call
connectwith your site URL, or with mode extension to use your own browser.Ask a question
Call
solvewith an intent and an element, for example.hero .btn, and read the verdict and the NEXT step.
Endpoints and ports
Node 22.12 or newerChrome or Chromium must also be installedconnect with mode extensionReturns a one time pairing code to paste into the Visionaire popup onceWhat you can do with it
- Cascade winner with file and line
explain_stylesnames the winning rule for each property, the rules that lost with the decisive loss reason, and an edit pointer for each. - WordPress aware answersWhere a rule comes from Global Styles, the pointer says Site Editor, Styles instead of a path to a generated file.
- Blast radius before edits
impact_previewreports who else matches a shared selector and runs a sandboxed dry run of which elements would change. - Live fix loop
inject_csstrials a fix on the page, shows what changed, and lets you write the source once and revert. - Visual assertions
assert_visualcovers equal heights, alignment, gaps, clipping, colors and z-order, and named suites can be re-run after every edit. - Responsive verdicts
responsive_sweepcatches a fix that works on desktop but is still broken on mobile in one call. - Interaction timelines
record_interactionturns one interaction into a source attributed timeline of handlers, mutations, cancelled transitions and layout shifts. - Verify after edit harness
npx visionaire-engine init-harnesswires the included hooks or a Cursor rule so a turn cannot end claiming a fix without a verification pass on record.
Tools it exposes
connect
Launches Chrome, attaches, or uses your own browser through the extension.
solve
The single gateway over 26 engine tools. It routes an intent to a diagnostic plan and answers verdict first, with one NEXT step.
explain_styles
Returns the cascade winner and loser per property with file and line, each winner's blast radius and a scoped fix selector.
inspect_element
Returns the box model, computed values and a visibility verdict for an element.
find_elements
Searches deterministically by text, selector, role or screen region.
inject_css
Trials declarations on an element or a page wide rule without touching source, so you can see what changed and revert.
assert_visual
States rendered geometry claims across 17 assertion types and returns PASS or FAIL with measured pixels and offending uids.
responsive_sweep
Returns one verification payload across many viewports as a per viewport verdict matrix.
capture_proof
Bundles before and after annotated screenshots and suite verdicts, with a verdict delta.
Frequently asked questions
What is Visionaire Engine MCP?
It is a deterministic MCP server that reads the live page and tells your AI coding agent which CSS rule wins, in which file and on which line, and why. One solve gateway fronts 26 engine tools, and it computes everything from the Chrome DevTools Protocol with zero AI inside.
How do I install Visionaire Engine MCP?
Run claude mcp add visionaire -- npx -y visionaire-engine from your project's root directory. It needs Node 22.12 or newer and Chrome or Chromium installed. Running from the project root lets the agent cross reference the running site with its source on disk.
Which two tools does the agent need?
The agent needs connect and solve. Connect launches Chrome, or uses your own browser with mode extension. Solve takes an intent and a context element, runs a diagnostic plan and answers with the winning rule, why each rival lost, visibility and overlap causes, and one NEXT step.
Can it inspect my own logged in browser?
Yes, through the Visionaire Bridge extension for Chrome family browsers and Firefox. The first connect with mode extension returns a one time pairing code to paste into the popup. The agent only touches tabs it opened or you shared, on sites you approved.
What is the difference between Chrome and Firefox support?
Chrome family browsers run the full engine through chrome.debugger. Firefox runs a lite engine through content scripts, which has no listeners, interactions, viewport emulation or inject_css, because Firefox extensions have no DevTools Protocol. Cascade winner, visibility and screenshots work in both.
How does it verify a fix?
assert_visual states a rendered geometry claim, such as equal heights, and returns PASS or FAIL with the measured pixels and the offending uids. Named suites re-run after each edit, diagnose ranks culprits for any FAIL, and capture_proof bundles before and after evidence.
Is it safe on untrusted pages?
It treats page content as hostile. Page derived strings such as element text, class names and ids are sanitized, collapsed to one line and length capped. Every tool call runs under a watchdog, and page alert, confirm and prompt dialogs are auto dismissed. In your own browser the bridge is loopback only, cookie and storage protocol methods are blocked, and evaluate is off.