Interactive Element Selection
Debugging
Also known as:UI element interaction,component selection,element @-mentions
Allows selecting specific UI elements from a rendered web application and sending them to the AI for context-aware code generation or modification.
Agent Support
| Agent | Support Level | Notes | Actions |
|---|---|---|---|
| Windsurf | ✅ Full Support | Live web preview feature enables selecting UI elements for context-aware coding, improving UI development workflows. | |
| Claude Code | ❌ No Support | - | |
| Cursor | ❌ No Support | - | |
| GitHub Copilot | ❌ No Support | GitHub Copilot does not have UI preview or element selection capabilities. It operates purely within the code editor and doesn't interact with rendered applications or allow selecting UI elements to reference in prompts. |
Frequently Asked Questions
How do I select an element in the web preview?▼
To select an element, click on it in the live web preview, and use the 'Send element' button or similar feature to send it to the AI as context.
Can I select multiple elements at once?▼
Depending on the IDE, you may be able to select multiple elements, but typically, selection is done one element at a time for precise context.
What types of elements can I select?▼
You can select most HTML elements or components from frameworks like React or Vue, but the exact types depend on the IDE’s implementation.
How does the AI use the selected element?▼
The AI uses the selected element as context to generate or modify code related to that element, such as updating its styles, adding event listeners, or refactoring its structure.
Can I select elements from iframes?▼
Selecting elements from iframes may not be supported due to cross-origin restrictions, but some IDEs might offer workarounds or specific configurations.
Does the selection work with dynamic content?▼
Yes, the selection works with dynamic content, but the AI’s ability to handle dynamically generated elements may vary based on the framework and the IDE’s capabilities.
How do I deselect an element?▼
To deselect an element, you can typically click outside the element or use a 'Clear selection' option in the IDE.
Can I select elements in the system browser preview?▼
Element selection is usually tied to the IDE’s preview, but some IDEs may offer integration with the system browser for selection.
Does the selection persist across sessions?▼
Element selections are typically temporary and do not persist across sessions, as they are meant for immediate context in coding tasks.
How do I customize the element selection behavior?▼
Customization options for element selection, if available, can usually be found in the IDE’s settings or preferences, allowing you to adjust how selections are handled or displayed.
Related Features
Console Error Integration
Captures JavaScript console errors from the live web preview and sends them to the AI for analysis, debugging, or automated code fixes.
DebuggingLive Web Preview
Renders a locally hosted web application within the IDE, allowing developers to view and interact with the app's UI without leaving the coding environment.
DebuggingClaude 4 Support
Native support for Claude 4 family models from Anthropic for advanced code generation and analysis.
Model SupportReady to Compare Agents?
See how different AI coding agents stack up for Interactive Element Selection and other features. Make an informed decision based on your specific needs.