> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lucenthq.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Remix
> Install Lucent in a Remix v2 application.
**Scaffold + manual step.** Remix doesn't expose environment variables to
the browser automatically — you have to surface them via a loader. The CLI
writes the `LucentInit` component but leaves the loader wiring to you.
## Install with the CLI
```bash theme={null}
npx @lucenthq/cli init luc_pk_...
```
Pick **Remix** when prompted.
## Manual setup
`.env`:
```bash theme={null}
LUCENT_PUBLIC_KEY=luc_pk_...
```
`app/components/lucent-init.tsx`:
```tsx theme={null}
"use client";
import { useEffect } from "react";
import { LucentTracker } from "@lucenthq/sdk";
let tracker: LucentTracker | null = null;
export function LucentInit({ publicKey }: { publicKey: string }) {
useEffect(() => {
if (!tracker) {
tracker = new LucentTracker({ publicKey });
tracker.start();
}
return () => {
tracker?.stop();
tracker = null;
};
}, [publicKey]);
return null;
}
```
`app/root.tsx`:
```tsx theme={null}
import type { LoaderFunctionArgs } from "@remix-run/node";
import { json, useLoaderData } from "@remix-run/react";
import { LucentInit } from "~/components/lucent-init";
export async function loader({ request }: LoaderFunctionArgs) {
return json({
ENV: {
LUCENT_PUBLIC_KEY: process.env.LUCENT_PUBLIC_KEY,
},
});
}
export default function App() {
const { ENV } = useLoaderData();
return (
{/* ...your routes */}
);
}
```
## Notes
* Remix never ships `process.env` to the browser. The loader pattern is the
canonical way to expose public keys; don't try to read `process.env`
directly from a client component.
* `LucentInit` renders nothing — it only exists to run the tracker inside a
`useEffect` so it initializes on mount and stops on unmount.
* Prefix the env var with `LUCENT_` (no public prefix) because it's consumed
server‑side by the loader before being handed to the client.