Component Context Picker

Component Context Picker helps developers understand any rendered UI element and bring useful implementation context into their AI-assisted workflow. Activate the picker, select an element on the current page, and copy context to your clipboard. The generated output can include the selected element’s HTML, detected framework, component hierarchy, the props (when available) and state of the nearest custom component that owns the selected UI Supported frameworks: • React • Vue • Angular • Plain HTML For React and Vue, Component Context Picker can also recognize supported UI libraries and distinguish library components from your application’s custom components. This helps prioritize the component context you can actually modify. Supported library detection includes: • React: MUI, Chakra UI, Mantine, and Ant Design • Vue: Vuetify, PrimeVue and Element Plus Customize what is copied in the extension settings: • Component context • Selected HTML • Props and state • Picker tooltip • Library internals visibility You can also copy an image of the selected interface together with its component context. Component Context Picker runs only after you explicitly activate it on the current tab. Webpage content, HTML, props, state, screenshots, and clipboard contents stay local in your browser and are never sent to analytics services. Anonymous analytics are limited to successful copy events and help measure feature adoption and reliability. They never include page URLs, page content, screenshots, clipboard data, or browsing history.