Clasp-it

Pick any webpage element and send its context to your AI editor via MCP

Clasp-it bridges your browser and your AI coding tool. Click any element on any webpage — Clasp-it captures everything your AI needs to make the right edit, and delivers it directly via MCP. HOW IT WORKS 1. Click the Clasp-it icon, then click any element on any webpage 2. Type your instruction — "fix the spacing", "change this to the primary style", "why is this overlapping?" 3. Switch to your AI editor and say "fix all recent picks using clasp-it" — it reads the context and edits your code No copy-pasting. No describing what you see. Just click and fix. WHAT GETS CAPTURED • Full HTML and CSS selector • Computed styles • React component props (auto-detected) • Console logs and network requests • Screenshot of the element (Pro) WORKS WITH • Claude Code • Cursor • Windsurf • Any MCP-compatible AI editor SETUP TAKES 2 MINUTES 1. Install this extension and sign up with your email (free) 2. Add the MCP server in your editor — one terminal command (see claspit.dev for instructions) That's it. Works on any webpage, including localhost. PLANS Free — 10 picks/day, DOM + computed styles Pro ($2.99/mo or $24/yr) — unlimited picks + screenshot, console, network, React props WHY THIS EXISTS AI coding tools are powerful, but they can't see what you see in the browser. Clasp-it fills that gap — click any element, and your AI editor instantly has the full context it needs.