Skip to content
kitn AI/UI

Agentic assistant

Agents do more than generate text — they think, call tools, and sometimes fail. <kai-chat> surfaces all of it: a collapsible reasoning block before the answer and a live tool-call panel per invocation, each showing its lifecycle state and full input/output.

How it works

Section titled “How it works”

Each assistant message in messages carries optional reasoning and tools fields. <kai-chat> renders them automatically — no extra elements needed.

import '@kitn.ai/ui/elements';


const chat = document.getElementById('chat');


chat.messages = [
  { id: 'u1', role: 'user', content: 'Current price of NVDA vs its 52-week high?' },
  {
    id: 'a1',
    role: 'assistant',
    // Streaming text answer
    content: 'NVDA is at **$132.40**, 18% below its 52-week high of $161.58.',
    // Collapsed thinking block — expands on click
    reasoning: {
      label: 'Thought for 6 seconds',
      text: "I'll call get_quote for price + 52w_high, then summarise the delta.",
    },
    // Tool-call panels — each shows its lifecycle state
    tools: [
      {
        type: 'get_quote',
        state: 'output-available',       // complete — shows input + output
        toolCallId: 'call_q1',
        input:  { ticker: 'NVDA', fields: ['price', '52w_high'] },
        output: { price: 132.40, week52High: 161.58 },
      },
      {
        type: 'get_news',
        state: 'output-error',           // failed — shows errorText in red
        toolCallId: 'call_n1',
        input:     { ticker: 'NVDA', limit: 5 },
        errorText: 'Request timed out after 5 000 ms.',
      },
    ],
    actions: ['copy', 'like', 'dislike', 'regenerate'],
  },
];

Tool lifecycle states

Section titled “Tool lifecycle states”
stateWhat the panel shows
input-streamingTool name + animated spinner (input arriving)
input-availableTool name + formatted input, awaiting output
output-availableInput + output, collapsible
output-errorInput + errorText in the error colour

Build the live streaming experience by patching the tool’s state field as your backend emits events — the same chat.messages = chat.messages.map(…) pattern used for token-by-token content streaming.

The reasoning shape

Section titled “The reasoning shape”
reasoning?: { text: string; label?: string }

label sets the collapsed trigger text (e.g. "Thought for 6 seconds"). The text renders as markdown inside the collapsible panel. Use the standalone <kai-reasoning> element when you need it outside a chat thread.

Next steps

Section titled “Next steps”