Skip to content
kitn AI/UI

Reasoning assistant

An assistant that works a problem out loud. Each assistant turn opens with a collapsible reasoning block — the model’s working — followed by a concise answer. Here it debugs a real p99 latency regression across a few follow-up turns. Expand any “Thought for…” block to read the reasoning, then ask your own follow-up.

How it works

Section titled “How it works”

Reasoning lives on the message, not in a separate element. Each ChatMessage can carry a reasoning object alongside its content; <kai-chat> renders it as a collapsible block above the answer. The label is the trigger text (defaults to Reasoning) and text is rendered as markdown.

<kai-chat id="chat" chat-title="Senior engineer assistant"></kai-chat>


<script type="module">
  import '@kitn.ai/ui/elements';


  const chat = document.getElementById('chat');
  chat.messages = [];


  chat.addEventListener('kai-submit', async (e) => {
    const prompt = e.detail.value;
    const aId = crypto.randomUUID();


    chat.messages = [
      ...chat.messages,
      { id: crypto.randomUUID(), role: 'user', content: prompt },
      { id: aId, role: 'assistant', content: '' },
    ];
    chat.loading = true; // shows the thinking indicator


    // stream the final answer token-by-token
    const { reply, reasoning } = await askAssistant(prompt);
    for await (const token of reply) {
      chat.messages = chat.messages.map((m) =>
        m.id === aId ? { ...m, content: m.content + token } : m,
      );
    }


    // attach the reasoning once the answer is complete
    chat.messages = chat.messages.map((m) =>
      m.id === aId
        ? { ...m, reasoning, actions: ['copy', 'like', 'dislike'] }
        : m,
    );
    chat.loading = false;
  });
</script>

reasoning shape — set on any assistant message:

fieldtypenotes
textstringThe reasoning body, rendered as markdown
labelstring?Trigger text — defaults to Reasoning (e.g. Thought for 4s)

Attaching reasoning only after the answer finishes keeps the thinking indicator clean while tokens stream, then reveals the working in one step. The block stays collapsed by default, so readers who want the answer see it first and can open the reasoning on demand.

Next steps

Section titled “Next steps”