Inspekt

{"id":"01HF…","ts":1715, "url":"app.local/dashboard", "element":{ "filePath":"src/components/Button.tsx", "line":42,"componentName":"Button", "snippet":{"lines":[…],"language":"tsx"} },"source":"extension"}

Source snippets, not just paths.

Click an element. The popover shows the surrounding lines of code with the target line highlighted. Resolved from your dev server when it's running, from source maps when you opt in. The agent gets the snippet too, so it doesn't have to re-read the file before editing.

Resolves via/__inspekt/snippet · fiber._debugSource · @jridgewell/trace-mapping

One setup. Every agent.

npx inspekt setup generates a per-machine auth token, writes an MCP server entry to every detected agent, drops a skill file into Claude Code. Re-running is idempotent. Token, daemon URL, and agent prefs sync via chrome.storage.sync: configure once, works on every machine you sign into.

Registers with Claude Code · Cursor · Codex · Gemini CLI · Antigravity

React works with zero setup.

Inspekt reads source location from React fiber's _debugSource via bippy. That field is already populated by Babel's default JSX-source plugin in any modern React dev setup, so React and Preact need nothing in your project. Vue, Svelte, Solid, Astro use @code-inspector/core AST transforms, also without per-component work.

What lands in your agent.

Every grab is a JSON record. The Chrome extension POSTs it to the daemon; the daemon appends to ~/.inspekt/queue.jsonl; the MCP server reads it back to your agent. Inspekt doesn't transform the payload along the way — what your agent sees is what the extension sent.

{
  "id": "01HG6Z4N8VK7M…",        
  "timestamp": 1715200013428,
  "url": "http://localhost:5173/dashboard",
  "element": {
    "filePath": "src/components/Button.tsx",
    "line": 42,
    "column": 5,
    "componentName": "Button",
    "tagName": "button",
    "classList": ["btn", "btn-primary"],
    "snippet": {                       
      "startLine": 37,
      "endLine": 47,
      "targetLine": 42,
      "lines": ["export function Button(", …],
      "language": "tsx",
      "source": "devserver"             
    }
  },
  "comment": "wrong shade on hover",    
  "source": "extension"
}

Three processes. One queue file. MCP over stdio.

The Chrome extension talks to a tiny localhost daemon. The daemon appends grabs to a shared NDJSON queue. Each agent spawns its own MCP server, which reads the same queue file under a lock. No magic; the moving parts are all on disk.

browser

Chrome extension

resolveElementSource (fiber → data-insp-path)
popover · snippet · "Send to Agent"
capability probe · icon state

node

@aylith/inspekt-daemon

Hono on 127.0.0.1:5678
token-gated POST /__inspekt/grab
NDJSON queue file with lock

disk

~/.inspekt/queue.jsonl

append-only, file-locked
shared by every MCP process
survives daemon restarts

stdio

@aylith/inspekt-mcp

grab_latest · list_grabs · get_grab
mark_grab_processed · clear_queue
open_grab_in_editor

agent

Claude · Cursor · Codex · Gemini · Antigravity

each spawns its own inspekt-mcp child
reads queue via the MCP tools
skill auto-triggers on "this element"

The icon tells you what's available.

Per-tab capability state. Greyscale means there's nothing to inspect on this page. The badge describes how snippets resolve and whether an agent is connected. Hover the toolbar icon for the full title text.

No instrumentationNo data-insp-path on the page and no React fiber source. The inspector won't find anything here.

OFF

DisabledPage is instrumented but the inspector is off. Click the icon to enable.

Path onlyActive. Popover will show file path but no snippet.

DEV

Dev-server snippetsActive. Snippets resolve via the local /__inspekt/snippet endpoint.

MAP

Source-map snippetsActive. Snippets resolve via deployed source maps. Opt-in mode.

Agent connectedActive. Daemon reachable, "Send to Agent" works. Supersedes DEV/MAP.

Where Inspekt sits in the click-to-source space.

The headline isn't "we do everything." It's "we glue the right pieces together for the agent era." Inspekt depends on @code-inspector/core for transforms and bippy for React fiber. The agent layer is what's new.

Capability	Inspekt	LocatorJS	code-inspector-plugin	react-grab
Click → open IDE	✓	✓	✓	✓
Source snippet in overlay	✓	—	—	—
Source-map fallback	✓ opt-in	—	—	—
Capability-aware icon	✓	—	n/a	—
Multi-framework AST transform	✓ (via code-inspector)	✓ (own)	✓	—
Zero-config React via fiber	✓ (via bippy)	✓	—	✓ (via bippy)
Chrome extension	✓	✓	—	✓
MCP server for agents	✓	—	—	—
Cross-app config sync	✓	—	—	—
Setup CLI	✓ npx inspekt setup	—	—	—
Maintained 2026	✓	dormant	✓	✓

Three steps. No registration. No SaaS.

Download the Vite package bundle.

Extract the three package archives into your existing Vite project and verify SHA256SUMS. npm installs their external dependencies; you do not need the extension or an agent for the basic inspector.

Download the package bundle →

Add the Vite plugin.

Install all three archives, keep your framework plugin, then add inspekt() to your Vite plugins.

npm install -D ./aylith-inspekt-core-0.4.1.tgz ./aylith-inspekt-cli-0.1.2.tgz ./aylith-inspekt-vite-0.2.3.tgz

Inspect your running development page.

Start your existing development script and open its URL. Ctrl+Alt+Click an instrumented element, expand Show source, then Copy path. Press Escape to return to ordinary clicks. Your configured editor must be installed to open a file.

Full install guide →