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’s parts array can include reasoning and tool parts alongside its text part. <kai-chat> renders every part in order automatically — no extra elements needed.

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


await customElements.whenDefined('kai-chat');


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


chat.messages = [
  { id: 'u1', role: 'user', parts: [{ type: 'text', text: 'Current price of NVDA vs its 52-week high?' }] },
  {
    id: 'a1',
    role: 'assistant',
    parts: [
      // Collapsed thinking block — expands on click
      {
        type: '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
      {
        type: 'tool',
        tool: {
          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: 'tool',
        tool: {
          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.',
        },
      },
      // Streaming text answer, last, so it reads as the final word
      { type: 'text', text: 'NVDA is at **$132.40**, 18% below its 52-week high of $161.58.' },
    ],
    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 part’s tool.state field as your backend emits events — the same chat.messages = chat.messages.map(…) pattern used for token-by-token text streaming.

The reasoning part shape

Section titled “The reasoning part shape”
{ type: '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”