# @zens-ai/react

> Official React bindings for the Zens AI customer support SDK.

Latest version **0.1.1** (published 2026-07-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @zens-ai/react
pnpm add @zens-ai/react
yarn add @zens-ai/react
bun add @zens-ai/react
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2026-07-26 |
| First published | 2026-07-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18 |
| Dependencies | 0 |
| Unpacked size | 36.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | zensai |
| Keywords | zens-ai, customer-support, live-chat, react, ai |

## Links

- npm: https://www.npmjs.com/package/@zens-ai/react
- Repository: https://github.com/ZensHQ/react
- Homepage: https://zens.ai
- Issues: https://github.com/ZensHQ/react/issues
- npm.io page: https://npm.io/package/@zens-ai/react

## Alternatives

- [@expo/fingerprint](https://npm.io/package/@expo/fingerprint.md) — 6.2M weekly downloads
- [@azure/monitor-opentelemetry-exporter](https://npm.io/package/@azure/monitor-opentelemetry-exporter.md) — 850.0K weekly downloads
- [@azure/monitor-opentelemetry](https://npm.io/package/@azure/monitor-opentelemetry.md) — 624.0K weekly downloads
- [@posthog/ai](https://npm.io/package/@posthog/ai.md) — 423.3K weekly downloads
- [fakefilter](https://npm.io/package/fakefilter.md) — 63.9K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2026-07-26
- 0.1.0 — 2026-07-26

## README

# @zens-ai/react

Official React bindings for the [Zens AI](https://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

```bash
pnpm add @zens-ai/react
```

## Add the provider

Mount the provider once in your application shell:

```tsx
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:

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

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

```ts
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

```tsx
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](https://zens.ai/docs/getting-started/customer-integration)
before enabling visitor identity or session recording.

---
_Source: https://npm.io/package/@zens-ai/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._