Open source · Apache 2.0
Machvive Chat Syncopation
A chat interface is a UI problem before it is a model problem. Dependency-free web components for prototyping complex chat interactions — with an emphasis on user engagement, prompt cognitive load, modern web experiences, and user data domain agency.
Install the package
npm i -S @machfivetechchicago/machvive-chat-syncopation-ai
soon
Install the Claude Code skill
/plugin marketplace add Mach-Five-Group/machvive-chat-syncopation-ai
/plugin install machvive-chat-syncopation@machvive-chat-syncopation
Teaches Claude Code the components, the wiring, and the constraints — so it writes against the real API instead of guessing one.
The smallest thing that works
One tag. It creates its own services element and defaults to a transport that echoes you back — so the entire surface is finishable before a model exists.
<machvive-chat-syncopation>
<machvive-chat-syncopation-canvas></machvive-chat-syncopation-canvas>
<machvive-chat-syncopation-prompt slot="footer"></machvive-chat-syncopation-prompt>
</machvive-chat-syncopation>Nine components
| Tag | What it does |
|---|---|
-services | Headless. The bus, conversation, daemon and cache every surface shares |
machvive-chat-syncopation | The container. Layout only; everything inside is slotted |
-canvas | The transcript — append-only, streaming, reader-respecting autoscroll |
-prompt | The composer. Enter sends, Shift+Enter newlines, Stop interrupts |
-nudge | Suggested openings and a once-only idle prompt |
-cli | Keyboard-first surface with extensible slash commands |
-voice | Push-to-talk dictation and read-aloud, capability-gated |
-inspector | Live bus traffic, for whoever is building the surface |
-history | Stored conversations, with export and real deletion |
Where a chat system can run
Nothing here calls a model. Transports are a uniform interface you fill in — and the one that matters is a model running inside the user agent, via WebLLM or similar.
A model in the browser has no per-token cost. That changes the arithmetic for every case usually ruled out as uneconomic: long-tail support, kiosks, classrooms, internal tools, a field application with no connection at all. Because no component knows where its text came from, offline-first is a configuration rather than a rewrite.
Four commitments
User engagement
An empty prompt box is the highest-friction moment in any chat interface. Suggested openings remove it — and fill the composer rather than sending, so the user stays the author.
Prompt cognitive load
A conversation is a reading surface. Turns stream into one node instead of re-rendering the list, autoscroll follows the bottom only while you are already there, and Send becomes Stop rather than going disabled.
Modern web experiences
Shadow DOM, custom properties that cross the shadow boundary,
prefers-color-scheme,
prefers-reduced-motion, and the Speech APIs where
they exist — with an honest explanation where they do not.
User data domain agency
The conversation lives in the user's browser. Persistence is off until a page turns it on, and the history component lets the person whose words these are see them, export them, and delete them for real.
Also from MachVive
MachVive WebMCP is the sibling package: where Chat Syncopation is the interface a person talks through, WebMCP is how an agent reaches your product without one. They compose well, and neither depends on the other.