@statisfy/ai-react

Embeddable Digital Worker surfaces for React: chat, the onboarding module, and the tool-call form renderer.

The portal shell — native auth, account switcher, project module — is a separate package, @statisfy/portal-react. Install both if you want both; they share one provider and one theme.

Install

npm install @statisfy/ai-react react react-dom

react and react-dom (18 or 19) are peer dependencies you provide. @statisfy/sdk-core is also a peer, and npm installs it for you — it must resolve to a single copy, which is why it is a peer rather than a bundled dependency. Everything else the package needs is bundled.

Usage

Wrap your app once in <StatisfyProvider>, then render components anywhere beneath it. Connection and auth live on the provider; components take only their own display props.

import { DigitalWorkerChat, StatisfyProvider } from '@statisfy/ai-react'
import '@statisfy/ai-react/styles.css' // required — import once

export function Support() {
  return (
    <StatisfyProvider
      publishableKey="pk_live_…"
      getToken={async () => '<bearer>'}
    >
      <DigitalWorkerChat workerId="<uuid>" workerName="Assistant" />
    </StatisfyProvider>
  )
}

You do not configure a gateway URL — the SDK targets the Statisfy production gateway. Mint the bearer on your own backend and return it from getToken; never ship a secret to the browser.

A component rendered outside <StatisfyProvider> throws, rather than silently sending unauthenticated requests. The stylesheet import is required; without it the widget renders unstyled.

Theming

Everything visual is reachable from host CSS through two seams: the --dw-* variable table and the data-dw-part anatomy attributes. Both work with plain, normal declarations — !important is not needed and must not be used, because all SDK CSS ships inside @layer and an unlayered author rule outranks every layer.

/* space-separated RGB triplets, not rgb() or hex */
:root { --dw-primary: 13 148 136; }

/* or target one part */
[data-dw-part='task-row'] { border-radius: 0; }

Dark mode is opt-in via data-dw-theme="dark" (or "auto" to follow the OS) on the root element — an embedded widget should match the page it is mounted in, not the visitor's OS.

The full token table, the dark palette, the documented-stable part names and the worked examples live in @statisfy/sdk-core's README — the package that owns the token layer. The contract is identical for every Statisfy SDK package, so it is documented once rather than drifting in three copies.

License

MIT