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

# Quickstart

> Record your first Lucent session in under five minutes.

This guide walks you from zero to a recorded session in your dashboard. You'll
need a Lucent account and about five minutes.

## 1. Create a public key

Public keys begin with `luc_pk_` and are safe to embed in client‑side code —
they can only write session data to your org and cannot read anything.

<Steps>
  <Step title="Open the dashboard">
    Go to [app.lucenthq.com](https://app.lucenthq.com) and sign in.
  </Step>

  <Step title="Create a key">
    Navigate to **Settings → SDK keys** and create a new public key. Copy it
    somewhere safe — you'll paste it into your app next.
  </Step>
</Steps>

## 2. Run the CLI installer

The fastest way to install Lucent is the framework‑aware CLI. It detects your
package manager, installs `@lucenthq/sdk`, creates a provider file, and wires
it into your root layout.

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

Pick your framework when prompted. The CLI supports Next.js, React (Vite/CRA),
Vue, Angular, Svelte, Nuxt, Remix, Astro, Gatsby, and vanilla JavaScript —
see the [CLI installer](/sdk/cli) page for the full list and what each one
does.

<Tip>
  A few frameworks (Angular, Nuxt, Remix, Next.js Pages Router) need one
  final manual step the CLI can't safely automate. The CLI prints exactly
  what to do; framework pages have the full walkthrough.
</Tip>

## 3. Or install manually

If you prefer to wire things up by hand, or your framework isn't in the CLI's
list, install the package and follow one of the framework pages:

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

Pick your framework:

<CardGroup cols={3}>
  <Card title="Next.js" icon="n" href="/sdk/frameworks/nextjs" />

  <Card title="React" icon="react" href="/sdk/frameworks/react" />

  <Card title="Vue" icon="vuejs" href="/sdk/frameworks/vue" />

  <Card title="Svelte" icon="s" href="/sdk/frameworks/svelte" />

  <Card title="Angular" icon="angular" href="/sdk/frameworks/angular" />

  <Card title="Vanilla" icon="js" href="/sdk/frameworks/vanilla" />
</CardGroup>

## 4. Identify your users (optional)

Attach a user identity so sessions are grouped by the right person in the
dashboard. Until you call `identify`, sessions are tied to a generated
anonymous ID stored in `localStorage`.

<Tabs>
  <Tab title="React">
    ```tsx theme={null}
    import { LucentProvider, LucentIdentify } from "@lucenthq/sdk/react";

    <LucentProvider publicKey="luc_pk_...">
      <LucentIdentify
        userId={user?.id}
        email={user?.email}
        name={user?.name}
      />
      {children}
    </LucentProvider>
    ```
  </Tab>

  <Tab title="Vanilla JS">
    ```ts theme={null}
    tracker.identify({
      id: "user_123",
      email: "jane@example.com",
      name: "Jane Doe",
    });
    ```
  </Tab>
</Tabs>

### Send feature flags for Signals

If you use Lucent SDK for session replay and your feature flags come from
LaunchDarkly, Statsig, GrowthBook, a homegrown service, or another provider,
send the evaluated flag values as user properties. Signals can then filter SDK
sessions by those observed values without a PostHog, Datadog, or Amplitude
integration.

<Tabs>
  <Tab title="React">
    ```tsx theme={null}
    <LucentIdentify
      userId={user?.id}
      email={user?.email}
      properties={{
        featureFlags: {
          "new-checkout-flow": flags.newCheckoutFlow,
          "pricing-page-redesign": flags.pricingPageRedesign,
          "paywall-test": flags.paywallTest,
        },
      }}
    />
    ```
  </Tab>

  <Tab title="Vanilla JS">
    ```ts theme={null}
    tracker.identify({
      id: "user_123",
      email: "jane@example.com",
      properties: {
        featureFlags: {
          "new-checkout-flow": launchDarkly.variation("new-checkout-flow"),
          "pricing-page-redesign": statsig.checkGate("pricing-page-redesign"),
          "paywall-test": growthbook.getFeatureValue("paywall-test", "control"),
        },
      },
    });
    ```
  </Tab>
</Tabs>

Use the same flag key in Lucent's Signal filter. For example,
`new-checkout-flow = variant-a` matches SDK sessions where
`featureFlags["new-checkout-flow"]` was recorded as `variant-a`.

<Note>
  Lucent evaluates the feature flag values stored on the session. Call
  `identify` again if a flag value changes during the session.
</Note>

## 5. Verify the session

1. Run your app and navigate through a few pages.
2. Open [app.lucenthq.com](https://app.lucenthq.com) → **Sessions**.
3. Your session should appear within a few seconds of its first event — Lucent
   flushes batches every 10 seconds by default and immediately on page unload.

## Next steps

<CardGroup cols={2}>
  <Card title="CLI installer" icon="terminal" href="/sdk/cli">
    Per‑framework breakdown of what `npx @lucenthq/cli init` does.
  </Card>

  <Card title="Configuration" icon="gear" href="/sdk/configuration">
    Tune privacy, sampling, capture, and batching.
  </Card>

  <Card title="React integration" icon="react" href="/sdk/react">
    `LucentProvider`, `LucentIdentify`, and `useLucent`.
  </Card>

  <Card title="API reference" icon="terminal" href="/api-reference/introduction">
    The ingest endpoints that power the SDK.
  </Card>
</CardGroup>