Reachat
Reaviz · マーケティング · チャットボット
Reachat は LLM アプリ向けのチャットUI コンポーネントをまとめたオープンソースの React ライブラリだ。AI チャット インターフェースが数週間ではなく数時間で形になる。
Reachat について
About
Reachat とは
Reachat は、React と Tailwind をすでに使っている開発者向けの React チャットUI ライブラリである。LLM チャットUI に必要な部品はひととおり揃う。メッセージ一覧、入力欄、セッションのサイドバー、Markdown 描画、ファイル添付、そして自分で握れるスタイル層だ。npm で入れて、書きかけのアプリにコンポーネントを差し込む。
このライブラリはバックエンドに触らない。OpenAI や Anthropic などのプロバイダーを勝手に呼ばず、会話も保存しない。メッセージを渡すのも、リクエストを投げるのも、返答を受け取るのも自分のコードだ。オープンソース チャットUI の部品でありながら、自前のモデルでもプロキシでも、すでに契約しているサービスでも同じように動く。
制約は守備範囲にある。Reachat は UI 層であって完成品ではない。ホスティングされたウィジェットも、管理画面も、標準の分析機能もない。コードを書かずに企業サイトへチャット欄を置きたいなら、これは向かない。自分のプロジェクトで Tailwind チャットUI を組むなら、面倒な作業のほとんどが消える。
はじめかた
- プロジェクトで
npm i reachatを実行し、Tailwind が設定済みか確認する。コンポーネントのスタイルは Tailwind に依存する。 - チャットコンポーネントを import し、ページかルートに配置する。
- メッセージ配列と、自前のエンドポイントを叩く送信ハンドラーを渡す。
- Tailwind のクラスか slot で見た目を調整し、まだ使っていない props は Storybook のデモで確認する。
AIツール情報
Reachatの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- AI チャット インターフェースを作るフロントエンド開発者
- 専任デザイナーがいない小さなプロダクトチーム
- 既存アプリに LLM 機能を試したい人
タスク
- 自前のエンドポイントに対するチャット画面の組み立て
- ツール呼び出しを含むエージェント応答の表示
- ブランドに合わせた見た目の調整
シーン
- サポートや営業チーム向けの社内コパイロットの配備
- SaaS のダッシュボードへの文書 Q&A の追加
- 長い会話で崩れた自作チャット画面の置き換え
主な機能
2つのレイアウト
Reachat にはセッション一覧付きのコンソール型と、サイドパネル寄りのコンパニオン型がある。ユーザーの働き方に合うほうを選べばいい。どちらも同じメッセージコンポーネントを共有するため、レイアウトを変えてもスレッドを作り直さずに済む。
実際のモデル出力を前提にした Markdown 描画
モデルの返答が素の文章で来ることは少ない。Reachat は Markdown、GFM の表、シンタックスハイライト付きコード、JSON ブロック、リスト、数式、YouTube 埋め込みを最初から描ける。足りなければ remark と rehype のプラグインを足せる。着手時に多くのチームが見積もりを誤るのがこの部分だ。
エージェント向けのメッセージ役割
各メッセージは user、assistant、system、tool の役割を持つ。ツール呼び出しとその結果を会話と同じスレッドに置ける。回答前に検索や問い合わせ、関数実行を行うエージェント型チャットUI では、ここが効く。データは自分の側に残り、表示だけをライブラリが担う。
添付ファイルと画像プレビュー
入力欄からファイルを送信でき、画像はその場でプレビューできる。添付は自分のメッセージ payload に載るので、保存先もモデルへの送り方も自分で決められる。別のアップロード用ウィジェットを繋ぐ必要はない。
メンションとコマンド
入力欄は Tiptap 経由でメンションとスラッシュコマンドに対応する。文書、連絡先、保存済みのプロンプトを入力欄から出ずに参照できる。各コマンドの動作は自分で決める。だから固定メニューではなく、プロダクトに紐づいた機能として残る。
Tailwind のテーマと slot
すべてのコンポーネントが Tailwind クラスを受け取り、slot が内部要素を開く。ボタン1つを変えるためにソースを fork する必要はない。CSS-in-JS のランタイムも、保守するテーマ設定ファイルもない。デザインシステムがすでに Tailwind を使っているなら、チャット画面も同じ語彙を引き継ぐ。
長いスレッドの扱い
メッセージのページネーション、セッションの自動グルーピング、キーボードショートカットを備える。数百件の会話でも操作感は落ちない。関連するセッションはサイドバーでまとまり、キーボード操作は入力欄とメッセージ一覧の両方をカバーする。
メリットとデメリット
メリット
- Apache 2.0 ライセンスなので、商用プロダクトに組み込む前に法務確認を挟まなくていい。
- バックエンドと結合していない。どのプロバイダーでも自前ホストのモデルでも使える。
- Markdown の例外処理、コードブロック、新着メッセージ時のスクロールといった面倒な部分を引き受ける。
- Tailwind と slot のおかげで、1つのコンポーネントだけを直す場合でも改修コストが低い。
デメリット
- React と Tailwind が前提だ。Vue、Svelte、素の HTML のプロジェクトでは何も得られない。
- ホスティング版がない。デプロイ、認証、メッセージの永続化はすべて自前になる。
- ドキュメントは Storybook のデモに頼る部分が大きく、例外ケースではソースを読むことになる。
- バージョン 4.0 で API が以前のリリースから変わった。古いチュートリアルは現在のコードと一致しないことがある。
よくある質問
LLM とやり取りする React アプリにチャットUI コンポーネントを提供する。バックエンドとモデル呼び出しは自分で用意し、インターフェースを Reachat が担う。
関連コンテンツ
Reachatに関連するツール、スキル、記事を探す。
Reachatの代替ツール
Tractionwave
TractionWave · 画像 · マーケティングTractionWaveは静止画広告のアテンションヒートマップを作るAIツールだ。PNGかJPGを入れると、予測された注目位置、優先順位付きホットスポット、修正案が返る。予算を投じる前の判断に使う。
OpenSEO - AI Visibility
EveryApp · コーディング · マーケティング · ビジネスOpenSEOはキーワード調査、被リンク、順位追跡、サイト監査、AI検索での可視性をまとめたオープンソースSEOプラットフォームだ。使った分だけ課金され、MCP経由でAIエージェントからデータを引ける。
Plugins Radar
Plugins Radar · マーケティング · ビジネスPlugins Radarは、ChatGPTプラグインがディレクトリ検索と会話内でどこに表示されるか、上にいる競合と変化を追跡するツール。9,885件を毎時チェックする。