Reachat
Reaviz · 行銷 · 聊天機器人
Reachat 是一套開源的 React 元件庫，提供現成的聊天介面元件給 LLM 應用，讓一個 AI 聊天介面幾小時就能完成，不必耗上幾週。
關於 Reachat
About
什麼是 Reachat
Reachat 是一套 React 聊天介面元件庫，寫給已經在用 React 與 Tailwind 的開發者。它包辦 LLM 聊天介面必備的每一塊：訊息列表、輸入框、工作階段側欄、Markdown 呈現、檔案上傳，以及由你掌控的樣式層。安裝走 npm，元件直接放進你正在寫的應用裡。
這套元件庫不碰你的後端。它不會自己去呼叫 OpenAI、Anthropic 或任何模型供應商，也不儲存對話。訊息由你的程式送出，請求由你處理，回覆再交回元件。開源聊天元件因此能搭配自架模型、代理伺服器，或你已經付費的服務。
限制在於範圍。Reachat 是介面層，不是完成品。沒有託管版小工具、沒有儀表板，也沒有內建分析。想在不寫程式的官網加一個聊天框，這不是你要的工具。若你本來就在自己的專案裡組 Tailwind 聊天介面，它能省掉絕大多數苦工。
開始使用
- 在專案執行
npm i reachat，並確認 Tailwind 已設定完成，因為元件的樣式依賴它。 - 匯入聊天元件，掛進你的頁面或路由。
- 傳入訊息陣列，並接上一個呼叫自家端點的送出處理函式。
- 用 Tailwind 類別或 slot 調整外觀，再翻一下 Storybook 範例，看看還沒用到的屬性。
產品資訊
快速了解 Reachat 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 正在做 AI 聊天介面的前端開發者：訊息列表、載入狀態、捲動行為這些工作原本要花好幾週，元件庫直接接手，前提是專案已經跑在 React 與 Tailwind 上。
- 沒有專職設計師的小型產品團隊：元件預設的樣子就夠體面，再靠 Tailwind 類別微調，一位開發者不必等設計稿也能改出像樣的介面。
- 想在既有應用裡試做 LLM 功能的人：元件能塞進單一頁面或彈窗，不必拉進另一套框架或多一個執行環境。
任務
- 為自家端點組出聊天畫面：請求由你處理，Reachat 負責畫出對話，Markdown、表格、程式碼區塊都含在內。
- 呈現帶工具呼叫的代理回覆：訊息模型支援 user、assistant、system、tool 四種角色，多步驟回覆不需要自己寫渲染邏輯。
- 把聊天介面調成品牌樣子：Tailwind 工具類別加上 slot，顏色、間距、元件內部細節都能改。
情境
- 為客服或業務團隊上線內部 copilot：有工作階段列表的主控台版型，比浮動小工具更適合每天反覆使用。
- 在 SaaS 儀表板加入文件問答：檔案上傳與圖片預覽已內建，使用者可以在同一串對話裡附上 PDF 或截圖。
- 換掉一套遇到長對話就崩的手寫聊天畫面：分頁與工作階段分組讓列表在對話變長後仍好操作。
主要功能
兩種版型
Reachat 提供附工作階段側欄的主控台版型，以及更接近側邊面板的伴隨版型。團隊挑一個貼近使用者習慣的就好。兩者共用同一批訊息元件，換版型不必重做整串對話。
真實模型輸出也能好好呈現
模型回覆很少是平鋪直敘的句子。Reachat 一開始就能處理 Markdown、GFM 表格、語法高亮、JSON 區塊、清單、數學式與 YouTube 嵌入，需要更多還能掛 remark 與 rehype 外掛。這一塊是多數團隊動工時最容易低估的地方。
為代理設計的訊息角色
每則訊息帶有 user、assistant、system 或 tool 角色。工具呼叫與結果能和對話待在同一串裡，這對會先搜尋、查詢或執行函式再回答的代理式聊天介面很關鍵。資料仍在你手上，元件庫只負責顯示。
附件與圖片預覽
使用者可以直接在輸入框上傳檔案、預覽圖片。附件跟著你的訊息 payload 走，存放位置與送往模型的方式都由你決定，不必再接一個獨立的上傳小工具。
提及與指令
輸入框透過 Tiptap 支援 @ 提及與斜線指令。使用者不必離開輸入框就能引用文件、聯絡人或存好的提示詞。每個指令要做什麼由你定義，功能因此黏在你的產品上，而不是一套固定選單。
Tailwind 主題與 slot
每個元件都吃 Tailwind 類別，slot 則打開內部結構，改一顆按鈕不必 fork 整份原始碼。沒有 CSS-in-JS 執行環境，也沒有主題設定檔要維護。設計系統若本來就講 Tailwind，聊天畫面直接沿用同一套語彙。
長對話不會失控
訊息分頁、工作階段智慧分組、鍵盤快捷鍵都已內建。幾百則訊息的對話照樣能操作，分組也讓相關工作階段在側欄排在一起。鍵盤操作涵蓋輸入框與訊息列表。
優缺點
優點
- Apache 2.0 授權，放進商業產品不必先跑一輪法務審查。
- 不綁後端，任何供應商或自架模型都能用。
- 接下聊天介面最瑣碎的部分，包括 Markdown 邊界情況、程式碼區塊與新訊息進來的捲動處理。
- Tailwind 與 slot 讓改版成本很低，只改一個元件也划算。
缺點
- 預設你用 React 與 Tailwind。Vue、Svelte 或純 HTML 專案吃不到任何好處。
- 沒有託管版本，部署、驗證與訊息保存都得自己來。
- 說明文件偏重 Storybook 範例，遇到邊界情況常要回頭讀原始碼。
- 4.0 版改動了 API，較早的教學文章可能跟現在的程式碼對不上。
常見問題
它提供聊天介面元件給會跟 LLM 對話的 React 應用。後端與模型呼叫由你準備，介面由 Reachat 提供。
相關內容
探索與 Reachat 相關的工具、技能與文章。
Reachat 替代方案
ngram 2.0
ngram · 影片 · 行銷ngram 2.0 是給團隊使用的 AI 影片生成器。一句描述、一段螢幕錄影或一個產品網址，就能變成配好旁白的解說影片、產品示範或 AI 虛擬主播影片，而且每個場景都還能修改。
shippedit.me
Krawlup · 行銷 · 商業shippedit.me 現在會轉向 Krawlup，這是一個每週稽核 SEO、AEO 與載入速度的網站平台，並透過 MCP 把修正交給 AI 編碼代理執行。
MePersona
MePersona, Inc. · 寫作 · 生產力 · 行銷MePersona 是為創作者設計的 AI 統一收件匣。它學習你的說話方式，在 12 個平台上草擬粉絲訊息回覆，只送出你核准的內容。