One click saves
a thousand tokens.

Stop describing UI elements to your AI agent. Click. Copy the exact XPath, CSS selector, and React component. Paste.

Built for pair-coding with Claude Code Cursor Codex Copilot

Get the AI agent prompt

Paste it into Claude Code, Cursor, or Codex — it installs & wires react-path-picker for you.

↗ Try it live on this page — click the aim icon in the top-right to inspect any element.

$ npm install react-path-picker

GitHub

npm v0.1.4 · MIT License · Dev-only by design · Zero production footprint

The difference, in one screen

✕ Without — what you usually type

"the buy button on the checkout page — the green one, second from the right, inside the sticky bottom bar… not the one in the header…"

~80 tokens still ambiguous

✓ With — one click, paste this

[xPathInfo] Route: /checkout, XPath: /html/body/div[2]/footer/button[2], CSS: button.btn-primary, React: BuyButton (components/BuyButton.tsx)

1 paste unambiguous · paste-ready

Plain HTML / non-React pages get Route, XPath, CSS via the framework-agnostic core.

How it works

Three clicks. From mystery DOM node to a clipboard-ready [xPathInfo] snippet your AI agent can paste straight into a fix.

Click the aim icon

A small target icon sits fixed in the top-right of your dev build. Click it to arm the inspector.

Hover any element

An overlay highlights the element under your cursor with a tooltip showing the tag, classes, and detected component.

<button> · BuyButton

Click to copy

Route, XPath, CSS selector, and React component name & source path land on your clipboard in one line.

✓ Copied to clipboard

Then paste it into…

Your AI coding agent

"Make this button 8px taller" — and the agent already knows which button.

A Playwright / Selenium test

XPath and CSS selector are both valid drop-ins — no DevTools spelunking.

A bug ticket / Slack thread

Route + component + file path = the engineer knows where to start in 3 seconds.

Component & source path require React. Plain HTML pages get Route, XPath, CSS via the core API.

Features

Everything you need to inspect DOM elements during development — nothing you don't.

Selectors agents can use

ID shortcuts and SVG-boundary detection make XPaths short and stable. Drop them straight into Selenium, Playwright, or your agent's prompt.

No `css-a8f3d2` noise

Auto-filters Ant Design / emotion hash classes and caps depth at 5. Selectors a human can actually read — and your agent can match.

Tells you the file, not just the tag

Walks the React Fiber tree for the nearest user component and its source path — BuyButton (components/BuyButton.tsx).

Works on plain HTML too

Subpath react-path-picker/core runs without React. One esm.sh line and any static page has an inspector.

vs the alternatives you already have

	Browser Inspect	React DevTools	react- path-picker
XPath + CSS selector in one click	partial	—	✓
React component name and source file	—	partial	✓
Single-line clipboard format for AI prompts	—	—	✓
Filters CSS-in-JS hash classes	—	—	✓
Works on plain HTML / non-React pages	✓	—	✓ (core)

Quick Start

Pick one. The Prompt tab is the default — your AI agent does the wiring for you.

Production-safe by design. A single process.env.NODE_ENV guard keeps the picker out of your production bundle. End users never see it; tree-shaking removes the runtime entirely.

Prompt for Claude Code / Cursor / Codex

Install and wire up react-path-picker into this project.
Repo: https://github.com/kiboko-ai/react-path-picker

Steps:
1. Detect the project type:
   - React app — Next.js App Router, Pages Router, or React with React Router / Vite. Follow steps 2–6.
   - Plain HTML — static `.html` files, no bundler / no npm. Skip steps 2–5 and use the Plain HTML snippet at the bottom instead.
2. Install the package: `npm install react-path-picker`.
3. Create a dev-only `DevPathPicker` component that uses `PathPickerButton` from `react-path-picker`.
   Pass the current pathname via the framework's router hook
   (`usePathname` for Next.js App Router, `useRouter().pathname` for Pages Router,
   or `useLocation().pathname` for React Router).
4. Gate it on development (`process.env.NODE_ENV !== 'production'` or `!import.meta.env.PROD`)
   so it never renders in production.
5. Mount it once at the root (`app/layout.tsx`, `pages/_app.tsx`, or `App.tsx`) so the
   inspector button shows on every page.
6. Run the project's typecheck/build (e.g. `npm run typecheck`) and fix any issues.

For Plain HTML, add this <script type="module"> to a dev-only HTML page (never ship to
production). It loads react-path-picker/core from esm.sh, mounts a fixed top-right button,
and copies [xPathInfo] Route, XPath, CSS to the clipboard on pick:

<script type="module">
  import { PathPickerInspector } from 'https://esm.sh/react-path-picker/core';
  const btn = document.createElement('button');
  btn.textContent = '◎';
  btn.setAttribute('data-pathpicker-ignore', '');
  btn.style.cssText =
    'position:fixed;top:6px;right:6px;z-index:99998;width:28px;height:28px;' +
    'border-radius:6px;border:1px solid rgba(255,255,255,0.22);background:#0f172a;' +
    'color:#fff;cursor:pointer;font:14px/1 monospace';
  document.body.appendChild(btn);
  let ins = null;
  const reset = () => { ins = null; btn.style.background = '#0f172a'; };
  btn.onclick = () => {
    if (ins) { ins.deactivate(); reset(); return; }
    ins = new PathPickerInspector({
      getRoute: () => location.pathname,
      onPick: (r) => {
        navigator.clipboard?.writeText(
          `[xPathInfo] Route: ${r.route}, XPath: ${r.xpath}, CSS: ${r.cssSelector}`
        );
        reset();
      },
      onCancel: reset,
    });
    ins.activate();
    btn.style.background = '#329D9C';
  };
</script>

Do not modify production code paths or render the picker in production builds.

Works with any AI coding agent that has shell & filesystem access.

Prefer to wire it up by hand? Pick the router you're using.

components/DevPathPicker.tsx

'use client';

import { usePathname } from 'next/navigation';
import { PathPickerButton } from 'react-path-picker';

export default function DevPathPicker() {
  const pathname = usePathname();
  if (process.env.NODE_ENV !== 'development') return null;
  return <PathPickerButton pathname={pathname} />;
}

app/layout.tsx

import DevPathPicker from '@/components/DevPathPicker';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <DevPathPicker />
        {children}
      </body>
    </html>
  );
}

pages/_app.tsx

import { useRouter } from 'next/router';
import { PathPickerButton } from 'react-path-picker';

export default function App({ Component, pageProps }) {
  const router = useRouter();
  return (
    <>
      {process.env.NODE_ENV === 'development' && (
        <PathPickerButton pathname={router.pathname} />
      )}
      <Component {...pageProps} />
    </>
  );
}

App.tsx

import { useLocation } from 'react-router-dom';
import { PathPickerButton } from 'react-path-picker';

export function DevPathPicker() {
  const location = useLocation();
  if (import.meta.env.PROD) return null;
  return <PathPickerButton pathname={location.pathname} />;
}

Core API

Need to use the inspector outside React, or wire up your own UI? Import from the framework-agnostic react-path-picker/core subpath.

vanilla.ts

import {
  PathPickerInspector,
  getXPath,
  getCssSelector,
} from 'react-path-picker/core';

const inspector = new PathPickerInspector({
  getRoute: () => window.location.pathname,
  onPick: (result) => {
    console.log('[xPathInfo]', result);
    // result: { route, xpath, cssSelector, tagName, id, textContent,
    //          reactComponent, reactSource }
  },
  onCancel: () => console.log('cancelled'),
});

inspector.activate();

// Or use the utility functions directly on any element:
const el = document.querySelector('main')!;
console.log(getXPath(el));        // /html/body/div[2]/main
console.log(getCssSelector(el));  // main.layout-content

Export	Signature	Description
PathPickerButton	{ pathname?, color? }	React button + overlay. Drop into your dev layout.
usePathPicker	(pathname?) => { isActive, justCopied, toggle }	Hook for building your own UI.
PathPickerInspector	new (callbacks) => Inspector	Core class with `activate()` / `deactivate()`.
getXPath	(el: Element) => string	XPath with ID shortcuts & SVG boundaries.
getCssSelector	(el: Element) => string	Unique CSS selector (max 5 levels).
getReactComponent	(el: Element) => { name, source } \| null	Walks the Fiber tree to find the nearest user component.

One click saves a thousand tokens.