Skip to main content
AI

Ai chat

Provider-agnostic AI chat thread with streaming append, coalesced live-region announcements, slash commands, tool-call cards, and citations.

03

Import

#import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjChatThread } from '@kouji-ui/components';
04

Playground

#playground

How do I make a streaming chat accessible?

Announce replies on sentence boundaries via a single coalesced polite live region, so screen readers hear whole sentences once each — never char-by-char.

What about the visible message log?

Keep it aria-live="off" — the dedicated announcer carries the updates instead.

turns
// store.setMessages(history.slice(0, 4));
<kj-chat-thread [store]="store" kjLabel="Assistant conversation" />