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 服务器，将自然语言转换为后端执行的操作。
• 带图片的多模态助手：上传图片（发送前裁剪），让助手分析或融入工作流；同时支持助手响应中包含图片卡片。
• 团队多语言支持：依赖内置语言检测和自定义 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/聊天解决方案：这些围绕知识搜索和文档 grounding，而不是通过 MCP 工具编排动作。
• 通用多模态聊天界面：这些支持图片输入/输出，但可能不包含相同的 MCP 驱动工作流程来连接外部服务工具。