System overview

Teleperson is a three-tier product. Each tier has a distinct responsibility and trust posture.

The three tiers

1. Browser extension (the consumer surface)

A Manifest V3 extension built with React 18, Vite, and Tailwind CSS. Three runtime contexts:

• Side panel — the React UI the user sees. Lives in an iframe-style context with a strict Content Security Policy. Reads from chrome.storage, posts messages to the background worker.
• Background service worker — the long-running brain. Handles authentication, backend sync, voice provider sessions, and the chat co-pilot agent loop. Talks to Supabase Edge Functions over fetch with the user's X-TLE-Token header.
• Content script — injected into the current page only when the side panel opens. Reads page metadata for vendor identification, scrapes contact info, observes on-page chatbot widgets via MutationObserver for the co-pilot.

Voice providers (ElevenLabs, Vapi) run inside sandboxed iframes with a relaxed CSP scoped to that frame, so the rest of the extension keeps a strict script-src 'self' posture.

2. Web admin (curation and analytics)

A separate Vite + React app at teleperson.com/customer/*. Used by Teleperson staff and partner admins for:

• Company directory CRUD and bulk CSV import.
• IVR / Call-Flow builder.
• Plaid connection management and the Merchant Review queue.
• User analytics dashboard (/TelepersonUsers) with demographics and CSV export.

Users authenticate with a standard Supabase JWT here.

3. Supabase backend (the brain and the source of truth)

A Supabase project with:

• Postgres database — 60+ tables, all RLS-enforced. Tables for users, companies, AI overviews, Plaid accounts, vendor connections, transactions, call flows, audit logs.
• Edge Functions (Deno + TypeScript) — every privileged operation. AES-256-GCM encryption of bank tokens at rest. SHA-256 hashing of extension tokens.
• Auth — Supabase Auth for the web admin; long-lived extension_tokens (X-TLE-Token header) for the extension.

How a request flows

A typical "open the panel on a new site" request:

User on bestbuy.com clicks the Teleperson icon
         │
         ▼
┌─────────────────────────────┐
│ Side panel opens            │
│ React renders empty Hub     │
└─────────────┬───────────────┘
              │ chrome.runtime.sendMessage
              ▼
┌─────────────────────────────┐
│ Background service worker   │
│ identifyVendor(domain)      │
└─────────────┬───────────────┘
              │ fetch (X-TLE-Token)
              ▼
┌─────────────────────────────┐
│ Supabase Edge Function      │
│ extension-resolve-company   │
│  • Postgres lookup by domain│
│  • RLS: shared catalog only │
└─────────────┬───────────────┘
              │
              ▼
       ┌──── Hit? ────┐
       ▼              ▼
   Return        Trigger
   cached       fetch +
   company      AI overview

If the company is in the catalog, the panel renders instantly from chrome.storage (which the SW just wrote). If not, the SW posts a quick metadata digest from the content script, the backend creates a new companies row, queues an AI Overview generation, and the panel surfaces an "Add to Hub" prompt.

AI providers

Integrations

Every credential lives in environment variables on the Supabase Edge Function side; the extension never sees a third-party API key.

What the extension is not allowed to do

• Read page content when the side panel is closed.
• Make outbound network requests to anywhere except the Teleperson Supabase project, Anthropic, and the configured voice provider.
• Persist anything beyond chrome.storage (which is scoped to the extension).
• Access bank credentials. Plaid handles the credential exchange entirely; Teleperson only receives access tokens, encrypted at rest.

Related

• Security & privacy → — what we collect, what we don't.