Give your coding agent visual feedback on React, Next.js, and Vue edits

An agent can change a heading and pass the type checker while leaving it cramped on mobile. I built Arguseye so the agent can inspect the rendered component before calling the edit done.

Disclosure: This article was written with AI assistance using Arguseye’s source, product documentation, and recorded component captures. I’m the maker of Arguseye.

Arguseye brings that inspection into the editing loop. It renders an existing React, browser-renderable Next.js, or Vue 3 component using the project’s own source and installed packages. You can use it through MCP, the CLI, or a VS Code preview panel without starting the application or authoring a story.

Here is the workflow for one edit, including what to do when application context is missing.

What a coding agent needs to see

A screenshot helps with spacing, clipping, and typography. An agent also needs to know which inputs produced it and whether the render is trustworthy enough to compare.

Arguseye returns a cropped PNG and accessibility text together with the target, viewport, resolved props, unresolved inputs, source fingerprint, timings, warnings, and errors: string[]. A render can succeed while remaining incomplete. For example, the component may depend on a runtime value or provider that the isolated preview cannot reconstruct.

That distinction should affect the agent’s next action. It might supply an explicit prop, choose another usage, or explain why the full application still needs checking.

The screenshot shows CSCA.ai’s existing HeroSection.tsx. Its preview uses the project’s assets and matching cached Next font faces. The public gallery also includes the project’s feature cards and exam-information grid.

1. Install in the project you want to inspect

You need Node.js 22 or later, the project’s dependencies installed, and Chromium or Google Chrome.

For Claude Code:

npx @ayushniroula/arguseye install claude

For Codex:

npx @ayushniroula/arguseye install codex

Restart the client after installation. The installer adds the MCP configuration and bundled agent skill. Other supported installation targets include Cursor, Gemini CLI, Windsurf, VS Code Copilot, and Antigravity. The installation guide lists their configuration paths.

To use the visual editor panel, install Arguseye from the VS Code Marketplace, open a .tsx, .jsx, or .vue file, and run Arguseye: Preview Component.

2. Choose a component and its inputs

Ask the agent to discover how the component is used before inventing props:

Find the usages of this component. Choose one with resolved literal props, render it at a mobile width, and report any unresolved inputs or provider warnings.

list_usages discovers literal props from JSX and Vue templates, including supported aliases and local barrel re-exports. Runtime expressions remain unresolved. render_component can then use a discovered usage, while render_usages provides paginated isolated previews with up to 12 renders per batch.

These previews answer how a component renders with discovered inputs. They do not prove a whole page, authenticated session, or backend workflow works.

3. Capture a baseline before the edit

A successful render returns a captureId. Keep that ID and ask the agent to compare against it after editing:

Save this capture ID. After changing the heading, compare against this baseline using the same export, resolved props, and viewport. Show the images, accessibility changes, new errors, and completeness status.

The MCP comparison uses render_diff({ baselineId }). A session retains the latest 64 captures. If the baseline has expired, make a new capture before continuing.

For a CLI workflow across separate commands, save the capture in a directory. The following paths and export name are examples; substitute your own component:

npx @ayushniroula/arguseye shot src/Card.tsx --export Card \
  --capture-dir .arguseye/baseline \
  --out .arguseye/before.png --json

Edit the source, then compare:

npx @ayushniroula/arguseye diff \
  --baseline .arguseye/baseline \
  --out .arguseye/comparison --json

The output directory contains before, after, and highlighted diff images plus JSON evidence.

4. Review the comparison

Comparisons report unchanged, changed, or incomplete. Review the images alongside dimension changes, accessibility snapshot changes, and new or resolved errors.

In this recorded WiseAdmit comparison, the heading changes from “AI ecosystem” to “An AI ecosystem.” The capture records 2,904 changed pixels and an incomplete status because Next.js server/font behavior in CurrencyProvider requires the application runtime. The warning remains visible even though the component rendered.

You still have to judge the heading and check the intended layout. The pixel count points to a difference; it cannot establish that the page’s interactions work.

5. Keep the human preview close to the source

In VS Code, choose an export or discovered usage and inspect the component at mobile, tablet, or desktop widths. Ordinary live edits can preserve interactive state; verification renders start from fresh component state. Vue template and style updates can preserve state, while script changes remount and report the reset.

The panel and agent tools share the rendering engine. That helps the developer inspect the same kind of evidence the agent receives.

Boundaries worth keeping in the workflow

Browser rendering does not reproduce every framework feature. Next.js server execution, Nuxt application context, and arbitrary backend or authentication state still need the application runtime. Statically reconstructable styles and layout context are supported; missing context remains explicit.

For Next Google fonts, matching assets from an existing .next/static build can be reused. If those assets are absent, the preview reports unresolved font context. It does not silently turn a fallback font into a complete result.

Rendering runs locally, but the component executes real project code and may make its own network requests. Use projects you trust and inspect their behavior as you would when running them normally.

Use the comparison to review the component edit. Run the application tests when the change affects a complete page or user journey.

Get started with Arguseye · Real screenshot gallery · GitHub