The one-line answer
Today: drop the Relyv loader script tag (<script async src="https://cdn.relyv.ai/sdk/v1/relyv.js" data-project-id="..." data-environment-id="...">) into your React entry HTML — records every session from first render with ~14 KB gzipped and sub-1% main-thread overhead. Once the bundled npm package ships, npm install @relyv/sdk + init({ projectId, environmentId }) will give you the same capture in a tree-shaken module form.
Note on install methods (May 2026)
The CDN-hosted loader at cdn.relyv.ai/sdk/v1/relyv.js is the production install path right now. The npm-distributed bundle (@relyv/sdk) is documented in this guide and the install hub because it's on the immediate roadmap — but at the time of writing the package has not yet been published. If you copy-paste an npm install @relyv/sdk command before publish day, it will 404. The script-tag method below works today; the npm import patterns are accurate descriptions of how the bundled package will behave once it lands.
What you need before starting
Three prerequisites:
- <strong>A Relyv account</strong> (free tier covers 1,000 sessions/mo).
- <strong>API key + project ID</strong> from dashboard.relyv.ai → Settings → API keys.
- <strong>Edit access to your React app entry file</strong> (main.tsx, index.tsx, or equivalent).
How Relyv React setup works
The SDK is framework-agnostic but behaves correctly inside React out of the box. It hooks the History API for route-change detection (works with React Router, TanStack Router, Wouter), captures the initial DOM after first paint, and subscribes to MutationObserver for every subsequent change. StrictMode's double-render doesn't cause duplicate sessions — the SDK deduplicates on session ID, not init calls.
Step-by-step
- 1
Install the SDK (today: script tag; once published: npm)
Today (working install path): add one script tag to
index.html(Vite, CRA, etc) —<script async src="https://cdn.relyv.ai/sdk/v1/relyv.js" data-project-id="YOUR_PROJECT_ID" data-environment-id="YOUR_ENVIRONMENT_ID"></script>. The loader is async-loaded, sub-1% CPU, ~14 KB gzipped, served fromcdn.relyv.aibehind Cloud CDN.
Once@relyv/sdkis published to npm (target: shortly after general availability — until then this section describes the package shape rather than a runnable command):npm install @relyv/sdk(orpnpm add/yarn add/bun add). The package is fully typed; types ship alongside the runtime. - 2
Initialise at app entry
Script tag (today): the loader self-initialises from the
data-project-id+data-environment-idattribute — no further code needed.
npm import pattern (once the package ships):// main.tsx (Vite) or index.tsx (CRA) import { init } from '@relyv/sdk'; init({ projectId: import.meta.env.VITE_RELYV_PROJECT_ID, environmentId: import.meta.env.VITE_RELYV_ENVIRONMENT_ID, }); // rest of your render code ReactDOM.createRoot(...).render(...);
Init must run on the client (in the browser), not at build time. Vite + CRA satisfy this automatically because main.tsx runs in the browser. - 3
Mark sensitive fields
Add the
data-relyv-maskattribute to any element rendering PII the SDK can't identify by content alone:<input data-relyv-mask name="customer-id" /> <div data-relyv-mask>{user.fullName}</div>
Standard PII (emails, phone numbers, credit cards) is masked automatically via regex + Luhn validation — no marker needed. - 4
Verify in dev before deploying
Run your app locally, click around for 30 seconds, then open the Relyv Library at dashboard.relyv.ai. The session appears within seconds. Watch the replay end-to-end, open the Network and Console tabs inside the replay viewer, and confirm no PII leaks. Check the "raw payload" tool in Settings if you want to see the exact serialized capture.
- 5
Deploy + monitor
Push to staging, watch the session corpus grow, look for the first AI-summarised bug ticket in the Triage inbox within a few hours. Production deploy follows the same pattern; no per-environment configuration beyond the API key/project ID for the corresponding workspace.