@ai-guide/react-plugin

Build plugins (Babel, Vite, Webpack) for automatically tagging React components with data-ai attributes. Makes your components discoverable for AI Guide without manual tagging.

Installation

npm install @ai-guide/react-plugin --save-dev
# or
pnpm add -D @ai-guide/react-plugin
# or
yarn add -D @ai-guide/react-plugin

Features

• 🔧 Automatic data-ai attribute injection
• 🎯 Works with Babel, Vite, and Webpack
• ⚡ Zero runtime overhead
• 🎨 Customizable component patterns
• 📦 Small bundle size

Usage

Vite

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { aiGuidePlugin } from '@ai-guide/react-plugin/vite';

export default defineConfig({
  plugins: [
    react(),
    aiGuidePlugin({
      // Optional: customize which components to tag
      include: ['**/*.tsx', '**/*.jsx'],
      exclude: ['**/node_modules/**'],
    }),
  ],
});

Babel

// .babelrc or babel.config.js
{
  "plugins": [
    ["@ai-guide/react-plugin/babel", {
      // Optional configuration
    }]
  ]
}

Webpack

// webpack.config.js
const { aiGuideWebpackPlugin } = require('@ai-guide/react-plugin/webpack');

module.exports = {
  // ... other config
  plugins: [
    aiGuideWebpackPlugin({
      // Optional configuration
    }),
  ],
};

What It Does

The plugin automatically transforms your React components:

Before:

<button onClick={handleSubmit}>Submit Form</button>
<input type="email" placeholder="Email" />

After:

<button data-ai="submit-form" onClick={handleSubmit}>Submit Form</button>
<input data-ai="email-input" type="email" placeholder="Email" />

Configuration

Options

{
  // File patterns to include
  include?: string[];
  
  // File patterns to exclude
  exclude?: string[];
  
  // Custom naming strategy
  namingStrategy?: (element: Element) => string;
  
  // Only tag elements with specific attributes
  onlyWithDataAi?: boolean;
}

Best Practices

1. Use in development: Enable during development to help identify components
2. Commit tagged code: Commit the auto-tagged files so your production build includes them
3. Review generated tags: Check that generated data-ai values make sense
4. Combine with manual tagging: You can still manually add data-ai attributes for better control

How Naming Works

The plugin generates data-ai values based on:

1. Existing data-ai attributes (kept as-is)
2. Element text content (e.g., "Submit" → "submit")
3. Input types and names
4. ARIA labels
5. Component names

Related Packages

• @ai-guide/react - React component for AI Guide
• @ai-guide/cli - CLI alternative for scanning
• @ai-guide/types - Shared types

License

MIT