Skip to main content

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.

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

Open the dashboard

Go to app.lucenthq.com and sign in.
2

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.

​
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. 
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 page for the full list and what each one does.
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.

​
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: 
npm install @lucenthq/sdk
Pick your framework:

Next.js

React

Vue

Svelte

Angular

Vanilla

​
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. 
import { LucentProvider, LucentIdentify } from "@lucenthq/sdk/react";

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

​
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. 
<LucentIdentify
  userId={user?.id}
  email={user?.email}
  properties={{
    featureFlags: {
      "new-checkout-flow": flags.newCheckoutFlow,
      "pricing-page-redesign": flags.pricingPageRedesign,
      "paywall-test": flags.paywallTest,
    },
  }}
/>
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.
Lucent evaluates the feature flag values stored on the session. Call identify again if a flag value changes during the session.

​
5. Verify the session

  1. Run your app and navigate through a few pages.
  2. Open 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

CLI installer

Per‑framework breakdown of what npx @lucenthq/cli init does.

Configuration

Tune privacy, sampling, capture, and batching.

React integration

LucentProvider, LucentIdentify, and useLucent.

API reference

The ingest endpoints that power the SDK.