@zens-ai/react

@zens-ai/react

Official React bindings for the Zens AI customer support SDK. The package loads the browser SDK once, exposes a typed client, and keeps identity signing in an explicitly server-only export.

Install

pnpm add @zens-ai/react

Add the provider

Mount the provider once in your application shell:

import { ZensProvider } from '@zens-ai/react';

export function App({ children }: { children: React.ReactNode }) {
  return (
    <ZensProvider
      siteId={import.meta.env.VITE_ZENS_SITE_ID}
      loginUrl="/login"
      registerUrl="/register"
      sessionRecording={false}
    >
      {children}
    </ZensProvider>
  );
}

siteId is public. Never pass the Zens signing secret to this component or to any other browser code.

Identify a signed-in user

Generate the signature on your server, return the signed profile to the browser, and pass it to the provider:

<ZensProvider siteId={siteId} identity={signedIdentity}>
  {children}
</ZensProvider>

The server helper uses Web Crypto and works in Node.js, edge runtimes, and Cloudflare Workers:

import { createZensIdentity } from '@zens-ai/react/server';

const identity = await createZensIdentity(
  {
    externalUserId: user.id,
    email: user.email,
    name: user.name,
    plan: user.plan,
  },
  env.ZENS_SIGNING_SECRET
);

Use the client

import { useZens } from '@zens-ai/react';

export function HelpButton() {
  const { isReady, open, track } = useZens();

  return (
    <button
      disabled={!isReady}
      onClick={() => {
        track('help_button_clicked', { location: 'settings' });
        open();
      }}
      type="button"
    >
      Contact support
    </button>
  );
}

The client also exposes identify, close, ask, handoff, uploadAttachment, flushRecording, and stopRecording.

Privacy controls

• widget={false} loads identity and analytics without the floating widget.
• registrationPrompt={false} disables the anonymous follow-up email prompt.
• sessionRecording={false} blocks session recording in browser code even if it is enabled for the Zens site.

Review the integration guide before enabling visitor identity or session recording.