Item logo image for Whipped

Whipped

5.0(

1 rating

)
Item media 2 (screenshot) for Whipped
Item media 1 (screenshot) for Whipped
Item media 2 (screenshot) for Whipped
Item media 1 (screenshot) for Whipped
Item media 1 (screenshot) for Whipped
Item media 2 (screenshot) for Whipped

Overview

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

Details

  • Version
    1.0.0
  • Updated
    June 8, 2026
  • Offered by
    nxnom
  • Size
    84.39KiB
  • Languages
    English
  • Developer
    Email
    ebrain.ebrain@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data. To learn more, see the developer’s privacy policy.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Related

Agentation Vue

5.0

Turn UI annotations into coding-agent instructions. Click any element, add a note, and paste into any AI tool.

AI Code Preview

5.0

Preview, copy, and download code from AI responses. Supports HTML+CSS+JS, React components, and Vue single-file components.

React Click To Component

3.7

React Click To Component, a Chrome extension to open a React component in the editor by clicking on it.

Claude Code Inspect

0.0

Click any element on any page and prompt Claude Code about it — instantly, with full context.

UIDrop — Design System Extractor for AI

5.0

Extract any site's colors, fonts, spacing & components in one click. Sends the design system to your AI coding assistant.

Prompt Picker - Pick element, annotate and get prompt

5.0

Pick and annotate elements on any web page, then copy as structured prompts for AI coding agents like Claude Code, Codex & Cursor.

Element Select - AI Agent Annotation Tool

5.0

Annotate web elements and generate structured feedback for AI coding agents

React Inspector

3.5

The Inspector launch with Ctrl+Shift+X (Command+Shift+X on Mac). You can detect and open the React component source code easily.

Click To Component

0.0

Click a component in your browser to instantly open the source in VS Code, WebStorm, Cursor, TRAE, etc.

Web Path Picker

5.0

Click any element on any website to copy its XPath, CSS selector, and route for AI coding agents (Cursor, Claude Code, Codex).

Clasp-it

5.0

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

CopyUI - HTML, CSS & Tailwind Inspector

5.0

Stop coding from scratch. Copy any element of any website and export it to Tailwind CSS, JSX or clean CSS in one click.

Agentation Vue

5.0

Turn UI annotations into coding-agent instructions. Click any element, add a note, and paste into any AI tool.

AI Code Preview

5.0

Preview, copy, and download code from AI responses. Supports HTML+CSS+JS, React components, and Vue single-file components.

React Click To Component

3.7

React Click To Component, a Chrome extension to open a React component in the editor by clicking on it.

Claude Code Inspect

0.0

Click any element on any page and prompt Claude Code about it — instantly, with full context.

UIDrop — Design System Extractor for AI

5.0

Extract any site's colors, fonts, spacing & components in one click. Sends the design system to your AI coding assistant.

Prompt Picker - Pick element, annotate and get prompt

5.0

Pick and annotate elements on any web page, then copy as structured prompts for AI coding agents like Claude Code, Codex & Cursor.

Element Select - AI Agent Annotation Tool

5.0

Annotate web elements and generate structured feedback for AI coding agents

React Inspector

3.5

The Inspector launch with Ctrl+Shift+X (Command+Shift+X on Mac). You can detect and open the React component source code easily.

Google apps