Assistant
A streamed answer.
DocsPlatform
Assistant Dot Matrix
One assistant-ui behaviour contract, shared by every layer on this page and by all five framework adapters. Where a machine exists it holds the state and nothing else. The headless layer turns that into accessible DOM, and the styled layer is where tokens finally get involved.
This component, live
The styled React DotMatrix with a focused fixture — the component this page documents,
not the shared showcase. Five-framework parity is demonstrated once, by the Thread demo
below and on the Thread page.
Explore the layers
Machine is state with no framework attached, headless adds the accessible anatomy on top, and styled adds Grassroot's own visual recipe. This component has no statechart machine of its own, so its headless layer is where the contract starts.
Install Assistant Dot Matrix
npm i @grassroot/ui-headless-react
Behaviour contract
- Stable identity: every root exposes
data-slot="assistant-dot-matrix"or its documented sub-slot. - Layer direction: styled code is built on the headless contract, and headless code only ever reaches runtime state through its own adapter. Nothing skips a layer.
- Accessibility: interactive controls keep native semantics, labels, focus order and reduced-motion behaviour.
- Tokens: the package CSS only ever refers to Grassroot token variables. No raw colour value is part of the public recipe, so re-theming can't miss one.
Framework adapters
The public names stay aligned across React, Vue, Angular, Svelte and Solid. Each tab mounts that framework's real assistant package showing the shared Thread composition — the conversation surface Assistant Dot Matrix composes into. The import for Assistant Dot Matrix itself is under Show code.
Show code
packages/ui/react/src/assistant.ts
import { DotMatrix } from "@grassroot/ui-react/assistant";
Show code
packages/ui/vue/src/assistant.ts
import { DotMatrix } from "@grassroot/ui-vue/assistant";
Show code
packages/ui/angular/src/assistant.ts
import { GrassrootAssistantDotMatrix } from "@grassroot/ui-angular/assistant";
Show code
packages/ui/svelte/src/assistant.ts
import { DotMatrix } from "@grassroot/ui-svelte/assistant";
Show code
packages/ui/solid/src/assistant.ts
import { DotMatrix } from "@grassroot/ui-solid/assistant";assistant-ui mapping
The names come from assistant-ui's own component vocabulary, but the packages are Grassroot's:
runtime state lives in @grassroot/assistant, the DOM contracts live in the headless
adapters, and the visual recipes live in @grassroot/ui-*.