> ## Documentation Index
> Fetch the complete documentation index at: https://buildwithglue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Plugin API Reference

> API reference for @getglue/next-plugin and @getglue/vite-plugin

# Plugin API Reference

Glue provides framework plugins for Next.js and Vite that enable compile-time JSX instrumentation.

## Installation

<Tabs>
  <Tab title="Next.js">
    ```bash theme={null}
    npm install --save-dev @getglue/next-plugin @getglue/jsx-runtime
    ```
  </Tab>

  <Tab title="Vite">
    ```bash theme={null}
    npm install --save-dev @getglue/vite-plugin @getglue/jsx-runtime
    ```
  </Tab>
</Tabs>

<Note>
  These are `devDependencies`. Glue only runs in development when `GLUE_INSTRUMENT=1` is set.
</Note>

## Basic Usage

<Tabs>
  <Tab title="Next.js">
    ```javascript next.config.js theme={null}
    const { withGlue } = require('@getglue/next-plugin');

    module.exports = withGlue({
      reactStrictMode: true,
      // your config
    });
    ```

    TypeScript:

    ```typescript next.config.ts theme={null}
    import { withGlue } from '@getglue/next-plugin';

    export default withGlue({
      reactStrictMode: true,
    });
    ```
  </Tab>

  <Tab title="Vite">
    ```typescript vite.config.ts theme={null}
    import { defineConfig } from 'vite';
    import react from '@vitejs/plugin-react';
    import glue from '@getglue/vite-plugin';

    export default defineConfig({
      plugins: [react(), glue()],
    });
    ```

    The `glue()` plugin should be placed after the React plugin.
  </Tab>
</Tabs>

## Configuration Options

### `enabled`

Type: `boolean`
Default: `process.env.NODE_ENV === 'development'` (Next.js) / `process.env.GLUE_INSTRUMENT === '1'` (Vite)

```javascript theme={null}
// Next.js
withGlue(config, { enabled: true })

// Vite
glue({ enabled: true })
```

### `attributePrefix`

Type: `string`
Default: `'data-agent'`

Customize the prefix for injected attributes (e.g., `data-agent-id` becomes `data-glue-id`).

```javascript theme={null}
// Next.js
withGlue(config, { attributePrefix: 'data-glue' })

// Vite
glue({ attributePrefix: 'data-glue' })
```

### `debugMode` (Next.js only)

Type: `boolean`
Default: `false`

Enable debug logging for the Next.js plugin.

## Compatibility

<Tabs>
  <Tab title="Next.js">
    * **Next.js:** 14.0.0+ (including 16+)
    * **React:** 17.0.0+
    * **Node.js:** 18.0.0+

    Next.js 16+ requires webpack mode. Use `glue run` which forces this automatically.
  </Tab>

  <Tab title="Vite">
    * **Vite:** 5.0.0+
    * **React:** 17.0.0+
    * **Node.js:** 18.0.0+
    * Works with both `@vitejs/plugin-react` (Babel) and `@vitejs/plugin-react-swc` (SWC)
  </Tab>
</Tabs>

## Examples

### Composing with Other Plugins

<Tabs>
  <Tab title="Next.js">
    ```javascript next.config.js theme={null}
    const { withGlue } = require('@getglue/next-plugin');
    const withBundleAnalyzer = require('@next/bundle-analyzer')({
      enabled: process.env.ANALYZE === 'true',
    });

    module.exports = withBundleAnalyzer(withGlue({
      reactStrictMode: true,
    }));
    ```

    Glue should typically be the innermost wrapper.
  </Tab>

  <Tab title="Vite">
    ```typescript vite.config.ts theme={null}
    import { defineConfig } from 'vite';
    import react from '@vitejs/plugin-react';
    import glue from '@getglue/vite-plugin';
    import tsconfigPaths from 'vite-tsconfig-paths';

    export default defineConfig({
      plugins: [react(), tsconfigPaths(), glue()],
    });
    ```
  </Tab>
</Tabs>

### Conditional Enabling

<Tabs>
  <Tab title="Next.js">
    ```javascript next.config.js theme={null}
    const { withGlue } = require('@getglue/next-plugin');
    const config = { reactStrictMode: true };

    module.exports = process.env.ENABLE_GLUE === 'true'
      ? withGlue(config)
      : config;
    ```
  </Tab>

  <Tab title="Vite">
    ```typescript vite.config.ts theme={null}
    import { defineConfig } from 'vite';
    import react from '@vitejs/plugin-react';
    import glue from '@getglue/vite-plugin';

    export default defineConfig({
      plugins: [
        react(),
        glue({ enabled: process.env.ENABLE_GLUE === 'true' }),
      ],
    });
    ```
  </Tab>
</Tabs>