Preview your components.See what changed.

Render React, Next.js, Vue, Nuxt, Svelte, SvelteKit, Preact and Solid components from your project’s source. Get a screenshot for your agent or a live preview beside your code, using your styles and packages, without starting the app.

Install in your agent Install VS Code extension
AIEcosystem.tsx
"use client";

import { Box, Grid, Typography }
  from "@mui/material";
import Image from "next/image";

export default function AIEcosystem() {
  const router = useRouter();

  const accordionData = [
    { title: "Instantly match students" },
    { title: "AI-powered interviews" },
  ];
Source componentNext.js · MUI · Emotion
Component previewChromium
Actual render of the WiseAdmit home section, including the original theme, content and illustrated feature cards
Real app screenshot1280 × 1633
See what the code became.PNG · accessibility tree · errors

Your project’s packages. The versions you already use.

Preview real components.

Render the source with your project’s packages and styles. Inspect the screenshot, accessibility snapshot, warnings and errors before your next edit.

Render from source

React, Next.js, Vue, Nuxt, Svelte, SvelteKit, Preact and Solid components, inside the providers, plugins and layouts your app sets up. No separate stories or running application.

Your app, in the picture

Your packages, styles, assets and reconstructable layouts. Missing context stays visible.

Props from real usages

Find call sites and literal values. Preview up to 12 isolated variants per batch.

Compare the consequences

Capture a baseline. Inspect pixels, dimensions, accessibility and errors after an edit.

Evidence your agent can use

A cropped PNG, a readable accessibility snapshot, source fingerprint and explicit warnings.

A visual change is evidence for review. Arguseye reports incomplete inputs and context; it never declares a design automatically correct.

Choose your agent or VS Code.

One command configures your MCP client and, where supported, installs its agent skill. Then ask your agent to look at the component it just changed.

Prefer the editor? Open a component in VS Code, choose Preview Component, and keep the preview beside your code.

5 toolsDiscovery, rendering and verification
LocalRuns against your project

Install Arguseye.

Run from your project. Requires Node.js 22 or later.

npx @ayushniroula/arguseye install claude

Adds the project’s .mcp.json and a skill in ~/.claude/skills. Existing configuration is merged.

Read the installation guide

  1. Choose where you work

    Pick your agent above, or install the VS Code extension. Both use the same engine.

  2. Install and reconnect

    npx @ayushniroula/arguseye install claude

    Run from your project, then restart your agent. In VS Code, install the extension and open a component.

  3. Look at a component

    Ask your agent:

    “Render src/Card.tsx and show me any warnings.”

    Or run Preview Component in VS Code.

  4. Capture. Edit. Compare.

    Keep the render’s captureId, edit the component, then ask for render_diff. In the extension, use Capture Baseline and Compare Changes.

See the preview beside your code.

The VS Code extension gives you a human view of the same engine. Open a component, keep editing, and inspect the result without switching to a browser.

Install VS Code extension
Actual Arguseye extension in VS Code: source editor beside the rendered component, export and viewport selection, typed prop controls and baseline comparison buttons

Actual extension screenshot. Source, component preview and verification controls in one workspace. Inspect the full-size screenshot ↗ · See six real component screenshots ↗

Keep editing. Keep seeing.

Unsaved buffers update the preview. React refresh and Vue template or style edits preserve state, so you can stay in the flow.

Find the right view.

Choose an export, real usage or viewport. Adjust typed React props, scale the preview to fit, or inspect it at 1:1.

Compare before you finish.

Capture a baseline, make an edit, then compare changes in the shared renderer. See warnings and incomplete context alongside the result.

Open a component and run Preview Component, or press Ctrl + Alt + P. Extension installation details ↗

Preview your templates, too.

Arguseye 0.0.16 brings native template rendering to the same preview and comparison workflow. Choose a file, supply JSON data, and inspect the HTML through your project’s own engine.

Explore template previews ↗

Your engine. Your syntax.

Django and Jinja2 use Python. Handlebars, EJS, Pug and other Node engines use project packages. Composer and Bundler adapters cover standalone PHP and Ruby templates. Each has an explicit support boundary.

Data you can see and change.

Select an engine and named data profile in VS Code, or pass JSON context from your agent. Unsaved layouts and partials update the preview. Missing context and native errors remain visible.

The same before-and-after evidence.

Capture a baseline with its engine, resolved data and viewport. Compare an edit with matching inputs. Templates reset interactive state when their document changes; full server behavior still needs application tests.

Right-click a supported file in the editor, tab or Explorer and choose Preview Component. View the engine matrix and native adapter limits ↗

Watch an agent see what it built.

One button breaks on a phone. See how Arguseye reads the project, renders the component and hands the agent the evidence to fix it, in under a minute.

Download the video ↗Try it in your project ↗

Inspect the component and its usages.

Choose a component render, inspect its discovered usage inputs, or open the same source in the VS Code preview.

Actual Arguseye render of WiseAdmit’s home section, including its theme and all six feature cards; scroll this image to inspect the full component

Actual component render · AIEcosystem.tsx1280 × 1633 · React / Next.js · project styles

list_usages {
  "file": "src/page-components/home/components/AIEcosystem.tsx"
}

call site    (main)/page.tsx
props        none — the component takes no props
ancestors    (main)/layout → template
in_context   renders inside those parent elements

render_usages { "file": "src/Card.tsx" }

Each isolated variant uses its call site’s literal props.
Runtime expressions remain explicitly unresolved.
Up to 12 variants per page.

Call-site discovery · illustrative response formatIsolated component coverage, not a full application test

Actual VS Code window with the component source and Arguseye preview panel side by side, including export, usage, viewport, baseline and comparison controls

Actual extension screenshot · Preview ComponentUnsaved edits · viewport presets · baseline comparisons

Illustrated editor workflow: update the component source and inspect its preview; the actual VS Code screenshot is available above

Preview unsaved edits.

Unsaved buffers update the live preview. React refresh and Vue template/style edits preserve component state; Vue script changes reset state with a warning.

Illustrated agent workflow: discover a usage, render the source, edit the component, then inspect the resulting change

Close the feedback loop.

Discover real usage inputs, render the source, make an edit, then compare the result. MCP tools connect the steps; the CLI works without MCP.

See the measurements and limits.

Useful tools show their work. Performance depends on the project, the dependency graph and what’s already warm.

A production app, with the dev server off.

WiseAdmit’s Next.js project uses MUI, Emotion, Redux and next-auth. These are recorded project observations, not a promise for every component.

1,197source files
1.5 sfirst render after ready
0.3 ssame target again
Inspect the benchmarks ↗

Know what the preview can tell you.

Render with your own packages, global styles and statically reconstructable layouts. If props need runtime data or a provider cannot be reconstructed, the result reports it.

Use application-level browser tests for authentication, backend state and complete user journeys. Component evidence helps you inspect the UI along the way.

Read the compatibility boundaries ↗

One recorded edit. Two ways to inspect it.

The warm workflow captures a card, edits its button label, and inspects the result. Both approaches verified the expected output.

Warm component-edit workflow · elapsed milliseconds
Arguseye MCP2 tool calls
145 ms
Playwright MCP + Vite4 tool calls
217 ms

Recorded 27 Oct 2026 · small React fixture · Intel Core i5-1235U · Node v24.21.0. Arguseye returned a larger evidence bundle and had a slower cold total in this run. These results do not establish a general performance ranking.

Read the method, cold results and response sizes ↗

Get answers before you install.

Do I need a running app or authored stories?

No. Arguseye renders component source directly, using packages installed in your project. You still need the project’s dependencies and Node.js 22 or later. Chromium is required for headless rendering; setup details are in the installation guide.

Which components can I preview?

React (React Router and Remix included), Next.js, Vue 3 and Nuxt, Svelte 5 and SvelteKit, Preact and Solid components, in light or dark. Providers from your layout or main entry, Vue plugins, auto-imports, Tailwind, Sass, CSS modules and assets are applied. Next.js, Nuxt and SvelteKit server code does not run: their APIs have browser stand-ins, and data a server would load comes back empty with a warning, so pass it as props.

What does my agent receive?

A cropped PNG, accessibility snapshot, resolved and unresolved inputs, source fingerprint, timings, warnings and errors. Choose image, summary or both. Successful renders receive a capture ID for later comparison. The CLI is available when your agent has no MCP support.

Does a clean render mean the change is correct?

No. Arguseye shows pixels and structured evidence, including what changed and any incomplete context. Review the result against the intended behavior and use integration tests for complete application flows.

Can I use it without an AI agent?

Yes. Install the VS Code extension, open a component and run Preview Component. Choose an export, usage or viewport; capture a baseline and compare unsaved edits. The same engine powers the CLI and MCP tools.

Render your first component.

Choose your agent, install Arguseye, then ask it to render a component. Capture a baseline, edit the source and compare the result.

Install in your agent Install VS Code extension
Explore the package on npm ↗