Quick Start

Three steps. Install the SDK, wrap your app, and press C.

Install

bash

npm install @uselay/sdk

No CSS imports needed. Styles are injected at runtime.

Wrap your app

tsx

import { LayProvider } from '@uselay/sdk';

function App() {
  return (
    <LayProvider projectId="your-project-id">
      <YourApp />
    </LayProvider>
  );
}

Get your projectId from the dashboard. That's it. The toggle button and comment UI render automatically.

Want to identify who's commenting? Add the optional user prop:

tsx

<LayProvider
  projectId="your-project-id"
  user={{ id: 'user-1', name: 'Jane' }}
>
  <YourApp />
</LayProvider>

Support mode setup

If you need to know who is commenting — for customer support, bug reports, or beta feedback — add identity verification.

Add your secret key

bash

# .env (server-side only — never prefix with NEXT_PUBLIC_)
LAY_SECRET_KEY=sk_your_secret_key_here

Use identifyUser in your layout

tsx

import { identifyUser } from '@uselay/sdk/server';
import { LayProvider } from '@uselay/sdk';

export default async function Layout({ children }: { children: React.ReactNode }) {
  const user = await getUser();
  return (
    <LayProvider
      projectId="your-project-id"
      mode="support"
      {...identifyUser(
        user ? { id: user.id, name: user.email ?? user.name } : null
      )}
    >
      {children}
    </LayProvider>
  );
}

identifyUser(null) returns {}, so anonymous visitors still work. You only need to pass a user object when one is available.

Press C

Run your app and press C to enter comment mode. Hover over any element to highlight it. Click to pin a comment.

Or click the toggle button in the corner.

What happens next

Comments are pinned to the exact DOM element you clicked
AI enrichment adds context, metadata, and suggested actions
Everything shows up in your dashboard, grouped by page