# Requirements

## Required Environment Variables

#### Intelligems Organization Id

Visit [app.intelligems.io](https://app.intelligems.io). Your **organization ID** is located on the *settings* page.

```
INTELLIGEMS_ORG_ID=<Intelligems-Organization-Id>
SHOPIFY_STOREFRONT_ACCESS_TOKEN=<Storefront-API-Token>
```

### Vite Configuration

Add the `intelligemsVitePlugin` to your `vite.config.ts` plugins array. This plugin is required for the Intelligems Preview Mode widget to render and function correctly in Hydrogen apps. This plugin should be placed at the end / near the end of the plugins array, after the hydrogen and oxygen plugins.

#### Why is this needed?

The `oxygen()` Vite plugin from `@shopify/mini-oxygen` sets `resolve.conditions` to `["worker", "workerd"]` globally, which causes client-side dependencies like `@emotion/*` and `@mui/*` to resolve server/edge build variants instead of browser builds. This breaks CSS injection and component interactivity in the Preview Mode widget.

The `intelligemsVitePlugin` moves these conditions to `ssr.resolve.conditions` where they belong, so that only server-side code uses worker builds while client-side code correctly resolves browser builds.

#### Is this safe?

The plugin has zero runtime cost — it runs once during Vite config resolution. Client-side code runs in the browser, not a worker, so it should never have had `worker` conditions applied. SSR behavior is completely unaffected since the worker conditions are preserved under `ssr.resolve.conditions`.

```typescript
import { defineConfig } from "vite";
import { hydrogen } from "@shopify/hydrogen/vite";
import { oxygen } from "@shopify/mini-oxygen/vite";
import { vitePlugin as remix } from "@remix-run/dev";
import tsconfigPaths from "vite-tsconfig-paths";
import { intelligemsVitePlugin } from "@intelligems/headless/hydrogen";

export default defineConfig({
  plugins: [
    hydrogen(),
    oxygen(),
    remix({
      presets: [hydrogen.preset()],
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
        v3_lazyRouteDiscovery: true,
      },
    }),
    tsconfigPaths(),
    intelligemsVitePlugin(),
  ],
  ssr: {
    optimizeDeps: {
      include: ["@intelligems/headless/hydrogen"],
    },
  },
});
```