Pinpoint

Point at it. Say it. Your agent gets it.

Click an element on your local dev site and type what should change. Claude Code, Cursor or Codex gets your words with the selector, the styles, the component behind it, a source-file hint and a crop of what you saw.

Install it Read the code on GitHub Pinpoint on Product Hunt

Pinpoint in 34 seconds — unmute for the soundtrack. Every screen in it is the real extension.

What it does

No more screenshots piling up in Downloads, or describing “the third button on the left”. You point; the agent knows exactly which element you mean and where to start in the code.

  • Your commentThe only part treated as an instruction. Looks or behaviour: “disable this until the form is valid” is fine.
  • Selector and DOM path.hero .cta .btn.primary
  • Computed stylesWhat the browser actually rendered, not what the CSS meant.
  • Component chainReact and Vue, from the root down to the component you clicked.
  • Source hintThe file the component lives in, when the dev build knows it.
  • A cropThe element as you saw it, plus page errors and failed requests from the minute before.

How it works

  1. Point

    Press ⌥⇧A on your dev site and click an element, or drag a box around a group.

  2. Say it

    Type what should change and press ⌘↩. Type, or dictate. Mark the next thing straight away.

  3. Your agent gets it

    Over MCP or a hook, with your next message. It changes the code and replies on the page.

One note from start to finish, recorded from the real extension. The agent's side is played through the bridge's API.

A note is a conversation

The agent can ask back
When a request is ambiguous it asks instead of guessing. You answer on the page.
Accept or Not quite
When it finishes, a card shows its reply. Not quite sends the note back with what is still wrong.
Before and after
A fresh crop of the element after the change, next to the one you marked.
Record steps
Click through a bug as you normally would. Each click becomes a step to reproduce.
Page errors come along
Uncaught errors and failed requests from the minute before, redacted in the browser first.
Pins that stay put
Pins follow their element through re-renders, and hide rather than sit on the wrong one.
Drafts and whole-page notes
Mark several things and send them together, or say something about the page itself.
Native apps too
The same pick-and-comment on the iOS Simulator and the Android emulator.

The same on a native app: the iOS Simulator picker, recorded from the bridge's /ios page.

Works with

Agents

  • Claude Code
  • Cursor
  • Codex
  • Any MCP client (Windsurf, Cline, Zed…)

Browsers

  • Chrome, Edge, Brave, Arc (load unpacked)
  • Firefox 140+ (Firefox Add-ons)
  • Safari (build with Xcode)

Native

  • iOS Simulator
  • Android emulator

Install

For web apps

Needs Node 18+. Setup wires up your agents, installs the hooks, starts the bridge and walks you through loading the extension.

$ git clone https://github.com/gowtham012/PinPoint pinpoint
$ node pinpoint/bridge/cli.js setup

Only a native iOS or Android app

No clone needed: run the bridge from npm and add it to your agent.

$ npx -y pinpoint-bridge
$ claude mcp add pinpoint -s user -- npx -y pinpoint-bridge mcp

Firefox: install from Firefox Add-ons. The Chrome and Edge listings are in review, so for those setup loads the extension unpacked for now. Every step spelled out: the quick install guide.

Stays on your machine

The bridge listens on 127.0.0.1 and nowhere else. Notes and crops are kept in ~/.pinpoint. The one place they go is the coding agent you connect.

The extension runs only on local development pages unless you turn it on for a tab, needs a token only your machine has, and labels everything scraped from a page as untrusted when it reaches your agent. No account, no analytics. Read the privacy policy and the security notes.