<div align="center">

<img src="docs/logo/pinpoint-mark.svg" alt="" width="40" align="top"> Pinpoint

Point at your running app. Say what should change. Your coding agent gets it.

<a href="https://www.producthunt.com/products/pinpoint-10?embed=true&amp;utm_source=badge-featured&amp;utm_medium=badge&amp;utm_campaign=badge-pinpoint-ff1b5d56-ec19-41d9-a201-e69311ca2084" target="_blank" rel="noopener noreferrer"><picture><source media="(prefers-color-scheme: dark)" srcset="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1288299&amp;theme=dark"><img alt="Pinpoint - Point at your app; your coding agent gets it | Product Hunt" width="250" height="54" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1288299&amp;theme=light"></picture></a>

gowtham012.github.io/PinPoint

English · తెలుగు · हिन्दी · தமிழ் · 简体中文 · 日本語 · 한국어 · Español · Français · Deutsch · Português · Русский · العربية

<img src="docs/demo.gif" alt="Picking an element on a local dev page, writing what should change, and the agent picking it up" width="760">

_{Click an element, say what should change, your agent gets it. · <a href="docs/demo.mp4">full-speed video</a>}

</div>

---

Click an element on your local dev site, type what should change, and your coding agent receives it with everything it needs to find the code: the selector, DOM path, computed styles, the React/Vue component chain, a source-file hint and a cropped screenshot. No screenshots piling up in Downloads, no describing "the third button on the left".

It works for behaviour, not only looks. "Disable this until the form is valid" or "save the draft before closing" are fine notes: the agent treats the element as where to start, then follows it into the handlers, state, API calls and backend behind it.

Building a native app? The same works on the iOS Simulator and the Android emulator.

flowchart LR
  subgraph you [" You point and type "]
    direction TB
    B["🌐 <b>Browser</b><br/>Pinpoint extension"]
    S["📱 <b>iOS Simulator</b><br/>127.0.0.1:7331/ios"]
    AN["🤖 <b>Android emulator</b><br/>127.0.0.1:7331/android"]
  end
  BR(["📍 <b>Pinpoint bridge</b><br/>127.0.0.1:7331"])
  ST[("💾 ~/.pinpoint/<br/>annotations.json")]
  F["📄 .pinpoint/pending.md<br/><i>in your repo, optional</i>"]
  A["🤖 <b>Your coding agent</b><br/>Claude Code · Cursor · Codex"]

  B -- "selector · styles · crop" --> BR
  S -- "accessibility tree · crop" --> BR
  AN -- "view tree · crop" --> BR
  BR -- "MCP / hooks" --> A
  A -- "resolve + reply" --> BR
  BR -. "live pins & replies" .-> B
  BR --- ST
  BR -.-> F

  classDef bridge fill:#c6f432,stroke:#121212,stroke-width:2px,color:#121212
  classDef agent fill:#121212,stroke:#c6f432,stroke-width:2px,color:#ffffff
  class BR bridge
  class A agent
  style you fill:transparent,stroke:#888,stroke-dasharray:5 4

Contents

• Get Pinpoint: stores, npm, MCP directories
• Quick start
• Using it
• Talking it through
• How your agent finds out
• Native iOS apps
• Android emulator
• Connecting other agents
• Reference: commands, MCP tools, what a note contains
• Troubleshooting
• Safety and privacy

How it compares

| | Who drives | What the agent gets | |---|---|---| | Pinpoint | You point and say what should change | Selector, styles, component chain, source hint, crop | | Playwright MCP, computer-use | The agent navigates and clicks | Whatever it finds by browsing | | A pasted screenshot | You | Pixels only, so it guesses which control you meant |

Pinpoint never touches the page itself, so it composes with browser automation instead of competing with it: point at the thing, let the agent change the code, let your tests drive the browser.

🔗 Get Pinpoint

| Where | Link | |---|---| | Firefox (140+, desktop) | Firefox Add-ons | | Chrome, Brave, Arc, Opera, Vivaldi | Chrome Web Store listing in review — load it unpacked for now (Quick start) | | Edge | Add-ons listing coming — loads the same package unpacked today | | Safari | Build with Xcode: bash tools/make-safari.sh | | Bridge + MCP server | npm: pinpoint-bridge · npx -y pinpoint-bridge | | MCP directories | Official MCP Registry · Glama · mcprush · cursor.directory | | Releases | GitHub releases (store zips attached) | | Website & demo | gowtham012.github.io/PinPoint | | Launch | Product Hunt · Show HN |

🚀 Quick start

You need Node 18+ and a Chromium browser (Chrome, Edge, Brave, Arc, Opera, Vivaldi), or Firefox 140+.

1. Install

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

setup asks a few questions. Every one has a default, so pressing Enter all the way through works. It wires up Claude Code, Cursor and Codex (whichever you have), installs the Claude Code hooks, and starts the bridge.

2. Load the extension. Chrome doesn't let a terminal load an extension into your profile, so setup opens the extensions page and copies the folder path for you: turn on Developer mode, click Load unpacked, paste. The terminal confirms ✓ Pinpoint is live in Chrome by itself.

3. Restart Claude Code once, so it reads the new MCP server and hooks.

Try it: open your dev site (or the demo page), press ⌥⇧A / Alt+Shift+A, click an element, type what should change, then ⌘↩ / Ctrl+Enter. Type anything in Claude Code and your note comes along.

[!TIP] Want every step spelled out? See docs/quick-install.md. Only building a native iOS or Android app? Skip the clone: npx -y pinpoint-bridge, then claude mcp add pinpoint -s user -- npx -y pinpoint-bridge mcp.

<details> <summary><b>Setup in detail, doing it by hand, Windows and <code>file://</code></b></summary>

setup asks:

• which project's UI you want to annotate: the repo your agent will edit
• web app, native iOS app, Android app, or both (web and iOS): web gets the browser extension; iOS gets the Simulator picker, Android the emulator picker. Setup checks for Xcode, Maestro and Java (iOS) or adb (Android) and says how to get whichever is missing (it installs none of them).
• which agents to wire up: claude mcp add for Claude Code, <project>/.cursor/mcp.json for Cursor, ~/.codex/config.toml for Codex. Existing entries are merged, never replaced, and the TOML file is backed up first.
• whether to install the Claude Code hooks, which bring pending notes in with your next message
• which browser to load the extension into (only the ones you have)

Then it registers the launcher behind the popup's Start bridge button and starts the bridge. Non-interactive: node pinpoint/bridge/cli.js setup ~/code/my-app --yes (add --for ios, --for android or --for both; the default is web).

By hand. The order matters: $PWD is baked into the MCP entry, so step 2 runs from pinpoint/bridge before the bridge takes over the terminal.

# 1. get it
git clone https://github.com/gowtham012/pinpoint
cd pinpoint/bridge && npm install

# 2. wire up Claude Code (once, from this folder)
claude mcp add pinpoint -s user -- node "$PWD/cli.js" mcp
node cli.js install-hooks ~/code/my-app                  # notes arrive without being asked
node cli.js install-native-host --project ~/code/my-app   # optional: the popup's "Start bridge" button

# 3. load extension/ unpacked at chrome://extensions (Developer mode on)
# 4. start the bridge, and leave it running
node cli.js --project ~/code/my-app

--project is optional: it keeps <repo>/.pinpoint/pending.md current for agents that read a file instead of MCP.

file:// pages. Chrome keeps them off by default: chrome://extensions → Pinpoint → Details → Allow access to file URLs, then reload.

Windows. $PWD works in PowerShell and Git Bash but not cmd.exe; run node cli.js --help and copy the claude mcp add … line it prints, which has the full path. install-native-host is macOS and Linux only; on Windows, start the bridge in a terminal.

Also listed on the official MCP Registry (io.github.gowtham012/pinpoint), cursor.directory (one-click Add to Cursor) and Glama and mcprush (grade A). Those install the MCP server only; web pages still need the extension and bridge.

</details>

🖱️ Using it

While the bridge runs, a small bar sits in the top-right corner of your page.

| | | | |---|---|---| | | | | | Shows the shortcut, and lights up while your agent works. | Settles to a dot after a few seconds. Hover to bring it back. | Picking. The bar lets clicks through so it never blocks your target. |

1. Click the bar (or ⌥⇧A / Alt+Shift+A) to start marking.
2. Click an element, or drag a box around a group ("make these cards two-up on mobile").
3. Type what should change and press ⌘↩ / Ctrl+Enter. You're ready for the next one.
4. Esc or Stop when you're done.

<table> <tr> <td width="50%"><img src="docs/images/popover.png" alt="The comment popover on a form field, naming the element it picked"></td> <td width="50%"><img src="docs/images/pin.png" alt="A numbered pin on the annotated field"></td> </tr> <tr> <td>The popover names exactly what you picked, so two nea