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

npm install kulp-ai-tagger

Usage

Add the plugin to your Vite configuration:

// 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:

<div className="container">
  <Button>Click me</Button>
</div>

Output:

<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