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 |
|---|---|---|---|
| Cursor | ✅ Full Support | Cursor 2.2 introduced a Visual Editor with drag-and-drop repositioning, inline color pickers, and grid/flexbox layout controls. Developers can click any element in the live preview and directly manipulate its styles, with AI generating the corresponding code changes. | |
| Devin Desktop | ✅ Full Support | Previews support selecting elements of the running web app and sending them to the agent. | |
| OpenAI Codex | ✅ Full Support | In the built-in browser, Annotate mode lets you click an element or drag to select an area, leave a comment, and ask the agent to address it. | |
| Aider | ❌ No Support | Aider is a terminal-only tool with no visual UI or ability to select interactive elements from a web or desktop interface. | |
| Claude Code | ❌ No Support | - | |
| Devin | ❌ No Support | Devin can interact with web UIs via its cloud browser (clicking, filling forms), but this is for task completion purposes, not a visual UI element selection feature for developers to select elements to modify. | |
| 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. | |
| Google Jules | ❌ No Support | Jules is an asynchronous agent working in a cloud sandbox. It has no visual UI element selection capability. | |
| Replit Agent | ❌ No Support | Replit Agent does not support visual UI element selection. Users interact with the agent via chat, not by clicking on rendered UI elements. | |
| Zed AI | ❌ No Support | Zed AI does not support visual UI element selection. It is a code editor without a built-in browser or visual preview panel. | |
| Cline | ❓ Unknown | Not documented: the full official documentation (https://docs.cline.bot/llms-full.txt) was searched on 2026-09-30 without finding this capability. This does not mean the tool lacks it. | |
| Gemini CLI | ❓ Unknown | Not documented: the full official documentation (https://www.geminicli.com/llms.txt) was searched on 2026-09-30 without finding this capability. This does not mean the tool lacks it. | |
| Google Antigravity | ❓ Unknown | Not documented: the full official documentation (https://antigravity.google/llms.txt) was searched on 2026-09-30 without finding this capability. This does not mean the tool lacks it. The /browser subagent can inspect DOM elements itself, but selecting elements for the agent is not described. | |
| Kiro | ❓ Unknown | Not documented: the full official documentation (https://kiro.dev/llms.txt) was searched on 2026-09-30 without finding this capability. This does not mean the tool lacks it. | |
| OpenCode | ❓ Unknown | Not documented: the full official documentation (https://opencode.ai/docs/) was searched on 2026-09-30 without finding this capability. This does not mean the tool lacks it. |
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.
DebuggingLatest Claude Model Support
Native support for current-generation Anthropic Claude models (Claude 4.5 or later, such as Opus, Sonnet, Haiku, and Fable) for 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.