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