# Pinpoint

Sends element selectors, component trees, and screenshots from a browser or iOS Simulator to your agent. Useful when you need UI fixes without manual context copying.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 9
- Author: gowtham012
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/gowtham012/PinPoint/tree/HEAD/bridge
- Updated: 2026-10-22
- HTML: https://affpapa.org/en/nevibecode/mcp/pinpoint

## What it does

The `pinpoint-bridge` package provides a stdio MCP server that connects an active frontend to your coding assistant. When you select an element on a web page or inside the iOS Simulator and describe a change, the tool packages that context. It forwards the selector, DOM path, computed styles, component chain, source file reference, and a cropped screenshot.

All data remains on `127.0.0.1`. The iOS Simulator picker is hosted locally at `http://127.0.0.1:7331/ios`. If the bridge process is not running, the stdio MCP server falls back to reading previously stored notes.

The browser extension does not come prepackaged in the npm module. You must clone the project repository and execute `node pinpoint/bridge/cli.js setup` before browser element inspection will work.

## Requirements
- Needs: Node.js (commands run via npx)
- Environment variables: `PINPOINT_PORT` — keys and tokens: ask the human for the values, never commit them or put them in shared files.

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add --env PINPOINT_PORT=<PINPOINT_PORT> --transport stdio bridge -- npx -y pinpoint-bridge
```
Replace <…> with your own values

### Codex

**Platform CLI**
```bash
codex mcp add bridge --env PINPOINT_PORT=<PINPOINT_PORT> -- npx -y pinpoint-bridge
```
Replace <…> with your own values

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "bridge": {
            "command": "npx",
            "args": [
                "-y",
                "pinpoint-bridge"
            ],
            "env": {
                "PINPOINT_PORT": "<PINPOINT_PORT>"
            }
        }
    }
}
```
Replace <…> with your own values

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "bridge": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "pinpoint-bridge"
            ],
            "env": {
                "PINPOINT_PORT": "<PINPOINT_PORT>"
            }
        }
    }
}
```
Replace <…> with your own values

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add -e PINPOINT_PORT=<PINPOINT_PORT> bridge npx -y pinpoint-bridge
```
Replace <…> with your own values

## When to use it
- forward element styles and visual crops directly to an agent
- capture DOM paths and selectors from a browser page
- inspect native UI elements inside the iOS Simulator
- point an assistant to the source file behind a rendered component

## Example prompts
- Check the latest note from Pinpoint and adjust padding on the selected element
- Use the selector and styles from Pinpoint to restyle the navigation bar
- Look at the Pinpoint screenshot and find the corresponding component file

## Similar
- [browser-screenshot-diff](https://affpapa.org/en/nevibecode/skills/browser-screenshot-diff.md) — skill · 696 installs
- [argent-screenshot-diff](https://affpapa.org/en/nevibecode/skills/argent-screenshot-diff.md) — skill · 25000 installs
- [unbrowser by Unchained](https://affpapa.org/en/nevibecode/mcp/unbrowser-by-unchained.md) — MCP server · ★ 16
- [browser-screenshot](https://affpapa.org/en/nevibecode/skills/browser-screenshot.md) — skill · 4100 installs
- [expo-dom](https://affpapa.org/en/nevibecode/skills/expo-dom.md) — skill · 21000 installs
- [browser-gateway](https://affpapa.org/en/nevibecode/mcp/browser-gateway.md) — MCP server · ★ 18

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md