Skip to content

UI kits

Copy-in UI that binds to a contract, the messages on a topic, rather than to one server kit, so it works with every server speaking that contract. Each has a framework-free core and React components; styling is one CSS file driven by --chanx-* variables. Set the registry up once, choosing your framework:

copit registry add chanx-kit-ui github:huynguyengl99/chanx-kit@<tag> \
  --index ui/copit-registry.json --to web/src/chanx-kit --variant react
copit add @chanx-kit/notification @chanx-kit-ui/notification

Kits by feature pairs each with its server kit.

UI kit Contract Description
ag-ui ag-ui@1 Headless state for one AG-UI conversation: messages folded from streamed events, the run in flight, run and cancel. Replay-safe when several tabs share a thread.
audio The pure audio helpers the voice UI kits share: resampling, PCM16 conversion, fixed-duration chunking, levels and base64. No browser APIs, so they run and test anywhere.
chat chat@1 A chat log with history on join and a composer, for any server speaking the chat contract. Shows the room's roster through the presence UI kit.
notification notification@1 A live notification feed with per-topic acknowledgement, for any server speaking the notification contract.
player synthesizer@1 Play what a server speaks, for any server speaking the synthesizer contract. Headless playback with a jitter buffer, instant interruption and playback marks back to the server, plus a React player.
presence presence@1 Who is here, kept current from joins and leaves, for any server speaking the presence contract.
transcriber transcriber@1 Record from the microphone and show live captions, for any server speaking the transcriber contract. Headless capture (resampled PCM16 in numbered chunks), a transcript store, and React recorder and caption components.
voice-agent Talk to an agent: an open microphone, live captions, the reply spoken as it streams, and interrupting by speaking. Composes the transcriber, player and ag-ui UI kits over one session.