Getting Started with the Statisfy SDK

// YOUR BACKEND — the secret never leaves your server.
import jwt from 'jsonwebtoken'

app.get('/statisfy-token', requireYourOwnAuth, (req, res) => {
  const token = jwt.sign(
    { email: req.user.email },
    process.env.STATISFY_JWT_SECRET,     // your workspace's JWT secret
    { algorithm: 'HS256', expiresIn: '1h' }
  )
  res.json({ token })
})

// YOUR FRONTEND — fetch from your own endpoint; no Statisfy secret here.
async function fetchStatisfyToken(): Promise<string> {
  const res = await fetch('/statisfy-token')
  if (!res.ok) throw new Error(`Token mint failed: ${res.status}`)
  const { token } = await res.json()
  return token
}

import { PortalAuthGate, PortalSignOutButton } from '@statisfy/portal-react'
import { portalConfig } from '../portal.config'

export function App() {
  return (
    <PortalAuthGate
      baseUrl={portalConfig.apiBaseUrl}
      portalId={portalConfig.portalId}
      publishableKey={portalConfig.publishableKey}
    >
      <PortalSignOutButton>Sign out</PortalSignOutButton>
      <YourPortal />
    </PortalAuthGate>
  )
}

import { StatisfyProvider } from '@statisfy/portal-react'
import { useCallback } from 'react'

function Root() {
  // Return the current session token; re-mint when needed. Memoize so the
  // provider doesn't re-render its subtree on every render.
  const getToken = useCallback(async () => {
    return await getCachedOrFreshStatisfyToken() // your caching around the step-2 token source
  }, [])

  return (
    <StatisfyProvider
      baseUrl="https://api.statisfy.com"
      publishableKey="pk_live_your_key"
      getToken={getToken}
    >
      <YourApp />
    </StatisfyProvider>
  )
}

import { DigitalWorkerChat } from '@statisfy/ai-react'

function SupportPanel() {
  return (
    <DigitalWorkerChat
      workerId="your-digital-worker-uuid"
      workerName="Onboarding Assistant"
      greeting="Hi! How can I help with your onboarding?"
      className="dw-h-[600px]"
    />
  )
}

import { OnboardingProject } from '@statisfy/portal-react'

// Resolves the signed-in customer's own onboarding project automatically.
<OnboardingProject configId="onboarding" />

:root {
  --dw-primary: 13 148 136;     /* brand fill: send button, progress */
  --dw-radius-lg: 4px;          /* cards, bubbles, task groups */
}

[data-dw-part='task-row'] { border-radius: 0; }