Quick Start

Create a shared PrivacyClient and detect or obfuscate text from React components.

1. Create an SDK access token

Browser initialization requires an SDK access token from the Secured platform. Pro users can open Settings > SDK Access Tokens, create a token, add the allowed browser origin, and copy the token once it is shown.

See SDK Access Tokens for wildcard origin and local development rules.

2. Create a client

import { PrivacyClient } from '@secured-ai/core'

export const privacyClient = new PrivacyClient({
  baseUrl: 'https://dev-api.securedai.com',
  sdkAccessToken: import.meta.env.VITE_SECURED_SDK_ACCESS_TOKEN,
  engines: {
    regex: true,
    nlp: true,
    ml: false,
    gliner: false,
    custom: true,
  },
})

3. Mount `SecuredProvider`

'use client'

import { SecuredProvider } from '@secured-ai/react'
import { privacyClient } from './privacyClient'

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <SecuredProvider client={privacyClient}>
      {children}
    </SecuredProvider>
  )
}

By default the provider calls client.initialize() on mount. Pass autoInitialize={false} if you want to control that lifecycle yourself.

4. Detect text on demand

'use client'

import { useState } from 'react'
import { useDetect, usePrivacyStatus } from '@secured-ai/react'

export function DetectExample() {
  const [text, setText] = useState('')
  const { detect, data, isPending, error } = useDetect()
  const status = usePrivacyStatus()

  return (
    <div>
      <textarea value={text} onChange={(e) => setText(e.target.value)} />
      <button
        disabled={!status.isReady || isPending}
        onClick={() => void detect(text)}
      >
        Scan
      </button>

      {error ? <p>{error.message}</p> : null}
      {data ? <pre>{JSON.stringify(data.sensitiveEntities, null, 2)}</pre> : null}
    </div>
  )
}

5. Obfuscate and later restore

'use client'

import { useObfuscate } from '@secured-ai/react'

export function ObfuscateExample({ text }: { text: string }) {
  const { obfuscate, restore, lastResult, sessionId } = useObfuscate()

  async function handleObfuscate() {
    await obfuscate(text)
  }

  async function handleRestore() {
    if (!lastResult || !sessionId) return
    const restored = await restore(lastResult.processed)
    console.log(restored.restored)
  }

  return (
    <div>
      <button onClick={() => void handleObfuscate()}>Obfuscate</button>
      <button onClick={() => void handleRestore()} disabled={!sessionId}>
        Restore
      </button>
    </div>
  )
}

useObfuscate() remembers the most recent sessionId, so restore() can use it automatically.

6. Reach for more specialized hooks as needed

useScan() for debounced input scanning
useRestore() for restoration with an explicit session ID
useSessions() for reactive session lists
useFileDetect() and useFileObfuscate() for upload flows
useTextReview() for human-in-the-loop replacement editing
useVault() for thread-aware vault workflows