diff --git a/README.md b/README.md index cf161ec..cda304e 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,27 @@ function App() { The toolbar appears in the bottom-right corner. Click to activate, then click any element to annotate it. +### Vite plugin + +For Vite projects, you can use the plugin to inject Agentation automatically without modifying your app code: + +```bash +npm install vite-plugin-agentation -D +``` + +```ts +// vite.config.ts +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import agentation from 'vite-plugin-agentation' + +export default defineConfig({ + plugins: [react(), agentation()] +}) +``` + +The plugin only runs in dev mode and excludes itself from production builds. + ## Features - **Click to annotate** – Click any element with automatic selector identification diff --git a/_package-export/README.md b/_package-export/README.md index cf161ec..cda304e 100644 --- a/_package-export/README.md +++ b/_package-export/README.md @@ -25,6 +25,27 @@ function App() { The toolbar appears in the bottom-right corner. Click to activate, then click any element to annotate it. +### Vite plugin + +For Vite projects, you can use the plugin to inject Agentation automatically without modifying your app code: + +```bash +npm install vite-plugin-agentation -D +``` + +```ts +// vite.config.ts +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import agentation from 'vite-plugin-agentation' + +export default defineConfig({ + plugins: [react(), agentation()] +}) +``` + +The plugin only runs in dev mode and excludes itself from production builds. + ## Features - **Click to annotate** – Click any element with automatic selector identification diff --git a/_package-export/example/src/app/install/page.tsx b/_package-export/example/src/app/install/page.tsx index e23c810..2267587 100644 --- a/_package-export/example/src/app/install/page.tsx +++ b/_package-export/example/src/app/install/page.tsx @@ -282,6 +282,31 @@ function App() { /> +
+

Vite plugin (alternative)

+

+ For Vite projects, you can use the Vite plugin which automatically + injects Agentation during development without modifying your app code. +

+ +

+ Add the plugin to your vite.config.ts: +

+ +

+ The plugin only runs in dev mode and automatically excludes itself from production builds. +

+
+

Requirements