GitHub - standchat/examples: Examples on how to use Stand Chat

GitHub

2 min read Original article ↗

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.

Animated 3D chat character Pixel-art character and dialogue box

3D CRT terminal with green phosphor text Particle-rendered chat interface

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

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).

License

Public domain under the Unlicense. Copy anything.

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