Next.js

Fully automated for Next.js App Router. One manual step for Pages Router (wrap <Component>). Both variants scaffold correctly via npx @lucenthq/cli init.

Install with the CLI

npx @lucenthq/cli init luc_pk_...

Pick Next.js when prompted, then choose your router.

App Router

Environment variable

.env.local:

NEXT_PUBLIC_LUCENT_PUBLIC_KEY=luc_pk_...

Provider component

app/providers.tsx:

"use client";

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

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

Wire it into the root layout

app/layout.tsx:

import { Providers } from "./providers";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

The CLI performs all three steps automatically for App Router.

Pages Router

Environment variable

.env.local:

NEXT_PUBLIC_LUCENT_PUBLIC_KEY=luc_pk_...

Wrap your app

pages/_app.tsx:

import type { AppProps } from "next/app";
import { LucentProvider } from "@lucenthq/sdk/react";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <LucentProvider publicKey={process.env.NEXT_PUBLIC_LUCENT_PUBLIC_KEY!}>
      <Component {...pageProps} />
    </LucentProvider>
  );
}

Manual step required. The CLI adds the import { LucentProvider } line to pages/_app.tsx but leaves the actual <Component> wrapping to you — the exact shape of your App export varies too much to automate safely. Copy the example above after running the CLI.

Notes

LucentProvider must be rendered in a client component. For App Router this means the Providers wrapper file needs "use client" at the top — the rest of your layout tree can stay a server component.
Use NEXT_PUBLIC_ prefix so the key is available to the browser. Never store a key that isn’t prefixed luc_pk_ in a client‑accessible variable.
The provider should sit at the root of your tree and never remount. If you wrap per‑page it will reset the session on every navigation.

Get started

Browser SDK

Mobile SDK

Integrations

Configure Lucent

Signals

MCP

AI tools

Install with the CLI

App Router

Pages Router

Notes

​Install with the CLI

​App Router

​Pages Router

​Notes

Install with the CLI

App Router

Pages Router

Notes