Skip to main content
Fully automated. Both Vite and CRA are wired up completely by the CLI.

​
Install with the CLI

npx @lucenthq/cli init luc_pk_...
Pick React when prompted, then choose your build tool.

​
Vite

1

Environment variable

.env:
VITE_LUCENT_PUBLIC_KEY=luc_pk_...
2

Provider component

src/providers.tsx:
import { LucentProvider } from "@lucenthq/sdk/react";
import type { ReactNode } from "react";

export function Providers({ children }: { children: ReactNode }) {
  return (
    <LucentProvider publicKey={import.meta.env.VITE_LUCENT_PUBLIC_KEY}>
      {children}
    </LucentProvider>
  );
}
3

Wrap the render call

src/main.tsx:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Providers } from "./providers";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Providers><App /></Providers>
  </React.StrictMode>,
);

​
Create React App

1

Environment variable

.env:
REACT_APP_LUCENT_PUBLIC_KEY=luc_pk_...
2

Provider component

src/providers.tsx:
import { LucentProvider } from "@lucenthq/sdk/react";
import type { ReactNode } from "react";

export function Providers({ children }: { children: ReactNode }) {
  return (
    <LucentProvider publicKey={process.env.REACT_APP_LUCENT_PUBLIC_KEY!}>
      {children}
    </LucentProvider>
  );
}
3

Wrap the render call

src/index.tsx:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Providers } from './providers';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <Providers><App /></Providers>
  </React.StrictMode>
);

​
Notes

  • Env var prefixes differ: Vite uses VITE_, CRA uses REACT_APP_. The CLI picks the right one for you.
  • The provider wraps the render call in the entrypoint, not inside App.tsx. This keeps it outside of React.StrictMode’s double‑mount behavior so the session isn’t reset on the development reload.