@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

``bash
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

$3

`ts
// 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/'],
}),
],
});
`

$3

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

$3

`js
// 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:
`tsx
Submit Form

`

After:
`tsx
Submit Form

`

Configuration

$3

`typescript
{
// 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