> ## 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.

# Installation

> Install @lucenthq/sdk and wire it into your app.

The Lucent browser SDK is published to npm as [`@lucenthq/sdk`](https://www.npmjs.com/package/@lucenthq/sdk).
It ships both ESM and CommonJS builds and has a single runtime dependency on
[rrweb](https://www.rrweb.io/). React bindings are exposed under
`@lucenthq/sdk/react` and are only loaded if you import them.

## Recommended: the CLI installer

The fastest way to install Lucent is the framework‑aware CLI. It picks the
right provider shape, env var name, and entry file for your framework and
wires everything up in one shot.

```bash theme={null}
npx @lucenthq/cli init luc_pk_...
```

See the [CLI installer](/sdk/cli) page for what the CLI does, the full list
of supported frameworks, and which ones require a final manual step.

If the CLI can't figure out your project — or you just want to see the code
before it lands in your repo — follow the manual instructions below.

## Requirements

* A modern browser environment (evergreen Chrome, Safari, Firefox, Edge).
* A Lucent public key — see the [Quickstart](/quickstart) for how to create one.
* React 18 or 19 if you plan to use the React bindings (optional peer dependency).

## Manual install

<CodeGroup>
  ```bash npm theme={null}
  npm install @lucenthq/sdk
  ```

  ```bash pnpm theme={null}
  pnpm add @lucenthq/sdk
  ```

  ```bash yarn theme={null}
  yarn add @lucenthq/sdk
  ```

  ```bash bun theme={null}
  bun add @lucenthq/sdk
  ```
</CodeGroup>

## Entry points

The package exposes two entry points:

| Import                | Use when                                                                                  |
| --------------------- | ----------------------------------------------------------------------------------------- |
| `@lucenthq/sdk`       | You're using vanilla JavaScript/TypeScript, or you want direct access to `LucentTracker`. |
| `@lucenthq/sdk/react` | You're building with React or Next.js and want the provider/hook API.                     |

<Note>
  Both entry points resolve to the same underlying tracker. Importing the React
  entry does **not** pull in React unless React is already in your bundle — it
  declares React as an optional peer dependency.
</Note>

## Minimal example

<Tabs>
  <Tab title="Vanilla JS">
    ```ts theme={null}
    import { LucentTracker } from "@lucenthq/sdk";

    const tracker = new LucentTracker({
      publicKey: "luc_pk_...",
    });

    tracker.start();
    ```
  </Tab>

  <Tab title="React">
    ```tsx theme={null}
    "use client";

    import { LucentProvider } from "@lucenthq/sdk/react";

    export default function App({ children }: { children: React.ReactNode }) {
      return (
        <LucentProvider publicKey="luc_pk_...">
          {children}
        </LucentProvider>
      );
    }
    ```
  </Tab>
</Tabs>

## Next steps

* [CLI installer](/sdk/cli) — `npx @lucenthq/cli init` for every supported framework.
* [Framework pages](/sdk/frameworks/nextjs) — step‑by‑step manual setup per framework.
* [React integration](/sdk/react) — provider, identify, and hook APIs.
* [Configuration](/sdk/configuration) — full options reference.