チャット UI だけを引き受けます

ページの隅に置けるチャットウィジェットのカスタム要素です。通信も状態管理も発言の保存も持たず、あなたが持っている発言の配列を受け取って描きます。

Lit 3 依存は lit だけ gzip 26 KB MIT

このページで動いています

右下のランチャーは本物の Chit UI です。開いて入力すると返事が返ります（通信はせず、このページの中で作っています）。ドラッグで場所も動かせます。

入れる

<script> 1 本で使えます。ビルドは要りません。

<script type="module" src="https://cdn.jsdelivr.net/npm/@hidemikimura/chit-ui/dist/chit-ui.min.js"></script>

<chit-ui id="chat"></chit-ui>

npm から使うときは Lit も一緒に入れます。

npm install @hidemikimura/chit-ui lit

import '@hidemikimura/chit-ui';   // <chit-ui> を登録する

いちばん小さい例

送信されたら chat-submit が飛んできます。発言を積むのも、バックエンドに聞きに行くのも、あなたのコードです。

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

chat.addEventListener('chat-submit', async (event) => {
  const text = event.detail.text;

  chat.messages = [...chat.messages, { id: crypto.randomUUID(), role: 'user', text }];
  chat.busy = true;
  chat.loading = true;

  const reply = await yourBackend(text);

  chat.loading = false;
  chat.busy = false;
  chat.messages = [...chat.messages,
    { id: crypto.randomUUID(), role: 'assistant', text: reply }];
});

messages の所有者はあなたです。ライブラリが書き換えることは一度もありません。そのぶん、保存も復元も未読管理も自分のやり方でできます。

できること

5 つの発言形式

素のテキスト、HTML、Lit のテンプレート、DOM 要素、そしてカスタム要素。注文カードでも予約フォームでも吹き出しの中に置けます。

テーマと CSS パーツ

色・大きさ・位置・角丸・しっぽをオブジェクトで指定。細部は CSS カスタムプロパティと ::part() で直接触れます。

スマホで素直に動く

幅が狭ければ全画面。キーボードが出ている間も入力欄が隠れず、入力欄にフォーカスしても画面が拡大しません。

読み手のスクロールを奪わない

最新に追従するのは最下部にいるときだけ。さかのぼって読んでいる人は動かさず、「最新へ」のボタンを出します。

アクセシビリティ

ダイアログとして扱われ、Esc で閉じ、フォーカスが行き来します。既定テーマの配色はすべて WCAG AA を満たします。

AI 向けの説明書つき

パッケージに skills/ が入っています。Claude Code などに読ませると、この API の癖を踏まえたコードを書いてくれます。

次に読む

使い方は、発言の形・テーマ・待ち時間の見せ方・ドラッグ・スマホでの振る舞いまでを順に説明します。プロパティやイベントを引きたいときはリファレンスへ。