Choosing the enabled gate

Pass enabled explicitly from your app. Do not rely on the package guessing your host environment unless you are experimenting locally.

The important rule: the expression must be false in production.

The three gates

Lyba has three gates before anything appears:

Your enabled prop — this should be true only on preview builds.
Lyba's production veto — if the package confidently detects production, it refuses to render even if enabled is accidentally true.
The review token — the overlay mounts only when the URL contains a #lyba_token=... fragment from a Lyba review link.

That means:

Production builds should pass enabled={false}.
Preview builds can include the package safely.
Ordinary preview visitors still see nothing because they do not have a review token.
The token lives in the URL fragment, so it is not sent to your server as part of the request URL.

The veto and the token check are backstops. Get the flag right anyway.

Recommended gates by host

Host / framework	Recommended gate
Next.js on Vercel	`enabled={process.env.NEXT_PUBLIC_VERCEL_ENV !== "production"}`
Vite on Vercel	`enabled={import.meta.env.VITE_VERCEL_ENV !== "production"}`
Netlify	expose `CONTEXT` publicly and use `enabled={publicContext !== "production"}`
Cloudflare Pages	expose the branch and use `enabled={branch !== "main"}` or your production branch
Any host	gate on your own public preview flag, for example `NEXT_PUBLIC_IS_PREVIEW === "true"`

Use a dedicated preview flag

A flag you set yourself works on any host. Set NEXT_PUBLIC_LYBA_PREVIEW=true in the host's preview build environment only; leave it unset or false in production and redeploy after changing it.

tsx

// app/layout.tsx
import { LybaReview } from "@lyba/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <LybaReview enabled={process.env.NEXT_PUBLIC_LYBA_PREVIEW === "true"} />
      </body>
    </html>
  );
}

For Vite, use VITE_LYBA_PREVIEW and import.meta.env.VITE_LYBA_PREVIEW === "true".

Host environment settings are documented by Vercel, Netlify and Cloudflare Pages.

Browser code can't read CI variables

Evaluate the enabled expression in your own code so your bundler inlines the value. In a Vite app, if your host exposes VERCEL_ENV, CONTEXT, or a similar deploy variable without the VITE_ prefix, expose a public build variable yourself and gate on that. Browser code cannot read private CI environment variables at runtime.

detectPreview

@lyba/react also exports detectPreview, which recognizes Vercel, Netlify, and Cloudflare Pages:

import { detectPreview } from "@lyba/react";

const preview = detectPreview({
  NEXT_PUBLIC_VERCEL_ENV: process.env.NEXT_PUBLIC_VERCEL_ENV,
  NEXT_PUBLIC_VERCEL_URL: process.env.NEXT_PUBLIC_VERCEL_URL,
});

Client-side environment variables must be passed in or inlined by your bundler. Private CI environment variables are not magically available in the browser. See the <LybaReview /> reference for the full component API.

Testing the gate

Deploy a preview build with <LybaReview enabled={true} />, or with your preview gate evaluating true, then open a review link for it. Create sessions from CI shows how to create one with the CLI from your machine.

If the overlay ever appears on production, the production gate is wrong: make enabled false for production and redeploy.