Builder tools
Select Component
Select Component lets you click an element in the live preview and attach its source context to the chat. Elmony can then target the requested edit more precisely.
Use component selection
- Run the app and open Preview.
- Select the cursor icon labeled Select component. You can also use Ctrl + Shift + C on Windows/Linux or Command + Shift + C on macOS.
- Move over the preview and select the element you want to change.
- Confirm the selected component appears with the chat input.
- Describe the intended change and send the prompt.
Selection supplies context; it does not prevent the model from changing related files when the implementation requires it. Review the resulting diff and preview behavior.
Older or imported projects
Current official React/Vite and Expo starters include the component-inspection setup. Some older or imported projects do not. The previous App Details upgrade list is not shown in the current interface, so there is no upgrade button to run from that page.
A disabled selection button after the preview has fully loaded usually means the project is
missing its inspector integration. Vite projects use
@elmony/react-vite-component-tagger
and Expo projects use
@elmony/expo-metro-tagger.
Integrating these packages changes build configuration, so make the change in a branch or
version you can restore and follow the package's configuration requirements.
Troubleshooting
- Wait for the preview to finish loading; selection is disabled while the app starts.
- Restart the preview after changing Vite, Babel, Metro, or inspector configuration.
- Check the Console and Problems views for inspector initialization or build errors.
- Highly dynamic, canvas-rendered, cross-origin, or native-only UI may not expose the same source mapping as a normal React DOM component.