chat

chat 是什麼？

chat 是一個通用 AI 聊天用戶端，設計用於搭配服務的 MCP 伺服器。它提供自然語言介面，能連接外部 MCP 伺服器並與其工具互動，不論領域（例如外送、預訂或任務管理）。

專案以 Next.js App Router 應用程式建置，專注於聊天體驗所需的實用 UI 與整合細節：透過 MCP 連接工具、串流回應、訊息歷史，以及多模態內容支援，例如圖片輸入與基於 Markdown 的助理輸出。

主要功能

• 透過 Streamable HTTP 的 MCP 工具整合：連接一個外部 MCP 伺服器，可透過 MCP_URL（任何後端）或 MCP_APPS_URL（TypeScript + 嵌入式 UI）設定；應用程式在執行時拒絕同時設定兩者。
• 具即時輸入指示器的串流 AI 回應：助理輸出會串流顯示，而非一次全送。
• 助理訊息的 Markdown 渲染：助理訊息以 Markdown 渲染，包含表格、清單、程式碼區塊與連結。
• 具裁剪後發送的圖片附件：使用者可附加圖片，發送前提示裁剪，僅在發送時壓縮並上傳（避免過早上傳）。
• LLM 圖片輸出支援：助理可使用標準 Markdown 語法如 ![alt](url) 在回應中加入圖片；圖片以方形卡片顯示，具延遲載入骨架，點擊可檢視全尺寸。
• 具游標分頁的對話歷史：持續性聊天歷史以分頁方式擷取，具無限滾動行為。
• 認證與本地化支援：電子郵件/密碼具驗證、重設與 Google OAuth；依 IP 地理位置（IPinfo Lite）偵測語言，Accept-Language 作為備用，並可覆寫使用者設定。

如何使用 chat

1. 執行應用程式（參閱先決條件），並在專案根目錄建立 .env.local 檔案。
2. 使用 MCP_URL 或 MCP_APPS_URL（擇一）設定 MCP 連線。可選設定品牌與角色脈絡變數，如 NEXT_PUBLIC_APP_NAME 與 APP_PERSONA_CONTEXT。
3. 使用支援的認證方式登入。
4. 在聊天 UI 開始對話。助理可串流回應並呼叫 MCP 伺服器提供的工具。
5. 若啟用訊息限制（WEEKLY_MESSAGE_LIMIT），UI 會在剩餘額度低時顯示警告，額度耗盡時阻擋發送。

使用案例

• 外送或調度助理：連接外送相關 MCP 伺服器，協助使用者透過對話流程協調請求與追蹤。
• 技師預訂：連接技師預訂 MCP 伺服器，讓助理引導使用者完成任務並透過工具呼叫收集必要細節。
• 任務管理介面：使用任務管理 MCP 伺服器，將自然語言轉譯為後端執行的動作。
• 具圖片的 multimodal 助理：上傳圖片（發送前裁剪）並請助理分析或融入工作流程；亦支援助理回應包含圖片卡片。
• 團隊多語言支援：依內建語言偵測與自訂 i18n 系統，將 UI 字串與 AI 系統提示本地化，支援 EN、ID、KR、JP、ES、ZH、DE、NL、FR、IT 等語言。

常見問題

應用程式支援哪些 MCP 設定？

應用程式支援連接一個 MCP 伺服器。使用 MCP_URL 或 MCP_APPS_URL。同時設定兩者會在執行時被拒絕。

UI 中 AI 回應如何傳遞？

回應即時串流，生成期間顯示輸入指示器。

使用者能否發送圖片，助理能否顯示圖片？

可以。使用者透過裁剪後發送流程附加圖片；圖片僅在訊息發送時壓縮並上傳。助理亦可使用 Markdown 圖片語法在回應中嵌入圖片。

聊天歷史是否儲存？

是。應用程式維持持續性對話歷史，並使用游標分頁與無限滾動。

訊息發送數量有限制嗎？

可選設定每使用者每週限制，使用 WEEKLY_MESSAGE_LIMIT。啟用時，UI 會在剩餘數量低時警告，耗盡時回傳 429 阻擋。

替代方案

• 無 MCP 工具整合的通用 AI 聊天網頁應用：這些專注於提示式聊天，但無法提供結構化工具通訊協定連接到您服務後端的連接。
• 自訂 MCP 用戶端實作（不同 UI/技術堆疊）：您可以建置另一個用於 MCP 工具呼叫的用戶端，但工作流程與功能（圖片處理、訊息歷史、本地化）可能不同。
• 以檢索而非工具呼叫為中心的 RAG/聊天解決方案：這些圍繞知識搜尋與文件對接，而非透過 MCP 工具協調動作。
• 通用多模態聊天介面：這些支援圖片輸入/輸出，但可能不包含相同的 MCP 驅動工作流程，用以連接到外部服務工具。