Pinpoint — Claude Code MCP server: what it does, how to install
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.
claude mcp add --env PINPOINT_PORT=<PINPOINT_PORT> --transport stdio bridge -- npx -y pinpoint-bridgeWhat Pinpoint 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.
What it helps with
- 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 for the agent
- 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
How to install Pinpoint
Platform CLI
claude mcp add --env PINPOINT_PORT=<PINPOINT_PORT> --transport stdio bridge -- npx -y pinpoint-bridgeReplace <…> with your own values
Platform CLI
codex mcp add bridge --env PINPOINT_PORT=<PINPOINT_PORT> -- npx -y pinpoint-bridgeReplace <…> with your own values
Config file
{
"mcpServers": {
"bridge": {
"command": "npx",
"args": [
"-y",
"pinpoint-bridge"
],
"env": {
"PINPOINT_PORT": "<PINPOINT_PORT>"
}
}
}
}Replace <…> with your own values
Config file
{
"servers": {
"bridge": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"pinpoint-bridge"
],
"env": {
"PINPOINT_PORT": "<PINPOINT_PORT>"
}
}
}
}Replace <…> with your own values
Platform CLI
gemini mcp add -e PINPOINT_PORT=<PINPOINT_PORT> bridge npx -y pinpoint-bridgeReplace <…> with your own values
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Pinpoint
How to install Pinpoint in Claude Code?
Run claude mcp add pinpoint -- npx -y pinpoint-bridge. If you need to specify a port, use claude mcp add --env PINPOINT_PORT=<PINPOINT_PORT> --transport stdio bridge -- npx -y pinpoint-bridge.
What data does Pinpoint send to the assistant?
It delivers your note, the CSS selector, DOM hierarchy, component hierarchy, source-file hint, and a trimmed screenshot of the element.
Where is the browser extension included?
The extension is omitted from the npm package. You must clone the repository and run node pinpoint/bridge/cli.js setup to configure it.
