Documentation

Everything you need to get value in five minutes.

Install

Add Pinpoint from the Chrome Web Store (Chrome, Edge, Brave, Arc) or Firefox Add-ons. It’s free for five picks a day — no account needed to start.

Your first pick

Open any page, press Alt+Shift+P (or click the toolbar icon → Start inspecting), hover an element, and click. The panel shows the selector, computed styles, and DOM context. Hit Copy to put a clean, model-ready prompt block on your clipboard, then paste it into your agent.

Context modes

Four modes control how much goes into the bundle — Minimal, Standard, Detailed, and Component. A live token estimate shows the size before you copy, so you only spend what you need.

MCP handoff

Skip copy-paste entirely. Run the local MCP server, pair it once in the extension settings, and your agent pulls the latest pick with a tool call.

npx @pinpoint/mcp
# prints a relay URL + a pairing token → paste it into the extension settings

Then register it with your agent. Cursor (.cursor/mcp.json):

{
  "mcpServers": {
    "pinpoint": { "command": "npx", "args": ["-y", "@pinpoint/mcp"] }
  }
}

Pick an element, click Send, then ask your agent to use the get_latest_pick tool.

Source mapping

On dev builds, Pinpoint resolves the framework component (React, Vue, Svelte, Angular) and the exact file:line that rendered the element, and includes it in the bundle — so your agent edits the right file the first time. It degrades gracefully to a component name when build metadata isn’t present.

AI actions

Generate a ready-to-paste fix prompt with no key, or paste your own Anthropic API key to ask Claude inline. Your key is stored locally and used directly from your browser — Pinpoint never sees it.

Account & Pro

Sign in (email/password or Google) to sync your plan and unlock Pro: unlimited picks, MCP, source mapping, AI actions, and export. Manage everything from your account dashboard.