Pinpoint

Pinpoint is a dev-only UI picker that copies AI-ready context for the exact rendered element you click.

It highlights DOM elements like an inspector, then copies a structured payload:

<pinpoint-selection>
{
  "kind": "pinpoint.selection",
  "source": {
    "location": "src/components/ExportButton.tsx:42:5",
    "element": "Button",
    "kind": "jsx-metadata"
  },
  "target": {
    "tag": "button",
    "name": "Export",
    "role": "button"
  },
  "window": "main"
}
</pinpoint-selection>

Install

bun add -d @wyverselabs/pinpoint

Pinpoint expects the host app to provide compatible peers:

• effect
• electron for the Electron integration
• vite for source metadata injection

Vite

Add the source metadata plugin to the renderer build in development:

import pinpoint from "@wyverselabs/pinpoint/vite";

export default defineConfig({
  plugins: [
    pinpoint({
      root: __dirname,
    }),
  ],
});

The plugin injects data-ui-context-source and data-ui-context-name attributes into JSX output so selected DOM nodes can be traced back to source files.

Electron

Register the main-process clipboard/IPC handler and send the toggle event from your shortcut:

import {
  DEFAULT_PINPOINT_ACCELERATOR,
  registerElectronPinpointMain,
  toggleElectronPinpointForFocusedWindow,
} from "@wyverselabs/pinpoint/electron/main";

yield* registerElectronPinpointMain();
yield* shortcutService.registerScoped(DEFAULT_PINPOINT_ACCELERATOR, () => {
  fireAndForget(toggleElectronPinpointForFocusedWindow());
});

Expose the preload bridge:

import { exposeElectronPinpointPreload } from "@wyverselabs/pinpoint/electron/preload";

if (process.env.NODE_ENV === "development") {
  exposeElectronPinpointPreload();
}

Install the renderer listener in each window:

import { installElectronPinpoint } from "@wyverselabs/pinpoint/electron/renderer";

if (import.meta.env.DEV) {
  installElectronPinpoint({ windowLabel: "main" });
}

Browser Extension

The browser adapter is intentionally small for now:

import { installBrowserPinpoint } from "@wyverselabs/pinpoint/browser-extension";

installBrowserPinpoint();

Post pinpoint:toggle to the page to activate the picker.

Package

Build the distributable package:

bun run build

Create a local tarball:

bun run pack

Preview published contents without writing a tarball:

bun run pack:dry