Static-site AI support overlay

Add a private AI call-center to any website.

Browser-local STT and TTS. No server, no API key, no Web Speech. Drop one <script> into your static site.

Try the live demo Open Flow Builder View on GitHub

100% client-side
WASM
Lazy model load
MIT

Support channel Idle

Models stay unloaded until Prepare. non-threaded WASM mode

Get started in 3 steps

From live demo to your own no-code flow in minutes.

Try the live demo

Type or talk to the AI overlay running on this page. No setup, no API key.

Try the live demo

Build a flow, no code

Open the visual Flow Builder, drag nodes, and export a config bundle (JSON).

Open Flow Builder

Ship it anywhere

Drop the bundle and one script tag on any static host. Works on GitHub Pages.

Start

What it is

One reusable interaction layer, no app framework required.

Drop-in

Framework-agnostic

Plain HTML. Works in Astro, Next export, Hugo, a CMS page, or a raw index.html.

Local-first

Browser speech stack

Transformers.js onnx-community/distil-small.en q4 for STT and Piper WASM for TTS.

Safe

Registered actions only

The assistant can run only the actions your page registers. No arbitrary scripts or hidden DOM control.

Live demo

Talk to the page, then let the page guide itself.

This landing page runs the same overlay bundle you ship. Text support works immediately. Voice support uses WASM STT/TTS after you press Prepare.

Try a support phrase Open full demo

The overlay is mounted from ./dist/website-ai-call-center.iife.js.

Audio setup

Headset and speaker check

Guide users through output device, mute, and browser permission checks.

Account

Settings and profile path

Show the correct panel and prefill a help query without guessing selectors.

Diagnostics

Browser-local checks

No checks have run yet.

Escalation

Support ticket draft

Call scenario catalog

Manage the call flow from one readable list.

Each card comes from validated scenarios/*.yml: intent, workflow route, sample phrase, match terms, assistant reply, and the safe actions the page may run.

How it works

Speech and guidance stay modular.

01
Mic input

User grants microphone access only after a click.
02
WASM STT

Transformers.js transcribes through a worker-backed browser model.
03
Scenario engine

Local rules or an HTTP adapter choose the next safe guidance step.
04
Piper WASM TTS

The assistant speaks locally after the voice model is prepared.

Architecture

Copy the static files. Register only safe page actions.

website
  ├─ dist/website-ai-call-center.iife.js
  ├─ dist/workers/stt-worker.js
  ├─ dist/workers/tts-worker.js
  ├─ registered page actions
  └─ local engine or HTTP AI adapter

browser
  ├─ Transformers.js WASM STT
  ├─ Piper WASM TTS
  └─ CacheStorage / OPFS when available

<link rel="stylesheet" href="./dist/website-ai-call-center.css">
<script src="./dist/website-ai-call-center.iife.js"></script>

const sdk = window.WebsiteAICallCenter;
const center = sdk.createWebsiteCallCenter({
  engine: sdk.createLocalRuleEngine({ scenarios }),
  stt: sdk.createWasmSttAdapter(),
  tts: sdk.createPiperTtsAdapter({
    fallback: sdk.createNoopTtsAdapter()
  })
});

const actions = sdk.createSafeActionRegistry()
  .register({
    id: 'show-account',
    label: 'Show account settings',
    run: () => document
      .querySelector('#account')
      ?.scrollIntoView({ block: 'center' })
  });

Human test path

Five checks before you publish.

If all five boxes pass on your phone over LTE, the static demo is ready to share.

Secure context

Required for microphone access. GitHub Pages provides HTTPS.

Not run

WASM available

Required by Transformers.js and Piper browser inference.

Not run

Worker support

Required to keep model work off the main UI thread.

Not run

Browser storage

Model downloads should be cacheable after first load.

Not run

Microphone API

Permission is requested only after the user starts voice mode.

Not run

Get started

Ship it from a repository, a CDN, or GitHub Pages.

Run locally

npm install
npm run site:build
python3 -m http.server 4173 -d _site

Open the working example

The vanilla example contains the concrete page actions, scenario engine, and WASM speech adapters.

Open examples/vanilla

FAQ

Designed for static hosting and honest runtime boundaries.

Does this use the browser Speech API?

No. The default speech path uses WASM STT and Piper WASM TTS. The fallback is no-op so audio is never silently sent to browser-vendor speech services.

Will it work on GitHub Pages?

Yes for the static overlay, text path, workers, and non-threaded WASM. Models are downloaded lazily from their configured CDNs.

Can I connect a real AI backend?

Yes. Swap the local scenario engine for the HTTP adapter and keep the same registered action boundary.

Why are models not committed?

Model binaries are large and should stay out of the repo. First-load downloads are cached by the browser where supported.

Add a private AI call-center to any website.

From live demo to your own no-code flow in minutes.

Try the live demo

Build a flow, no code

Ship it anywhere

One reusable interaction layer, no app framework required.

Framework-agnostic

Browser speech stack

Registered actions only

Talk to the page, then let the page guide itself.

Headset and speaker check

Settings and profile path

Browser-local checks

Support ticket draft

Manage the call flow from one readable list.

Speech and guidance stay modular.

Mic input

WASM STT

Scenario engine

Piper WASM TTS

Copy the static files. Register only safe page actions.

Five checks before you publish.

Secure context

WASM available

Worker support

Browser storage

Microphone API

Ship it from a repository, a CDN, or GitHub Pages.

Run locally

Open the working example

Designed for static hosting and honest runtime boundaries.