> ## Documentation Index
> Fetch the complete documentation index at: https://help.statisfy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Statisfy SDK Overview

> Embed Statisfy Digital Workers and onboarding Projects into your own web app with the @statisfy/digital-workers-react SDK.

The Statisfy SDK (`@statisfy/digital-workers-react`) lets you embed Statisfy experiences — a **Digital Worker chat** and a **Project (onboarding) module** — directly into your own React application or customer portal. Your customers interact with their Statisfy data without ever leaving your product.

<Note>
  The SDK is the programmatic counterpart to [Portals](/portals/overview). A Portal is a Statisfy-hosted site; the SDK lets you build the same experiences inside an app you host yourself.
</Note>

## What you can build

<CardGroup cols={2}>
  <Card title="Digital Worker chat" icon="comments">
    A full chat widget that talks to one of your Digital Workers — streaming replies, inline forms, conversation history, unread badges, and live replies from a human CSM.
  </Card>

  <Card title="Project module" icon="list-check">
    A read/write view of a customer's onboarding project: milestones, tasks, progress, and editable fields — as a pre-built component or composable primitives.
  </Card>
</CardGroup>

## Package

|                       |                                                                    |
| --------------------- | ------------------------------------------------------------------ |
| **Name**              | `@statisfy/digital-workers-react`                                  |
| **Module format**     | ES Module                                                          |
| **Peer dependencies** | `react` and `react-dom` (18 or 19)                                 |
| **Styles**            | Ships a stylesheet at `@statisfy/digital-workers-react/styles.css` |

The SDK is built with React and TypeScript and is fully typed — every component, hook, and client method ships with type definitions.

## How it fits together

```text theme={null}
Your app (React)
│
├─ <StatisfyProvider baseUrl publishableKey getToken>   ← connection + auth, set once
│   │
│   ├─ <DigitalWorkerChat workerId=… />                 ← chat with a Digital Worker
│   └─ <ProjectModule projectId? />                     ← onboarding project view
│
└─ Statisfy Gateway (api.statisfy.app)
    ├─ /sdk/dw/v1/workers/{id}/…   (chat: messages, stream, conversations)
    └─ /sdk/v1/…                   (projects: config, projects, tasks)
```

You wrap your app once in [`<StatisfyProvider>`](/sdk/getting_started), which supplies the gateway URL and authentication. Every SDK component reads that shared config — they never take connection props themselves.

## Authentication model

The SDK authenticates each request with two pieces:

* **A bearer token** — a short-lived HS256 **session token** scoped to one customer of your tenant. Your app supplies it through the provider's `getToken` callback.
* **A publishable key** — `pk_live_…` / `pk_test_…`, safe to ship in client-side code. It identifies your Statisfy tenant.

The session token is minted by exchanging your signed-in user's identity (your tenant's Clerk/IdP JWT) at the `POST /sdk/auth` endpoint. The token carries `tenant_id`, `customer_id`, and `portal_id` claims, so the gateway scopes every request to exactly that customer — the SDK never trusts a customer id sent from the browser.

<Warning>
  The bearer token is **not** your raw Clerk/IdP JWT — it is the Statisfy session token returned by `/sdk/auth`, signed with your tenant's shared secret. See [Getting Started](/sdk/getting_started) for the exchange.
</Warning>

The full token lifecycle, headers, and error codes are in the [API Reference](/sdk/api_reference).

## Next steps

<CardGroup cols={2}>
  <Card title="Getting Started" icon="rocket" href="/sdk/getting_started">
    Install, wire up the provider, mint a token, and render your first component.
  </Card>

  <Card title="Digital Worker Chat" icon="comments" href="/sdk/digital_worker_chat">
    Embed the chat widget, render inline forms, and use the headless client.
  </Card>

  <Card title="Project Module" icon="list-check" href="/sdk/projects">
    Show and update a customer's onboarding project.
  </Card>

  <Card title="API Reference" icon="code" href="/sdk/api_reference">
    Endpoints, headers, error codes, and TypeScript types.
  </Card>
</CardGroup>