Quickstart: Next.js App Router

Render <LybaReview /> once, high in the app tree, 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

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

Render <LybaReview /> once, high in the app tree. In Next.js App Router, that usually means your root layout.

tsx

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <LybaReview enabled={process.env.NEXT_PUBLIC_VERCEL_ENV !== "production"} />
      </body>
    </html>
  );
}

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 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: Comment Lyba review link on PR
  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 }}

Using 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. Your team works through the comments in the Lyba dashboard, requests approval once they're resolved, and the client's sign-off is recorded against the commit under review.

Quickstart: Next.js App Router

What you need

Install

Render the widget in your root layout

Create a review session from CI

Share the review link