Framework Packages

The core @agent-layer-zero/dendrite package is framework-agnostic and ships only the headless runtime. For prebuilt UI there are three sibling packages — one for each major consumer shape.

@agent-layer-zero/dendrite-vue

Vue 3 components + composables.

npm install @agent-layer-zero/dendrite @agent-layer-zero/dendrite-vue @agent-layer-zero/soma

Peer deps: @agent-layer-zero/dendrite ^0.4.0, @agent-layer-zero/soma ^0.2.0, vue ^3.3.0.

Composables:

• useNeuron(config, options?) — creates a Neuron with reactive state. options.enabled can be set to false to skip creation (used when a widget receives an external Neuron).
• provideNeuron(config) / useProvidedNeuron() — provide/inject pattern for sharing a Neuron across components.
• tryUseProvidedNeuron() — soft-lookup variant that returns null instead of throwing.
• useChatSession(source, options?) — extracts the messages / streamingContent / send / stop logic used inside <ChatWidget> so custom layouts can reuse it.

Widgets (all accept an optional :neuron-state prop for background loading / multi-Neuron):

• <ChatWidget> — integrated chat
• <ChatModal> — floating bubble + popup
• <ChatSidebar> — slide-in panel
• Granular: <MessageBubble>, <MessageList>, <Composer>, <ModelLoader>, <ErrorDisplay>, <EmptyState>, <MobileUnsupported>, <StreamingText>, <InferenceIndicator>

@agent-layer-zero/dendrite-react

React 18/19 components and hooks with the same shape as the Vue package.

npm install @agent-layer-zero/dendrite @agent-layer-zero/dendrite-react @agent-layer-zero/soma

Peer deps: @agent-layer-zero/dendrite ^0.4.0, @agent-layer-zero/soma ^0.2.0, react ^18 || ^19, react-dom ^18 || ^19.

Hooks:

• useNeuron(config, options?) — same semantics as Vue; options.enabled for conditional creation.
• <NeuronProvider config={...}> / useProvidedNeuron() — context-based sharing.
• tryUseProvidedNeuron() — soft-lookup variant.
• useChatSession(source, options?) — extracted chat-session hook.
• NeuronContext — raw React context, for advanced use.

Components: same set as Vue with React conventions (onSend={...} callbacks instead of @send events). All integrated widgets (<ChatWidget>, <ChatModal>, <ChatSidebar>) accept an optional neuronState prop.

@agent-layer-zero/dendrite-ui

Framework-agnostic Web Components. Works in any HTML page, Svelte, Astro, Angular — anywhere that supports custom elements (i.e. everywhere).

npm install @agent-layer-zero/dendrite @agent-layer-zero/dendrite-ui @agent-layer-zero/soma

Peer deps: @agent-layer-zero/dendrite ^0.4.0, @agent-layer-zero/soma ^0.2.0.

Custom elements:

• <alz-chat-widget> — integrated chat widget (auto-registered on import)

Primitives:

• createNeuronHandle(config) — creates an observable NeuronHandle with the same shape as useNeuron's return but as a plain JS object with subscribe(listener). Used to preload a Neuron at page boot and hand it to a widget later via widget.attach(handle).
• NeuronHandle type — { neuron, isLoading, isGenerating, loadPercent, loadText, error, ..., subscribe, destroy }

Usage:

<script type="module">
  import { createNeuronHandle } from '@agent-layer-zero/dendrite-ui'
  import '@agent-layer-zero/dendrite-ui'  // registers <alz-chat-widget>
  import '@agent-layer-zero/soma/chat-components.css'

  const handle = createNeuronHandle({
    modelId: 'gemma-2-2b-it-q4f16_1-MLC',
    systemPrompt: 'You are a helpful assistant.',
  })

  customElements.whenDefined('alz-chat-widget').then(() => {
    document.querySelector('alz-chat-widget').attach(handle)
  })
</script>

<alz-chat-widget style="height: 500px; display: block;"></alz-chat-widget>

@agent-layer-zero/soma

The shared CSS design system consumed by all three framework libs. You install it as a peer once; it supplies theme tokens, animations, and the BEM stylesheet for every chat component.

npm install @agent-layer-zero/soma

// once in your app entry
import '@agent-layer-zero/soma/chat-components.css'

Also publishes theme.css, animations.css, base.css, chat.css (markdown prose), components.css (general UI), and all.css (everything in one import), plus a Tailwind preset.

When to use which

You're building…	Pick
Custom chat UI from scratch	dendrite only
Vue app	dendrite + dendrite-vue + soma
React app	dendrite + dendrite-react + soma
Svelte / Solid / Astro / vanilla HTML	dendrite + dendrite-ui + soma
Multi-framework site (e.g. Astro with React + Vue islands)	Pick per island — they all read the same soma CSS

All three framework libs expose the same conceptual surface: create a Neuron, optionally share it across components, render chat UI. The primitives (useNeuron / createNeuronHandle) plug identically into Background Loading & Multi-Neuron.