kulp-ai-tagger/README.md

Vite plugin for tagging React components

# Kulp AI Tagger - Vite Plugin

A Vite plugin that automatically tags React components with data attributes for AI-powered component identification and manipulation.

## Features

- Automatically adds `data-kulp-id` and `data-kulp-name` attributes to React components
- Skips Three.js Fiber and Drei elements (they don't need tagging)
- Extracts component content including text, placeholders, and class names
- Processes Tailwind CSS configuration for sandbox environments
- Watches for configuration changes and regenerates as needed

## Installation

```bash
npm install kulp-ai-tagger
```

## Usage

Add the plugin to your Vite configuration:

```typescript
// vite.config.ts
import { defineConfig } from 'vite';
import { componentTagger } from 'kulp-ai-tagger';

export default defineConfig({
  plugins: [
    componentTagger(),
    // ... other plugins
  ],
});
```

## Environment Variables

- `KULP_DEV_SERVER`: Set to `"true"` to enable sandbox mode with Tailwind config processing

## What it does

For each React component (JSX/TSX), the plugin adds:

- `data-kulp-id`: Unique identifier based on file path, line, and column
- `data-kulp-name`: Component name
- Legacy attributes for backward compatibility:
  - `data-component-path`
  - `data-component-line`
  - `data-component-file`
  - `data-component-name`
  - `data-component-content`

## Example

Input:
```jsx
<div className="container">
  <Button>Click me</Button>
</div>
```

Output:
```jsx
<div data-kulp-id="src/App.tsx:5:0" data-kulp-name="div" data-component-path="src/App.tsx" data-component-line="5" data-component-file="App.tsx" data-component-name="div" data-component-content="%7B%22text%22%3A%22Click%20me%22%2C%22className%22%3A%22container%22%7D" className="container">
  <Button data-kulp-id="src/App.tsx:6:2" data-kulp-name="Button" data-component-path="src/App.tsx" data-component-line="6" data-component-file="App.tsx" data-component-name="Button" data-component-content="%7B%22text%22%3A%22Click%20me%22%7D">Click me</Button>
</div>
```

## License

MIT