How to test
1. Install the Chrome extension
2. Click the extension icon and press "Start Selecting"
3. Click any element on this page
4. Add an annotation and copy in AI format
๐๏ธ Alpine Accordion
x-data ยท x-show ยท @click A Chrome extension that captures DOM elements and exports them in AI-optimized formats for use with Claude, Cursor, and other AI tools.
Yes! The extension reads the actual DOM, not the JavaScript framework state. Alpine.js, React, Vue โ it works the same way everywhere.
A local Node.js server (Fastify) that receives webhook payloads from the extension and pipes them into your terminal via clipboard, frontmost app, or tmux.
Yes. Both the Chrome extension and the Bridge Server are open source on GitHub.
๐ Alpine Cart
x-data is inline HTML
Alpine.js works by reading
x-data attributes.
The extension captures the actual rendered DOM elements โ same result.