Side by side
| Arguseye | Storybook | Playwright MCP and other browser MCPs | |
|---|---|---|---|
| What you need first | Your project with its dependencies installed. Nothing else. | A Storybook setup and a story per component state. | The app running locally (dev server), plus a login if the page needs one. |
| What gets rendered | The component file as it is now, including unsaved edits in VS Code. | The stories you wrote, against the component's saved code. | Whatever page the browser can reach. |
| Where the props come from | Found at the component's real call sites in your code; runtime values are reported as unresolved. | Written by hand in each story's args. | The live app's real data. |
| App context (layouts, theme, global CSS, fonts) | Rebuilt from your root and segment layouts and providers. | Added through decorators and preview config that you maintain. | Real, because it is the app. |
| What an agent gets back | A cropped PNG, the accessibility tree, warnings and errors with file paths, and a diff against the previous render. | Depends on the Storybook add-ons you use. | Screenshots and the page's accessibility snapshot. |
| Steps to check one edit | Two tool calls: render, then render_diff after the edit. | Write or update the story, then view it. | Start or reuse the server, navigate, reach the state, screenshot; repeat after the edit. |
| Best at | Fast, repeated checks of one component while an agent edits it. | A shared, documented component catalogue. | Full user journeys and end-to-end behaviour. |
Benchmarks for the "steps to check one edit" row, with the machine and method, are on the benchmarks page: on one small fixture, a warm edit-and-check took 2 calls and 145 ms with Arguseye against 4 calls and 217 ms with Playwright MCP over a Vite app, while Arguseye's cold start was slower (2.1 s against 1.7 s).
Arguseye or Storybook
Choose Storybook when you want a catalogue: a team-maintained library of documented components and states, with add-ons for docs, interaction tests and design review.
Choose Arguseye when you want to see the component you are editing right now, as the app renders it, without writing a story first. That is the loop a coding agent is in: edit, look, fix, look again. The two can sit in the same repository: Arguseye ignores story files.
Arguseye or Playwright MCP
Choose Playwright MCP (or another browser MCP) when you need the real app: a checkout flow, a logged-in journey, behaviour that depends on the backend.
Choose Arguseye when the question is "does this component look right after my change?". It skips starting the app, logging in and clicking to the state, so it also works when the app cannot boot or another page is broken. Many teams will want both: Arguseye inside the edit loop, a browser MCP or end-to-end tests before merging.
Where Arguseye stops
These are isolated component renders, not application journeys. Next.js server execution (cookies(), headers(), server data fetching), auth and backend-dependent states are outside its runtime. Those renders are reported as incomplete with warnings, so an agent knows when to reach for the real app. See compatibility for the details.
Questions
Is Arguseye a Storybook alternative?
For checking one component after an edit, yes: it renders the file as it is, with the props your app already passes it, inside your real layouts, so there are no stories to write or keep in sync. Storybook stays the better fit for a documented, browsable component library maintained by a team. The two can live in the same project.
How is Arguseye different from Playwright MCP?
Playwright MCP drives a running app in a browser: start the dev server, log in, navigate and click to the state, then take a screenshot. Arguseye renders the component from source without the app, so it still works when the app cannot boot, the page sits behind auth, or the state is hard to reach. Playwright MCP is the right tool for full user journeys and end-to-end checks.
Does Arguseye replace end-to-end tests?
No. It renders isolated components with discovered inputs. Next.js server execution, auth and backend-dependent states are outside its runtime and are reported as incomplete. A pixel diff is evidence to review, not proof the change is correct.
Which coding agents can use Arguseye?
Any MCP client. One command writes the config for Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, Windsurf and Antigravity: npx @ayushniroula/arguseye install claude (or another client name).
Try it
npx @ayushniroula/arguseye install claudeReplace claude with codex, cursor, gemini, copilot, windsurf or antigravity, then restart your agent. For VS Code, install the Arguseye extension. Source: GitHub, MIT licensed.