elment

AI-powered element picker for React Native. Select UI elements in your app and let AI (Claude, GPT, etc.) modify the code.

Installation

``bash
npm install --save-dev elment
`

Quick Start

$3

In your babel.config.js:

`javascript
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'], // or your preset
plugins: [
process.env.NODE_ENV !== 'production' && [
'elment/babel-plugin',
{
autoWrapApp: true,
include: [
'View',
'Text',
'TouchableOpacity',
'TextInput',
'Image',
'ScrollView',
'Button',
],
},
],
].filter(Boolean),
};
};
`

$3

In a separate terminal:

`bash
npx elment-server --project ./your-app
`

$3

`bash
npx expo start --clear
`

$3

1. Tap the floating picker button in your app
2. Tap any element to select it
3. The element info is written to /tmp/element-picker-current.json

$3

`bash


Get the current element context

curl http://localhost:9848/context/text

Pipe to Claude CLI

curl -s http://localhost:9848/context/text | claude "make this button blue"
`

Manual Setup (Without Babel Plugin)

If you prefer manual control, wrap your app and elements:

`tsx
import {
ElementPickerProvider,
Trackable,
useElementPicker,
} from 'elment';

function App() {
return (




);
}

function MyContent() {
return (
name="MyButton"
source={{ fileName: 'App.tsx', lineNumber: 10, columnNumber: 0 }}
>

Press Me


);
}

function PickerToggle() {
const { isActive, toggle, isConnected } = useElementPicker();

return (

{isActive ? 'Picker ON' : 'Picker OFF'}
{isConnected ? 'Connected' : 'Disconnected'}

);
}
`

Babel Plugin Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| autoWrapApp | boolean | false | Auto-wrap App.tsx with ElementPickerProvider |
| include | string[] | See below | Elements to wrap with Trackable |
| exclude | string[] | [] | Elements to never wrap |
| wrapAll | boolean | false | Wrap all JSX elements |
| trackableImport | string | 'elment' | Import path for Trackable |

Default include elements:
- View, Text, TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback
- Pressable, TextInput, Image, ScrollView, FlatList, SectionList
- Button, Switch, Slider

Server API

$3

| Endpoint | Method | Description |
|----------|--------|-------------|
| /ping | GET | Health check |
| /current | GET | Current selected element |
| /context | GET | AI-formatted context (JSON) |
| /context/text | GET | AI-formatted context (plain text) |
| /history | GET | Selection history |
| /toggle | POST | Toggle picker mode |
| /activate | POST | Activate picker mode |
| /deactivate | POST | Deactivate picker mode |

$3

`bash
npx elment-server [options]

Options:
--project, -p Project root directory
--ws-port WebSocket port (default: 9847)
--http-port HTTP port (default: 9848)
--output, -o Output file (default: /tmp/element-picker-current.json)
`

Programmatic Server Usage

`typescript
import { startServer } from 'elment/server';

const server = startServer({
projectRoot: '/path/to/your/app',
wsPort: 9847,
httpPort: 9848,
outputFile: '/tmp/element-picker-current.json',
});

// Get current selection
const selection = server.getCurrentSelection();

// Get history
const history = server.getHistory(10);
`

Integration Examples

$3

`bash


One-liner to modify selected element


curl -s http://localhost:9848/context/text | claude "change the background color to blue"
`

$3

Read /tmp/element-picker-current.json to get the current selection and jump to the file.

$3

`typescript
import Anthropic from '@anthropic-ai/sdk';

async function modifyElement(instruction: string) {
const res = await fetch('http://localhost:9848/context');
const { formatted } = await res.json();

const anthropic = new Anthropic();
const message = await anthropic.messages.create({
model: 'claude-sonnet-4-20250514',
max_tokens: 4096,
messages: [{
role: 'user',
content: ${formatted}\n\n${instruction},
}],
});

console.log(message.content[0].text);
}

modifyElement('Make the button larger and add a shadow');
`

Exports

`typescript
// Components
import {
ElementPickerProvider,
Trackable,
withTracking,
HighlightOverlay,
MultiHighlightOverlay,
} from 'elment';

// Hooks
import { useElementPicker } from 'elment';

// Transports
import {
WebSocketTransport,
HTTPTransport,
} from 'elment';

// Server
import { startServer, ElementPickerServer } from 'elment/server';

// Types
import type {
ElementInfo,
ElementPickerProviderProps,
TrackableProps,
Transport,
} from 'elment';
``

Requirements

- React Native >= 0.72.0
- React >= 18.0.0
- react-native-gesture-handler >= 2.0.0
- Node.js >= 18.0.0 (for server)

License

MIT