You
Why did deploy 42 take longer than usual?
DocsPlatform
Assistant Thread
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 Thread with a focused fixture — the component this page documents,
not the shared showcase. Five-framework parity is demonstrated once, by the Thread demo
below.
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 all three.
Install Assistant Thread
npm i @grassroot/ui-machines
Behaviour contract
- Stable identity: every root exposes
data-slot="assistant-thread"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 the real framework package.
Show code
packages/ui/react/src/assistant.ts
import { Thread } from "@grassroot/ui-react/assistant";
Show code
packages/ui/vue/src/assistant.ts
import { Thread } from "@grassroot/ui-vue/assistant";
Show code
packages/ui/angular/src/assistant.ts
import { GrassrootAssistantThread } from "@grassroot/ui-angular/assistant";
Show code
packages/ui/svelte/src/assistant.ts
import { Thread } from "@grassroot/ui-svelte/assistant";
Show code
packages/ui/solid/src/assistant.ts
import { Thread } 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-*.