Juxtapose

Integration · MCP

Visual feedback
as agent tools.

Juxtapose's local MCP server gives your coding agent capture, comparison, and review tools. It uses the same engine and baselines as the CLI.

Install and connect

Use Node.js 22.2 or later and install the CLI in your project. Download the capture browser once: 

npm install --save-dev @juxtapose/cli
npx -p @juxtapose/cli jux browser install

For Claude Code, register the local server:

claude mcp add jux -- npx -y -p @juxtapose/cli jux mcp

For Cursor or another client, use the client configuration reference. The agent needs access to the repository and running preview or built workbench.

Ask for a comparison, not a guess

Example agent prompt 
Capture the settings page before changing it.
Make the requested component edit, then capture it again.
Read the Juxtapose diff and inspect crops for unexplained changes.
Fix unintended differences and recapture against the same reference.
Tell me what changed. Do not approve a baseline without my instruction.

The agent chooses its code edits. Juxtapose provides measured changes for the next inspection; you review whether the result matches your intent.

Choose the tool for the job

  • snap and diff: capture a URL and compare rendered iterations.
  • run: capture selected stories from a Storybook or Ladle build.
  • handoff: get a failing story's evidence and a fix prompt.
  • check and explain: inspect review status and effective settings.
  • approve: approve explicit story IDs after review; the MCP tool has no approve-all.

Exact tool parameters are in the MCP reference. The shell workflow remains available if your agent does not support MCP.

Combine design context and runtime evidence

A design-tool MCP can provide the target's layout, tokens, or assets. Juxtapose captures the implemented result. Your agent can use both, but a passing runtime comparison does not certify fidelity to a design file.

Next: Figma MCP to implementation, Claude Design handoff, or the CLI capture/edit/diff loop.