Whipped

About

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