# Agentic assistant

An assistant that reasons before answering and shows each tool call — inputs, outputs, and errors — inline in the thread.

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

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.

```js

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

| `state` | What the panel shows |
|---|---|
| `input-streaming` | Tool name + animated spinner (input arriving) |
| `input-available` | Tool name + formatted input, awaiting output |
| `output-available` | Input + output, collapsible |
| `output-error` | Input + `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

```ts
{ 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

- **[`kai-chat` reference](/components/chat/)** — full prop and event list.
- **[`kai-tool` reference](/components/tool/)** — standalone tool-call panel (use outside a thread).
- **[`kai-reasoning` reference](/components/reasoning/)** — standalone reasoning block.
- **[Drop-in chat](/examples/drop-in-chat/)** — the streaming loop that drives content + tool updates.
- **[Workspace app](/examples/workspace/)** — add conversation history and a sidebar.