SvelteChatKit: プロバイダに依存しないAIチャットUI、OpenAI、Dify、n8nなどに対応

SvelteChatKit は、SvelteKit 2 と Svelte 5（Runes）向けに設計された完全なストリーミングチャットインターフェースであり、単一のインターフェースを介して任意のLLMバックエンドと通信できます。OpenAI互換API、Ollama、Dify、またはカスタムエンドポイントのいずれを使用していても、設定オブジェクトを変更するだけで切り替えられ、UI、状態管理、Markdownレンダリング、永続化はそのまま維持されます。もしチャットUIを特定のベンダーのAPIに縛られたくないのであれば、このキットは最適です。

主な機能：トークン単位のストリーミングレンダリング（SSE、NDJSON、またはプレーンテキストストリームに対応）と、途中で停止できるボタン；プロバイダ非依存の設計 – 1つのChatProviderインターフェースで、キットのコードに触れることなく新しいバックエンドを追加可能；localStorageによるセッション履歴の永続化（オプトイン、SSRセーフ）；GFM形式のMarkdownレンダリングとhighlight.jsによるコードハイライト、DOMPurifyでサニタイズ；スマート自動スクロール – ユーザーが下部近くにいる場合のみストリームに追従し、スクロールアップ中はビューを引きはがさない、フローティングの「一番下までスクロール」ボタン；エラーハンドリング – 型付きChatProviderErrorとアクション可能なメッセージ、消去可能なインラインエラーバナー、メッセージごとのエラー状態；モバイル対応 – 375px幅で使用可能、16px入力（iOSズーム回避）、自動拡張テキストエリア；ダークモード – Tailwindのdark:バリアントによる一貫したライト/ダークスタイリング；TypeScript厳格モード – 完全に型付けされた公開API；ゼット設定デモモード – 内蔵モックプロバイダがAPIキー不要で動作。

対応プロバイダ：OpenAI互換（OpenAI、OpenRouter、Groq、LM Studio、vLLM、llama.cpp、Azureスタイルゲートウェイ）– トランスポートはSSE；Ollama – NDJSON；Dify – SSE；カスタムエンドポイント – 自動検出（SSE、ストリームテキスト、またはプレーンボディ）；モック – デモ用。

クイックスタート：リポジトリをクローンし、npm install、.env.exampleをコピー、npm run devでモックプロバイダ上でチャット開始、キー不要。.envを編集すれば実バックエンドに切り替え可能。Node 20以上が必要。

使用方法：プロバイダを作成し、Chatインスタンスに渡してChatWindowをレンダリング。Chatはrunesリアクティブなmessages、status、error、busy、さらにsend()、stop()、clear()、setProvider()メソッドを公開しており、カスタムUIの構築も可能。

カスタムプロバイダの追加は約20行：ChatProviderインターフェースを実装し、registerProviderで登録すれば、ビルトインと同じファクトリから利用可能。詳細なドキュメントあり。

設定：.envファイルのPUBLIC_*変数で設定。すべてオプション。注意：PUBLIC_*変数はクライアントバンドルに埋め込まれるため、本番ではサーバーサイドでキーを保持し、カスタムエンドポイントプロキシ経由でAuthorizationヘッダーを追加すること。

アーキテクチャ：コンポーネント層 – ChatWindow、MessageList、MessageBubble、ChatInput、Markdown、TypingIndicator；状態管理 – Chat runesクラス；プロバイダ – ChatProviderインターフェース；トランスポート補助 – sseStream、lineStream、textStream、ensureOk。

ロードマップ：認証サポート、ベクターDB/RAG統合ヘルパー、プラグインシステム、UIテーマ追加、ファイル添付、関数/ツール呼び出しUI、npmパッケージ公開。

SvelteChatKit はMITライセンスで提供され、コントリビューションを歓迎します。