Quickstart: Vite / React

Render <LybaReview /> once inside your app shell, gate it to preview builds, then create a review session from CI after each preview deploy.

What you need

A Lyba agency account.
An agency API key from Dashboard → Settings → API keys.
A React app that can render one client component near the root.
A deploy-preview workflow where CI can run npx @lyba/cli session create after the preview URL exists.

The widget alone does not create review sessions. It only knows how to activate an existing review session when a client opens a Lyba review link.

Install

bash

npm install @lyba/react

Or:

bash

pnpm add @lyba/react
yarn add @lyba/react

React 18 or React 19 must already be installed by your app.

Render the component once inside your app shell:

tsx

// src/App.tsx
import { LybaReview } from "@lyba/react";

export function App() {
  return (
    <>
      <YourApp />
      <LybaReview enabled={import.meta.env.VITE_VERCEL_ENV !== "production"} />
    </>
  );
}

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.

Or use a dedicated preview flag

Instead of reading a host variable, you can gate on your own flag. Set VITE_LYBA_PREVIEW=true in the host's preview build environment only, and leave it unset or false in production:

tsx

<LybaReview enabled={import.meta.env.VITE_LYBA_PREVIEW === "true"} />

Redeploy after changing it. Evaluate the enabled expression in your own code so your bundler inlines the value.

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.

So production builds should pass enabled={false}, preview builds can include the package safely, and ordinary preview visitors still see nothing because they don't have a review token. See Choosing the enabled gate for Netlify, Cloudflare Pages and other hosts.

Create a review session from CI

The CLI creates the session, binds it to the preview URL and commit SHA, and prints the review link to share with the client. In GitHub Actions, run it after your preview deploy step:

yaml

- name: Create Lyba review session
  id: lyba
  run: npx @lyba/cli session create
  env:
    LYBA_API_KEY: ${{ secrets.LYBA_API_KEY }}

- name: Share Lyba review link
  if: steps.lyba.outputs.review-url
  run: gh pr comment "$PR" --body "Review this preview in Lyba: ${{ steps.lyba.outputs.review-url }}"
  env:
    GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    PR: ${{ github.event.number }}

Deploying on Vercel, Netlify or Cloudflare Pages? See Create sessions from CI for each host's recipe.

text

✓ Lyba review session created for acme/web @ 8f4e2c9
  Review link: https://lyba.io/r/GtJY36X
  Direct link: https://acme-web-git-feature.vercel.app#lyba_token=...

Use the Review link as the main link. It is durable and rotates a fresh, short-lived review token whenever opened. Use the Direct link only as a fallback: it contains a token in the URL fragment, which is convenient but less durable than the short /r/<slug> link.

When the client opens the review link, Lyba redirects them to the preview with a short-lived token, <LybaReview /> activates the overlay, and they pin comments on the live page. See the Lyba RX overview for the rest of the review and approval flow.