Media
2 items
Description
Click any UI element to capture its component + source location, then copy a ready-to-paste prompt for your AI coding agent. Whipped is a developer tool for AI-assisted coding. Click any UI element on a web page to instantly capture its React component name, source file location, and DOM context — then paste the generated prompt directly into your AI coding agent. HOW IT WORKS 1. Click the Whipped toolbar icon to enter select mode (icon turns color). 2. Hover over the page — elements highlight as you move. 3. Click the element you want to describe. 4. A prompt panel appears with a structured YAML block ready to copy. 5. Paste it into Claude Code, Codex, Cursor, or any AI agent. The generated prompt includes: • React component name (e.g. "CardDetailHeader") • Source file path resolved via source maps (e.g. "src/components/Card/CardDetailHeader.tsx") • DOM structure of the clicked element and its surroundings • Page URL and selector path for precise context WORKS WITH • React (reads fiber internals — works even on minified production builds via source maps) • Angular (Ivy debug API + emulated encapsulation hashes) • Any other framework or plain HTML (falls back to DOM context) PRIVACY Everything runs locally in your browser. No data is sent anywhere — no server, no analytics, no tracking. The extension never reads page content except during an active select session triggered by you. PERMISSIONS • activeTab — accesses the current tab only when you click the toolbar icon • scripting — injects the element inspector into the active tab on demand OPEN SOURCE Source code is available at https://github.com/nxnom/whipped-extension