mcp-pointer

🥈Silver

MCP Pointer lets you point at DOM elements in a browser to guide AI coding tools. Operations teams use it to streamline agentic coding workflows by allowing AI to see and interact with the same UI elements as humans. It connects to browser-based applications and integrates with agentic coding tools like Claude Code.

569530Updated Today

Intermediate30min to implementautomation

Saves ~90 min per use

Quick InstallView Source

git clone https://github.com/etsd-tech/mcp-pointer.git

Works with:

Claude

Overview

About This Skill

https://github.com/etsd-tech/mcp-pointer

How to Use

1. **Install MCP Pointer**: Add the MCP Pointer extension to your browser (Chrome/Firefox) and enable it in your agentic coding tool (e.g., Claude Code). 2. **Navigate to Target Page**: Open the web application you want to inspect in your browser and ensure it's fully loaded. 3. **Point to Element**: Use your mouse to hover over the UI element you want to inspect. MCP Pointer will automatically capture its XPath/CSS selector and DOM properties. 4. **Generate Code**: Ask the AI tool to analyze the element and suggest improvements or automation code. Include the element's role (e.g., 'submit button') in your prompt. 5. **Test and Refine**: Use the AI-generated code snippet in your browser console or integrate it into your application. Iterate based on test results.

Use Cases

Quickly analyze the styling and attributes of a specific DOM element on a webpage.

Integrate AI tools to provide contextual insights about selected elements in real-time.

Facilitate debugging by extracting detailed information about React components directly from the browser.

Enhance web scraping tasks by obtaining structured data from targeted DOM elements effortlessly.

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/etsd-tech/mcp-pointer

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Use MCP Pointer to inspect the [UI_ELEMENT] in the browser at [URL]. Identify the XPath or CSS selector for this element and explain its role in the workflow. Then, suggest a code change to [IMPLEMENT_FUNCTIONALITY] using this element. Include a snippet of the modified code and test it in the browser console.

Example Output

In the browser at https://app.example.com/dashboard, I inspected the **'Export CSV'** button (XPath: `//button[contains(text(), 'Export CSV')]`) which triggers a file download. This button is part of a data export workflow that currently fails when users have >10,000 records.

**Problem Identified:** The backend API truncates results at 10,000 records without warning, causing silent failures.

**Suggested Fix:** Modify the frontend to:
1. Show a warning modal when >10,000 records are selected
2. Add a loading spinner during export
3. Update the API call to handle pagination

**Code Change:**
```javascript
// In Dashboard.jsx
const handleExport = async () => {
  if (selectedRecords.length > 10000) {
    setShowWarning(true);
    return;
  }
  setIsLoading(true);
  try {
    const response = await fetch(`/api/export?ids=${selectedRecords.join(',')}`);
    const blob = await response.blob();
    saveAs(blob, 'export.csv');
  } finally {
    setIsLoading(false);
  }
};
```

**Test Steps:**
1. Open Chrome DevTools (F12)
2. Run `document.evaluate('//button[contains(text(), "Export CSV")]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.click()`
3. Verify the warning modal appears when selecting >10k records
4. Confirm the export completes successfully for small datasets