AI に Chat インターフェースを作らせてみた — 3度目の固定枠で "systemic" が見えた（やってみた #12）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。複雑系4本目、今回は Chat インターフェース。

条件は同じ（出荷物そのもの＋docs だけ、ソース非公開）。お題は /chat に、メッセージ列（送信者・アバター・時刻・自分/相手の見分け）、入力 composer（Enter 送信）、送信後の「typing…」→返信シミュレート、空状態。

結果 — 4.5/5（最高点タイ）

npm run build 成功、static prerender、コンソールエラー0。

チャット部品は本物だった。

• ChatMessage: role（assistant/user/system）で見た目切替・アバター・時刻・typing キャレット・標準アクション内蔵。時刻が pre-formatted 文字列で、コンポーネント内で Date を整形しない設計＝hydration mismatch を避けられる（良い設計）。
• ChatInput: controlled・IME 対応（日本語変換中の確定 Enter を送信しない）・Shift+Enter 改行・isProcessing で Stop ボタン化。
• docs も Chat 系はコード例が fetch に映る（#50 が出ない数少ない例）。
• 既定文言は日本語（日本語DS らしさ）。Tooltip self-wrap で provider 不要（#52）。

粗さ — 3度目の固定枠で、ついに "systemic" だと分かった

ChatTemplate がまた固定枠だった: w-[1280px] h-[720px] h-screen w-full overflow-hidden。Auth(#55)・Kanban(#60) に続いて3つ目。 さすがに怪しい。全パターンテンプレを棚卸ししたら——

❌ 固定枠が残る: Bannalyze / Chat / Dashboard / Editor / Landing / MediaLibrary / Settings（7個）
✅ clean:        Auth(#55) / Kanban(#60) / Blog / Docs / Onboarding / Pricing

7個も残っていた。 つまり——#55 で Auth、#60 で Kanban と、instance を1個ずつ直していたが、root は class だった（#3→#52 の Tooltip と全く同じ構図）。コールドテストの価値はここ：3度目に当たって初めて「これは systemic だ」と確信できる。 → #66 で7個まとめて class ごと潰す。

ほかに:

• 孤児コンポーネント: AIChatInput / AIChatMessage が src にあるのに barrel 未 export（dead code）→ export か削除
• Badge に success variant が無い（status pill で欲しくなる・現状 4種のみ）

学び — instance を踏むたび、class が見えてくる

#55 Auth で固定枠を1個直した
#60 Kanban でまた直した（同じやつ？）
#12 Chat で3度目 → 棚卸し → 7個 systemic と判明 → class ごと #66

これは #52（Tooltip 28個）と同じ。1個ずつ直していると root が見えない。複雑系を通し続けると、3度目4度目で "これは class だ" と確信に変わる。 だから loop-until-dry は意味がある。盛らず、systemic と分かったら systemic と書いて、まとめて直す。

次回予告（やってみた #13）

• オンボーディング（多段ウィザード）（OnboardingFlow / Stepper）— 複雑系。

試す

• gunjo.jp ／ npm @gunjo/ui ／ GitHub
• 前回まで: #1〜#11
• 母艦: 群青（@gunjo/ui） ／ なぜ要るのか: AI 時代のデザインシステム論
• GunjoUI by UIXHERO

まだ alpha。3度目で systemic に気づける——それが、使い続けてテストする意味。

---

<!-- 公開前: #66 反映後に記述更新／スクショ確定／相互URL差込／EN(dev.to)ミラー -->