PinPoint 🎯

Turn clicks into context to supercharge your coding workflow.

PinPoint is a Chrome extension that captures DOM elements from any webpage and seamlessly integrates them with Cursor IDE through the Model Context Protocol (MCP). Perfect for web developers who want to quickly analyze, debug, or work with specific elements from live websites.

✨ Features

🎯 Visual Element Selection

Hover highlighting with neon green outlines
Crosshair cursor when selection mode is active
Click to capture any DOM element
Visual feedback with element animations

🔊 Audio Feedback

5 different sound effects (Laser, Beam, Coin, Jump, Thud)
Customizable audio - enable/disable and choose your preferred sound
Satisfying click feedback when capturing elements

⌨️ Keyboard Shortcuts

Quick toggle selection mode with Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
No need to open popup for quick on/off switching
Customizable shortcuts in Chrome's extension settings

🎨 Neobrutalist Design

Bold, modern UI with thick borders and sharp shadows
Electric Lime (#00FF41) primary color
Neon Pink (#FF0080) accent color
Pure Black (#000000) and Off-White (#FAFAFA) contrast

🔔 Smart Notifications

Slide-in toast notifications when elements are captured
Configurable notifications - can be disabled in settings
Neobrutalist styling with hover effects

🚀 Cursor IDE Integration

MCP (Model Context Protocol) integration
Direct element analysis in Cursor
Markdown-formatted element data for easy reading
Seamless workflow from web to code

🛠️ Installation

Prerequisites

Chrome browser (or Chromium-based browser)
Node.js (v14 or higher)
Cursor IDE (for MCP integration)

1. Clone the Repository

git clone https://github.com/yourusername/PinPoint.git
cd PinPoint

2. Install Dependencies

npm install

3. Configure Environment

cp env.example .env

Edit .env to set your preferred mode:

MODE=MCP
CURSOR_AGENT_PATH=/path/to/cursor-agent

4. Start the Bridge Server

# For MCP mode (recommended)
MODE=MCP npm start

# For CLI mode
npm run dev

The server will start on http://localhost:5050 by default.

5. Load the Chrome Extension

Open Chrome and go to chrome://extensions/
Enable Developer mode (toggle in top-right)
Click Load unpacked
Select the extension/ folder from this repository

🎮 Usage

Basic Workflow

Open PinPoint by clicking the extension icon in your toolbar
Configure settings (optional):
- Set server URL (default: http://localhost:5050/element)
- Choose your preferred sound effect
- Enable/disable notifications
Toggle Selection Mode to ON
Navigate to any webpage you want to analyze
Hover over elements to see green highlighting
Click any element to capture it
Open Cursor IDE and use the captured element data

Keyboard Shortcuts

Action	Windows/Linux	Mac
Toggle Selection Mode	`Ctrl+Shift+P`	`Cmd+Shift+P`

Cursor IDE Integration

MCP Mode (Recommended)

Ensure PinPoint bridge is running with MODE=MCP
In Cursor, the getLatestElement tool will be available
Ask Cursor to analyze the latest captured element:
```
What element did I just capture with PinPoint?
```
Cursor will return detailed markdown-formatted element data

CLI Mode

Run bridge with MODE=CLI
Captured elements are saved to last-element.json
Use Cursor's CLI integration to analyze the file

⚙️ Configuration

Extension Settings

Setting	Description	Default
Selection Mode	Enable/disable element selection	Off
Slide-in Notifications	Show toast notifications	On
Sound Effects	Audio feedback for captures	On
Sound Type	Choose from 5 sound effects	Laser
Subscription Popups	Optional subscription prompts	On

Server Configuration

Environment Variable	Description	Default
`MODE`	Server mode: `CLI` or `MCP`	`CLI`
`CURSOR_AGENT_PATH`	Path to Cursor agent executable	Auto-detect
`PORT`	Server port	`5050`

🔧 Technical Details

Architecture

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Chrome        │    │   Bridge        │    │   Cursor        │
│   Extension     │───▶│   Server        │───▶│   IDE           │
│                 │    │   (Node.js)     │    │   (MCP)         │
└─────────────────┘    └─────────────────┘    └─────────────────┘

Data Flow

User clicks element on webpage
Content script captures element data (HTML, styles, selector)
Bridge server receives data via HTTP POST
MCP server makes data available to Cursor
Cursor IDE can query and analyze the element

Captured Element Data

Each captured element includes:

HTML structure (outerHTML)
Text content (innerText)
CSS selector (unique identifier)
Computed styles (all CSS properties)
Page context (URL, timestamp)
Custom prompt (user-defined)

🎨 Design System

PinPoint uses a Neobrutalist design system with:

Electric Lime (#00FF41) - Primary brand color
Pure Black (#000000) - Strong contrast
Off-White (#FAFAFA) - Clean background
Neon Pink (#FF0080) - Accent color for CTAs

Design Principles

Thick borders (3px solid)
Sharp shadows (6px 6px 0px)
No rounded corners
Bold typography
High contrast

🔒 Security

⚠️ Important Security Notes:

This is a local development tool only
Do not expose the bridge server to the public internet
The server runs on localhost by default
No authentication is implemented (by design)
Use only on trusted networks

🚀 Advanced Features

Subscription System (Optional)

Smart frequency calculation based on usage
Usage tracking (selection time, captures, sessions)
Respectful popup timing - dormant until actively used
Multiple subscription options (Substack, Buy Me a Coffee, etc.)

State Persistence

Settings saved across browser sessions
Selection mode state persists across page navigations
User preferences maintained automatically

Error Handling

Graceful fallbacks for network issues
Console logging for debugging
User-friendly error messages

🐛 Troubleshooting

Common Issues

Extension not working:

Check if bridge server is running
Verify server URL in extension settings
Check browser console for errors

MCP not connecting:

Ensure MODE=MCP in environment
Check Cursor's MCP configuration
Verify server is running on correct port

No sound effects:

Check if sound is enabled in settings
Verify browser allows audio
Try different sound types

Debug Mode

Enable debug logging by opening browser DevTools and checking the Console tab for PinPoint messages.

🤝 Contributing

We welcome contributions! Please:

Fork the repository
Create a feature branch
Make your changes
Test thoroughly
Submit a pull request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Cursor IDE for the amazing MCP protocol
Chrome Extensions API for the powerful browser integration
Neobrutalist design community for inspiration

📞 Support

Issues: GitHub Issues
Discussions: GitHub Discussions
Website: pinpoint.vibecode.nyc

Made with ❤️ for the developer community

Turn clicks into context. Supercharge your coding workflow.

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
Neobrutalist Design System		Neobrutalist Design System
extension		extension
LICENSE		LICENSE
README.md		README.md
bridge.js		bridge.js
env.example		env.example
last-element.json		last-element.json
package-lock.json		package-lock.json
package.json		package.json
simple-mcp.js		simple-mcp.js

License

43kNot/PinPoint

Folders and files

Latest commit

History

Repository files navigation