Pinpoint

What Pinpoint MCP server does

Pinpoint MCP server turns a UI selection into an annotation that a coding agent can use as an implementation starting point. For a local web page, the annotation can include the selected element's selector, DOM path, computed styles, React or Vue component chain, a source-file hint, and a cropped screenshot. The note can describe visual changes or behavior, such as validation, saving, or displaying an API error.

The agent receives the annotation through MCP and can use the selected element as a route into related handlers, state, API calls, and backend code. Pinpoint does not drive the browser, click through pages, or assert test results. It is intended to complement browser automation by keeping the developer responsible for selecting the relevant UI.

How it works

A browser extension communicates with a local bridge on 127.0.0.1:7331. The bridge forwards annotations to the configured MCP connection and can also write them to ~/.pinpoint/annotations.json. When a project path is supplied, pending notes can be maintained in <repo>/.pinpoint/pending.md for agents that read project files.

The web workflow uses a Chromium extension. Open the development site, activate Pinpoint with Alt+Shift+A or ⌥⇧A, select an element, enter the requested change, and submit with Ctrl+Enter or ⌘↩. Native iOS apps use the Simulator picker at the bridge's /ios endpoint. Since an iOS app has no DOM, this workflow supplies a screenshot and accessibility tree instead.

Setup and configuration

Node 18 or newer and a Chromium browser are required for the web workflow. The repository's setup command installs dependencies, asks which project and application type to use, configures supported agents, and can install Claude Code hooks. It can detect Claude Code, Cursor, and Codex, writing the relevant MCP configuration while preserving existing entries. Claude Code should be restarted after configuration changes.

Web users must load the extension/ directory as an unpacked extension with browser developer mode enabled. Safari requires the provided build script and Xcode; Firefox is not currently supported. For an iOS-only setup, the bridge can be run with npx -y pinpoint-bridge, and the picker is available at /ios.

Tools and capabilities

• Select elements in a local Chromium page and submit written change requests.
• Deliver DOM, style, component, source-location, and screenshot context through MCP.
• Annotate native iOS Simulator interfaces using accessibility data.
• Pass notes through MCP, local annotation storage, or an optional pending Markdown file.
• Support visual requests and behavior-oriented requests without editing or operating the page itself.

Limitations and notes

The web workflow supports Chromium browsers including Chrome, Edge, Brave, Arc, Opera, and Vivaldi. Safari lacks React and Vue component-chain and source-file hints because its content-script environment does not support the required execution mode. Firefox is not supported yet because of manifest compatibility gaps. The native-host installation command is available on macOS and Linux; Windows users must start the bridge in a terminal. Browser automation and Pinpoint serve different purposes: automation controls the application, while Pinpoint captures developer-directed context.