`<ChatWidget />`

The whole stack in one component — useNeuron, useChatSession, model loader, error states, message list, composer. Drop it into a page with a model id and you have a working chat.

Both tabs below run an actual SmolLM2 360M model — same model, two framework wrappers. Click "Launch demo" to download ~250 MB on first run (cached after).

Vanilla / Web Components version is the <alz-chat-widget> custom element from @agent-layer-zero/dendrite-ui. Same engine, no framework — works in Astro, Svelte, Solid, plain HTML.

<script type="module">
  import '@agent-layer-zero/dendrite-ui'
  import '@agent-layer-zero/soma/chat-components.css'
</script>

<alz-chat-widget
  model-id="SmolLM2-360M-Instruct-q4f16_1-MLC"
  system-prompt="You are a friendly demo assistant."
  style="height: 500px; display: block;"
></alz-chat-widget>

<script setup lang="ts">
import { ChatWidget } from '@agent-layer-zero/dendrite-vue'
import '@agent-layer-zero/soma/chat-components.css'
</script>

<template>
  <ChatWidget
    model-id="SmolLM2-360M-Instruct-q4f16_1-MLC"
    system-prompt="You are a friendly demo assistant."
    empty-title="Try me out"
    :temperature="0.3"
    :max-tokens="512"
  />
</template>

import { ChatWidget } from '@agent-layer-zero/dendrite-react'
import '@agent-layer-zero/soma/chat-components.css'

export function App() {
  return (
    <ChatWidget
      modelId="SmolLM2-360M-Instruct-q4f16_1-MLC"
      systemPrompt="You are a friendly demo assistant."
      emptyTitle="Try me out"
      temperature={0.3}
      maxTokens={512}
    />
  )
}

<script type="module">
  import '@agent-layer-zero/dendrite-ui'
  import '@agent-layer-zero/soma/chat-components.css'
</script>

<alz-chat-widget
  model-id="SmolLM2-360M-Instruct-q4f16_1-MLC"
  system-prompt="You are a friendly demo assistant."
  style="height: 500px; display: block;"
></alz-chat-widget>