Build plugins (Babel, Vite, Webpack) for auto-tagging React components for AI Guide
npm install @ai-guide/react-pluginBuild plugins (Babel, Vite, Webpack) for automatically tagging React components with data-ai attributes. Makes your components discoverable for AI Guide without manual tagging.
``bash`
npm install @ai-guide/react-plugin --save-devor
pnpm add -D @ai-guide/react-pluginor
yarn add -D @ai-guide/react-plugin
- 🔧 Automatic data-ai attribute injection
- 🎯 Works with Babel, Vite, and Webpack
- âš¡ Zero runtime overhead
- 🎨 Customizable component patterns
- 📦 Small bundle size
`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/'],
}),
],
});
`
`js`
// .babelrc or babel.config.js
{
"plugins": [
["@ai-guide/react-plugin/babel", {
// Optional configuration
}]
]
}
`js
// webpack.config.js
const { aiGuideWebpackPlugin } = require('@ai-guide/react-plugin/webpack');
module.exports = {
// ... other config
plugins: [
aiGuideWebpackPlugin({
// Optional configuration
}),
],
};
`
The plugin automatically transforms your React components:
Before:
`tsx`
After:
`tsx`
`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;
}
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 sensedata-ai
4. Combine with manual tagging: You can still manually add attributes for better control
The plugin generates data-ai values based on:data-ai
1. Existing attributes (kept as-is)
2. Element text content (e.g., "Submit" → "submit")
3. Input types and names
4. ARIA labels
5. Component names
- @ai-guide/react - React component for AI Guide
- @ai-guide/cli - CLI alternative for scanning
- @ai-guide/types` - Shared types
MIT