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
Select
Click elements on any webpage using the browser extension. Multi-select is fully supported.
Capture
PointDev extracts DOM, computed CSS, layout data, framework info, and diagnostics instantly.
Prompt
Add a text prompt describing what you want the AI to do with the selected elements.
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.
"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.
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:
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
{
"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):
docker run --rm -v "$HOME/.pointdev:/home/app/.pointdev" ghcr.io/npm-labs/pointdev-mcp:latest --install-native-host
3 Install the browser extension
4 Use it
- 1. Start an AI client session - the MCP server starts automatically
- 2. The extension discovers the session and connects - look for the session name in the popup
- 3. Press Alt+Shift+P (or click the toolbar icon) to activate the picker
- 4. Click elements to select them - they get numbered badges. Right-click a selected element to select its parent instead
- 5. Press Enter to open the prompt panel
- 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_sessionand 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.
🔍 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
# ---- 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. Open Docker Desktop → Settings → General
- 2. Enable "Expose daemon on tcp://localhost:2375 without TLS"
- 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. Make sure at least one MCP server is running
- 2. Verify the native messaging host binary exists in
~/.pointdev/native-host/ - 3. Re-run the native host install if needed (see Quick Start step 2)
- 4. Check the service worker console (
chrome://extensions→ PointDev → Inspect views: service worker)
Extension shows session but "disconnected"
- 1. The MCP server may have stopped — check if the session file still exists in
~/.pointdev/sessions/ - 2. Try restarting the AI client session
- 3. Check the extension popup — click the session dropdown and re-pair if needed