Custom chat UI examples

Working chat front ends in plain HTML, CSS and JavaScript: animated characters, a CRT terminal, inline components, and a particle renderer.

Live demos · Run the same examples locally: npm start.

Each directory contains a runnable example and an implementation walkthrough. No framework or build step. These were built with AI coding agents; several include the original prompts and build notes.

The UI code is public domain. Conversations use Stand Chat's hosted API, with a shared demo configuration included.

Run locally

npm start

This builds the example list and serves the site at http://localhost:3000. It needs Node 18 or newer and installs nothing.

The examples load Stand with data-stand-id="demo", Stand Chat's shared demo site. It answers on any domain, including localhost, through Stand Chat's demo Stand-in. The status pill in each example's top bar shows what Stand sees. Add ?preview to a URL to show hidden Stand elements while you work on layout.

Copy an example

npx degit standchat/examples/stand-card my-stand-card

Then replace its Stand <script> tag with the installation snippet from Sites in Stand, which carries your own Site ID.

How the site works

• index.html is the front page. Its gallery lists examples.json, which build.mjs generates from each example's <head>. Short browsing descriptions in index.html highlight the reusable chat UX; new contributions use their own metadata automatically. The ORDER list in build.mjs puts the most interesting examples first; any others follow alphabetically. The introduction uses the examples' social images in a collage inspired by _shared/og.png.
• _shared/ holds the example pages' top bar and "How it works" styles. The examples work without it.
• _shared/analytics.js sends visits to stand.chat's PostHog project, on examples.stand.chat only: never on localhost, previews or copied examples. There's no cookie banner: PostHog uses cookies only where stand.chat would (the visitor accepted there, or stand.chat wouldn't ask), and counts everyone else without cookies. The front page and example.js load it.
• _template/ is the starting point for a new example. See CONTRIBUTING.md.
• Social images (og.png) are committed. The build only checks that they are 1200×630; it never regenerates them. To recapture with Chrome, run npm run og for all of them or npm run og -- <folder> for one (og.mjs).
• Vercel runs node build.mjs and serves the repository as it is (vercel.json).

Custom chat accounting

Raw Visitor API clients send POST /v1/events/activate when the visitor opens a custom chat invitation. An inline composer can instead activate on its first submitted message. Discovery, page mount, restoring a conversation, and later messages are not activations. Carry the latest activation ID into POST /v1/sessions; telemetry remains best effort and never blocks chat.

The standalone clients expose activate() and closeInvitation() for actual open/close boundaries, with a first-submit fallback for inline reuse. Keep these UI hooks when copying an example. The character clients retry failed delivery once with the same ID; the inline client family uses its existing best-effort beacon. Copied integrations need the updated client and UI hooks; updating this repository cannot change copies already installed elsewhere. See the custom UI guide for the complete contract.

Run npm test for client accounting and example-model regression checks, and npm run build to validate the catalog.

License

Public domain under the Unlicense. Copy anything.

Stand Chat's name, logo and mascot aren't covered by it.