Assistant kit

The assistant your colleagues already know from the Office: a launcher, a panel, steps, answers and a card that asks before it acts. Your app supplies the model, the transport and the data; the kit supplies how it looks.

React parts

Presentational components for React apps. They install the styles with them.

bunx --bun shadcn@4.17.0 add @waimakers/assistant-react
Kit dependencies
assistant-css
npm dependencies
None

From the registry

Transport-free assistant launcher, panel parts, streaming Markdown, reveal and steps. Copy in with assistant-css and pinned digest manifest; pass app persona and callbacks.

Examples

Launcher and welcome

The launcher sits in a corner of your app and opens the panel. An empty conversation shows the intro and a few starters.

Conversation

A reply with its steps, a Markdown answer and a card that waits for the person's OK before anything happens.

Expanded with chats

The expanded panel adds earlier chats beside the conversation.

Plain HTML and CSS

The same look without React. The classes are the contract: keep the structure, and the panel's container queries, mobile sheet and reduced-motion rules come with it. The assistant ships light values only.

bunx --bun shadcn@4.17.0 add @waimakers/assistant-css
Kit dependencies
None
npm dependencies
None

From the registry

Office-faithful, framework-free assistant tokens, launcher and lazy panel styles. Includes legacy Office class aliases and wm-assistant classes. Import tokens and launcher at startup, panel CSS when opened.

<link rel="stylesheet" href="/assistant-kit/assistant-tokens.css" />
<link rel="stylesheet" href="/assistant-kit/assistant-launcher.css" />

<button class="wm-assistant__launcher" type="button" aria-controls="assistant" aria-expanded="false">
  <img class="wm-assistant__launcher-portrait" src="/portrait.svg" alt="" />
  <span>Ask the assistant</span>
</button>

<section id="assistant" class="wm-assistant__panel" role="dialog" aria-modal="false"
  aria-labelledby="assistant-title" tabindex="-1" hidden>
  <header class="wm-assistant__head">
    <span class="wm-assistant__head-portrait">
      <img class="wm-assistant__portrait" src="/portrait.svg" alt="" />
    </span>
    <div class="wm-assistant__head-text">
      <h2 id="assistant-title">Assistant</h2>
      <p class="wm-assistant__subtitle">Your Waimakers assistant</p>
    </div>
    <button class="wm-assistant__icon-button" type="button" aria-label="Minimise">−</button>
  </header>
  <div class="wm-assistant__body">
    <div class="wm-assistant__main">
      <div class="wm-assistant__log" role="log" aria-live="polite" aria-label="Conversation">
        <div class="wm-assistant__entry is-mine">
          <div class="wm-assistant__bubble">Who owns the list page?</div>
        </div>
        <div class="wm-assistant__entry is-reply">
          <img class="wm-assistant__portrait wm-assistant__avatar" src="/portrait.svg" alt="" />
          <div class="wm-assistant__entry-body">
            <div class="wm-assistant__bubble">Paul. He agreed to ship it by Friday.</div>
          </div>
        </div>
      </div>
      <form class="wm-assistant__composer">
        <textarea aria-label="Message the assistant" placeholder="Ask anything"></textarea>
        <div class="wm-assistant__composer-actions">
          <button class="wm-assistant__button wm-assistant__button--primary" type="submit">Send</button>
        </div>
      </form>
    </div>
  </div>
</section>

<!-- Load the panel styles when the panel first opens -->
<link rel="stylesheet" href="/assistant-kit/assistant.css" />
html