NPM Labs
PointDev PointDev
AI-Native Element Inspector

Let AI see
exactly what you see.

PointDev is a Chrome extension paired with a local MCP server. Select elements and send rich UI context directly to AI coding assistants.

A Seamless Workflow

1

Select

Click elements on any webpage using the browser extension. Multi-select is fully supported.

2

Capture

PointDev extracts DOM, computed CSS, layout data, framework info, and diagnostics instantly.

3

Prompt

Add a text prompt describing what you want the AI to do with the selected elements.

4

Send

The structured payload flows directly to your AI client via MCP, or copies to your clipboard.

Unprecedented Context

Stop pasting screenshots. PointDev serialises the true state of your UI into a token-budgeted JSON payload.

  • DOM & Layout

    Element subtree, ancestor chain, bounding box, stacking context, and viewport dimensions.

  • Computed CSS

    Matched rules with specificity, inherited styles, pseudo-states, and active media queries.

  • Framework Components

    React, Vue, Svelte, Angular, and Blazor component names, props, and state.

capture.json
"element": {
  "tagName": "BUTTON",
  "classes": ["bg-brand", "hover:bg-brand-dark"],
  "framework": {
    "type": "React",
    "name": "PrimaryButton",
    "props": { "onClick": "ƒ()" }
  },
  "computedStyle": {
    "background-color": "rgb(108, 92, 231)",
    "border-radius": "8px"
  },
  "layout": {
    "width": 120,
    "height": 44
  }
}

Multi-Session Support

Run multiple AI client instances simultaneously, each paired to a different browser window. The extension discovers all running sessions automatically.

Claude Code - Frontend

Native MCP Tools

Exposes standard MCP tools directly to your AI client. AI can proactively request context.

  • pointdev_inspect Get recent capture
  • pointdev_request_select Prompt user selection
  • pointdev_session Manage session info

Quick Start

Get up and running in four steps.

1 Configure your AI client

Add the MCP server to Claude Code with a single command:

Terminal
claude mcp add --scope user --transport stdio pointdev -- sh -c 'docker pull -q ghcr.io/npm-labs/pointdev-mcp:latest >/dev/null 2>&1; exec docker run -i --rm -v "$HOME/.pointdev:/home/app/.pointdev" -v /var/run/docker.sock:/var/run/docker.sock:ro -p 127.0.0.1:0:52140 ghcr.io/npm-labs/pointdev-mcp:latest'

This works for multiple AI client instances - each gets a unique port automatically.

Manual MCP config
~/.claude.json or .mcp.json
{
  "mcpServers": {
    "pointdev": {
      "command": "sh",
      "args": ["-c", "docker pull -q ghcr.io/npm-labs/pointdev-mcp:latest >/dev/null 2>&1; exec docker run -i --rm -v \"$HOME/.pointdev:/home/app/.pointdev\" -v /var/run/docker.sock:/var/run/docker.sock:ro -p 127.0.0.1:0:52140 ghcr.io/npm-labs/pointdev-mcp:latest"]
    }
  }
}

2 Install the native messaging host

This enables the browser extension to discover running MCP server sessions (one-time setup):

Terminal
docker run --rm -v "$HOME/.pointdev:/home/app/.pointdev" ghcr.io/npm-labs/pointdev-mcp:latest --install-native-host

3 Install the browser extension

Install from the Chrome Web Store.

4 Use it

  1. 1. Start an AI client session - the MCP server starts automatically
  2. 2. The extension discovers the session and connects - look for the session name in the popup
  3. 3. Press Alt+Shift+P (or click the toolbar icon) to activate the picker
  4. 4. Click elements to select them - they get numbered badges. Right-click a selected element to select its parent instead
  5. 5. Press Enter to open the prompt panel
  6. 6. Type a prompt, then Copy to Clipboard or Send to AI

Your AI client can also trigger selection directly using the pointdev_request_select MCP tool.

How to Use PointDev

Multi-session workflows, session pairing, and more.

Multi-Session Support

Run multiple AI client instances simultaneously, each paired to a different browser window. No per-instance setup needed - every session uses the same MCP config.

Session Pairing

Scenario What Happens
One session running Auto-pairs to your active browser window. No action needed.
Multiple sessions Open the popup, click the dropdown, and pick which session this window talks to.
AI requests an element If paired, the picker activates automatically. If not, a toast notification appears - click Accept in the right window.

Renaming Sessions

Sessions auto-name based on your AI client and project (e.g. "Claude Code - MyProject"). Rename them any of three ways:

Method Example
In the popup Click the session name to edit it inline
Ask your AI "Call yourself Frontend" - uses the pointdev_session tool
At startup -e POINTDEV_SESSION_NAME=Frontend Docker env var

Visual Indicators

Each session gets an auto-assigned colour that appears across the UI:

  • Popup – Coloured dot next to the session name
  • Picker – Floating pill at the top-right showing the session name during capture
  • Prompt panel – "Sending to" indicator showing the paired session
  • Toast notifications – Colour stripe when an unpaired session requests element selection

Asking Your AI About Its Session

  • "What session are you?" – your AI calls pointdev_session and tells you its name, ID, and port
  • "Call yourself Backend" – your AI renames the session, and the extension updates everywhere

MCP Tools

Tool Description
pointdev_inspect Returns the most recent element capture
pointdev_request_select Prompts the user to select an element in the browser, waits for the result
pointdev_session Get or set the session name for this PointDev instance

What Gets Captured

Category Details
DOM Element subtree, ancestor chain to nearest layout boundary, sibling context
CSS Computed styles (non-default only), matched rules with selectors/sources/specificity, inherited styles, pseudo-state rules
Framework CSS framework detection (Tailwind, CSS Modules, styled-components, Emotion, vanilla) with version
Components React, Vue, Svelte, Angular, and Blazor component names, props, and state
Layout Bounding box, containing block, stacking context, viewport dimensions, active media queries
Diagnostics Overflow, z-index conflicts, content truncation, invisible elements, broken stacking contexts
Responsive Optional multi-breakpoint CSS diff capture

All data is serialised to a token-budgeted JSON payload with progressive truncation to fit within AI context limits.

Configuration

MCP Server

The server listens on port 52140 inside the container. With Docker's ephemeral port mapping (-p 127.0.0.1:0:52140), each instance gets a unique host port automatically.

Setting Method
Pin a specific port -p 127.0.0.1:12345:52140
Override reported port POINTDEV_PORT=12345 env var
Name the session POINTDEV_SESSION_NAME=Frontend env var

Extension

Open the extension options page (right-click toolbar icon > Options) to configure:

  • Capture features - Toggle diagnostics, pseudo-state CSS, component detection, inherited CSS
  • Responsive breakpoints - Choose preset or custom breakpoints for responsive capture

Status Bar Integration (Claude Code on macOS)

When running multiple Claude Code instances, add the PointDev session name to your status bar so you always know which session each terminal is paired with.

Status Bar Preview
🔍 claude-code-3 📁 ~/Dev/PointDev 🌿 main 🤖 Opus 4.6

The MCP config in the Quick Start already includes the required Docker label. Add the following snippet to your ~/.claude/statusline.sh after your git branch detection:

Show snippet
~/.claude/statusline.sh
# ---- PointDev session discovery ----
# Requires: --label pointdev.claude-pid=$PPID in the docker run command.
pointdev_session=""

_pd_claude_ancestor=""
_pd_pid=$$
while [ -n "$_pd_pid" ] && [ "$_pd_pid" -gt 1 ] 2>/dev/null; do
  _pd_comm=$(ps -o comm= -p "$_pd_pid" 2>/dev/null | xargs)
  case "${_pd_comm##*/}" in claude) _pd_claude_ancestor="$_pd_pid"; break;; esac
  _pd_pid=$(ps -o ppid= -p "$_pd_pid" 2>/dev/null | tr -d ' ')
done

if [ -n "$_pd_claude_ancestor" ] && command -v docker >/dev/null 2>&1; then
  _pd_port=$(docker ps --filter "label=pointdev.claude-pid=$_pd_claude_ancestor" \
    --format '{{.Ports}}' 2>/dev/null | grep -o ':[0-9]*->' | head -1 | tr -dc '0-9')
  if [ -n "$_pd_port" ]; then
    for _pd_file in "$HOME"/.pointdev/sessions/*.json; do
      [ -f "$_pd_file" ] || continue
      _pd_name=$(jq -r '.name // empty' "$_pd_file" 2>/dev/null)
      _pd_sport=$(jq -r '.port // empty' "$_pd_file" 2>/dev/null)
      if [ "$_pd_sport" = "$_pd_port" ]; then
        pointdev_session="$_pd_name"
        break
      fi
    done
  fi
fi

Then add the render line at the start of your line 1 output:

if [ -n "$pointdev_session" ]; then
  printf '🔍 \033[38;5;208m%s\033[0m  ' "$pointdev_session"
fi

Requires jq and docker on the host. The indicator appears when a PointDev session is active and disappears when it stops.

Troubleshooting

Docker on Windows — port discovery fails

On Windows Docker Desktop, the MCP server may fail to auto-discover its host port due to Docker socket permission differences in the WSL2 backend. You'll see "Docker port discovery failed" in the server logs and the extension will show "disconnected".

Option 1: Enable the TCP Docker API:

  1. 1. Open Docker DesktopSettingsGeneral
  2. 2. Enable "Expose daemon on tcp://localhost:2375 without TLS"
  3. 3. Restart your AI client session

Option 2: Use a fixed port and POINTDEV_PORT env var:

docker run -i --rm -e POINTDEV_PORT=52140 -v "$env:USERPROFILE\.pointdev:/home/app/.pointdev" -p 127.0.0.1:52140:52140 ghcr.io/npm-labs/pointdev-mcp:latest

This issue only affects Windows. macOS and Linux work without extra configuration.

Extension shows "No session"
  1. 1. Make sure at least one MCP server is running
  2. 2. Verify the native messaging host binary exists in ~/.pointdev/native-host/
  3. 3. Re-run the native host install if needed (see Quick Start step 2)
  4. 4. Check the service worker console (chrome://extensions → PointDev → Inspect views: service worker)
Extension shows session but "disconnected"
  1. 1. The MCP server may have stopped — check if the session file still exists in ~/.pointdev/sessions/
  2. 2. Try restarting the AI client session
  3. 3. Check the extension popup — click the session dropdown and re-pair if needed