@humaner/react

Drop-in React component for the Humaner chat widget. It renders the same floating bubble + panel as the widget.js script tag, but as a native React component — streaming, handoff (Human Desk / support email), and UI updates are handled by Humaner.

Install

npm install @humaner/react

Usage

import { HumanerChat } from "@humaner/react";

export default function Page() {
  return (
    <HumanerChat
      agentId="YOUR_AGENT_PUBLIC_ID"
      position="bottom-right"
    />
  );
}

In the Next.js App Router the component is a Client Component, so render it from a 'use client' boundary (or any client parent).

Auth, plans & quotas

The package is not a license key. Anyone can install it; usage is scoped to your Humaner account via agentId:

| Check | Where it runs | | --- | --- | | Agent exists / not paused | Humaner chat API + widget | | Domain allowlist | Humaner authorize layer (host from the parent page) | | Organization plan / message quota | Humaner billing (agent → organization.tier) | | Tier capabilities (memory, API, watermark, …) | Humaner getPlanCapabilities |

Flow:

<HumanerChat agentId="…" />
  → iframe app.humaner.io/widget/{agentId}?host=yoursite.com&embed=react
  → POST /api/v1/chat (plan + allowlist + quota enforced)

Without a valid agent on an active Humaner org (and an allowed domain), chat will not work — even if the npm package is installed.

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | agentId | string | — (required) | Agent public ID from the dashboard → Integrations. | | visitorId | string | — | Stable hashed user ID for cross-session memory (plan-dependent). | | visitorMetadata | { firstName?, lastName?, email?, company? } | — | Optional visitor profile for handoff / memory. | | position | 'bottom-right' \| 'bottom-left' \| 'bottom-center' | 'bottom-right' | Corner the bubble docks to. | | color | string | agent default | Accent color (hex, with or without #). | | greeting | string | agent default | One-off greeting override for this embed. | | baseUrl | string | https://app.humaner.io | Hosted chat origin. Use http://localhost:3001 in local Humaner dev. | | title | string | 'Humaner chat' | Accessible iframe title. | | className | string | — | Extra class on the iframe. | | style | React.CSSProperties | — | Extra inline styles on the iframe. |

Auth & security

No API key in the browser. Chat is authorized by your agent public ID plus the parent page domain allowlist you configure in the dashboard — exactly like the widget embed.

License

MIT