关于 ChatMate - Your AI-Powered Chatbot
配置
本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。
暂未收录安装方式
我们还没有获取到这个服务的安装包或远程地址，请按项目 README 中的说明安装。
工具
还没有获取到工具列表
本地服务需要在你的电脑上运行后才能读取工具，维护者暂未提供工具列表。
详细介绍
ChatMate - 你的 AI 驱动型聊天机器人
概述
ChatMate 是一个 Next.js 应用，提供聊天机器人界面，支持本地存储对话、集成 API 进行后端查询、在侧边栏查看对话历史记录以及用户身份验证。它利用 Genkit 实现对话摘要和文本转语音等 AI 驱动功能。
功能
- **用户身份验证：**安全的用户身份验证与授权。
- **对话历史记录：**可通过可折叠侧边栏轻松访问过往对话。
- **本地存储：**对话存储在用户的设备本地。
- **API 集成：**查询会发送到后端 API 进行处理。
- **AI 驱动的摘要：**使用 AI 驱动的工具总结当前对话中最近的 10 条消息，并显示在聊天窗口顶部。
- **文本转语音（TTS）：**将 AI 回复转换为语音，提升无障碍体验。
- **语音输入：**允许用户将音频转录为文本以供输入。
- **主题切换：**可在浅色和深色模式之间切换。
- 麦克风和扬声器音频测试：可配置麦克风和扬声器
使用的技术
- Next.js - 用于构建高性能 Web 应用的 React 框架
- TypeScript - JavaScript 的类型化超集
- Tailwind CSS - 实用优先的 CSS 框架
- ShadCN UI - 使用 Radix UI 和 Tailwind CSS 构建的可复用 UI 组件
- Lucide React - 图标
- Genkit - 用于构建可靠、可扩展且可观测的 AI 驱动功能的平台
- Zod - 以 TypeScript 为先的模式验证库，支持静态类型推断
- Firebase - 用于身份验证和数据存储的后端服务
- NextAuth.js - Next.js 身份验证库
系统图
此图展示了 ChatMate 应用的整体架构和数据流，重点介绍 page.tsx 中的交互以及 AI 工作流。
graph TD
subgraph "Browser (Client-Side)"
U[User] --> UI[React UI (src/app/page.tsx)]
UI -- Interacts with --> StateHooks[React State Hooks (useState, useEffect, etc.)]
UI -- Renders --> Comp[Shadcn UI Components (@/components/ui/*)]
subgraph "User Input/Output"
InputArea[Text Input Area] --> |onKeyDown, onChange| StateHooks
MicBtn[Mic Button] --> |onClick| Record[Recording Logic (start/stopRecording)]
TTSBtn[TTS Button/Select] --> |onClick, onValueChange| Speak[Speak Logic (speakText)]
end
subgraph "Storage"
StateHooks -- Persists/Loads --> LS[Browser localStorage (messages, history, names, summary)]
end
subgraph "Media Handling"
Record --> |getUserMedia| BrowserAPI[Browser MediaRecorder API]
BrowserAPI --> |Audio Blob| Record
Record --> |createObjectURL| AudioDataURL[Client-Side Audio URL]
Speak --> |new Audio(ServerURL/DataURL)| AudioPlayer[HTML Audio Element]
end
UI -- Triggers --> SendMsg[sendMessage Logic]
UI -- Triggers --> NewChat[createNewConversation Logic]
UI -- Triggers --> SelectChat[selectConversation Logic]
UI -- Triggers --> RenameChat[handleRename Logic]
UI -- Triggers --> DeleteChat[deleteConversation Logic]
UI -- Triggers --> ReloadChat[handleReload Logic]
end
subgraph "Server-Side (Next.js API / Genkit Flows)"
AIFlows[AI Flows (@/ai/flows/*)]
Genkit[Genkit AI Instance (@/ai/ai-instance.ts)]
subgraph "Specific Flows"
AnswerFlow[answerMessage]
SummarizeFlow[summarizeConversation]
NameFlow[nameConversation]
TTSFlow[textToSpeech]
TranscribeFlow[transcribeAudio]
end
AIFlows -- Uses --> Genkit
Genkit -- Interacts with --> ModelAPI[AI Model API (e.g., Gemini)]
end
subgraph "Data Flow"
SendMsg --> |User Input, History, Summary| AnswerFlow
AnswerFlow --> |AI Response| SendMsg
SendMsg --> |Update State| StateHooks
SendMsg --> |Potentially Trigger| NameFlow
NameFlow --> |AI Name| SendMsg
StateHooks -- Triggers Summary Update --> SumLogic[updateSummary Logic]
SumLogic --> |Messages| SummarizeFlow
SummarizeFlow --> |Summary| SumLogic
SumLogic --> |Update State| StateHooks
Speak --> |Text, Language| TTSFlow
TTSFlow --> |Audio URL or Data URL| Speak
Speak --> AudioPlayer
Record --> |Audio Data URL| TranscribeFlow
TranscribeFlow --> |Transcription Text| Record
Record --> |Update Input State| StateHooks
StateHooks --> LS
end
%% Styling
classDef client fill:#f9f,stroke:#333,stroke-width:2px;
classDef server fill:#ccf,stroke:#333,stroke-width:2px;
classDef storage fill:#lightgrey,stroke:#333,stroke-width:1px;
classDef state fill:#D6EAF8,stroke:#333,stroke-width:1px;
classDef logic fill:#ABEBC6,stroke:#333,stroke-width:1px;
classDef flows fill:#FDEDEC,stroke:#333,stroke-width:1px;
class UI,StateHooks,Comp,InputArea,MicBtn,TTSBtn,Record,Speak,AudioPlayer,AudioDataURL,BrowserAPI client;
class LS storage;
class SendMsg,NewChat,SelectChat,RenameChat,DeleteChat,ReloadChat,SumLogic logic;
class AIFlows,Genkit,AnswerFlow,SummarizeFlow,NameFlow,TTSFlow,TranscribeFlow,ModelAPI server;
class AnswerFlow,SummarizeFlow,NameFlow,TTSFlow,TranscribeFlow flows;
客户端（浏览器）：
用户交互：用户与由 src/app/page.tsx 渲染的 React UI 进行交互。 UI 组件：UI 使用 Shadcn UI 组件构建。 状态管理：用户操作（输入、点击按钮）会更新由 React 状态 Hook（useState、useEffect 等）管理的组件状态。 逻辑处理函数：sendMessage、speakText、startRecording、createNewConversation 等函数由 UI 交互触发。 存储：关键应用数据（对话消息、历史记录列表、对话名称、摘要）会持久化到浏览器 localStorage，以便在不同会话间保留状态。 媒体处理： 录音使用浏览器的 MediaRecorder API 捕获音频，并创建客户端 Blob 和 Audio URL。 TTS 播放使用标准 HTML Audio Element，播放后端提供的 URL 中的音频（也可能是 Data URL）。 服务端（Next.js API / Genkit 工作流）：
Genkit AI 实例：作为与底层 AI 模型（例如 Gemini）交互的核心接口。 AI 工作流：具体任务封装在使用 Genkit 定义的服务端函数中（answerMessage、summarizeConversation、nameConversation、textToSpeech、transcribeAudio）。这些工作流会与 Genkit AI 实例交互。 AI 模型 API：Genkit 与配置的大语言模型 API 通信，以执行文本生成、摘要、命名、TTS 和转录等任务。 数据流：
聊天：用户输入会触发 sendMessage，后者调用 answerMessage 工作流。响应会更新状态并重新渲染 UI。消息会保存到 localStorage。系统会根据对话状态触发摘要（updateSummary -> summarizeConversation）和命名（sendMessage -> nameConversation）工作流。 TTS：点击朗读按钮会触发 speakText，调用 textToSpeech 工作流。返回的音频 URL 用于创建并播放 Audio 对象。 转录：点击麦克风按钮会触发 startRecording。停止录音后，音频数据（作为客户端 URL）会发送到 transcribeAudio 工作流。返回的文本会更新输入状态。 持久化：与对话相关的状态变更（消息、名称、历史记录、摘要）会触发对 localStorage 的更新。初始加载时以及切换对话时，系统会从 localStorage 加载数据。 此架构使用客户端状态管理和 localStorage 实现核心聊天界面及历史记录，同时借助服务端 Genkit 工作流执行所有 AI 驱动的操作。
设置说明
按照以下步骤设置 ChatMate 应用：
前置条件
- Node.js（版本 18 或更高）
- npm 或 yarn
- Genkit CLI：
npm install -g genkit-cli或yarn global add genkit-cli
安装
-
克隆代码库：
git clone [your_repository_url] cd ChatMate -
安装依赖项：
npm install # or yarn install -
环境变量： 在根目录中创建
.env文件，并添加以下环境变量：GOOGLE_GENAI_API_KEY=YOUR_GEMINI_API_KEY GOOGLE_CLOUD_PROJECT=YOUR_GOOGLE_CLOUD_PROJECT GOOGLE_CLOUD_LOCATION=YOUR_GOOGLE_CLOUD_LOCATIONGOOGLE_GENAI_API_KEY：从 Google AI Studio 获取 API 密钥。GOOGLE_CLOUD_PROJECT：你的 Google Cloud 项目 ID。GOOGLE_CLOUD_LOCATION：Google Cloud 项目所在的位置（例如，us-central1）。
-
配置 Firebase：
- 在 Firebase Console 中设置 Firebase 项目。
- 启用身份验证（例如，Google Sign-In）。
- 将 Firebase 配置添加到项目中。
-
运行应用：
npm run dev # or yarn dev打开浏览器并访问
http://localhost:9002。
Package.json 脚本
以下是 package.json 中各个脚本的说明：
-
"dev"：使用 Turbopack 在端口 9002 上运行 Next.js 开发服务器。"dev": "next dev --turbopack -p 9002" -
"genkit:dev"：启动 Genkit 开发服务器，执行src/ai/dev.ts。"genkit:dev": "genkit start -- tsx src/ai/dev.ts" -
"genkit:watch"：启动 Genkit 开发服务器，并在src/ai/dev.ts发生更改时实时重新加载。"genkit:watch": "genkit start -- tsx --watch src/ai/dev.ts" -
"build"：为生产环境构建 Next.js 应用。"build": "next build" -
"start"：启动 Next.js 生产服务器。"start": "next start" -
"lint"：运行 ESLint 检查代码质量。"lint": "next lint" -
"typecheck"：运行 TypeScript 编译器进行类型检查。"typecheck": "tsc --noEmit"
AI 工作流
ChatMate 中由 AI 驱动的功能使用 Genkit 工作流实现。这些工作流定义在 src/ai/flows 目录中，并在 src/ai/dev.ts 中注册。
1. 回答用户消息（src/ai/flows/answer-message.ts）
- 用途： 根据对话历史和摘要生成对用户消息的回复。
- 输入：
message：用户的消息（字符串）。conversationHistory：对话历史（由{ sender: string; text: string }组成的数组）。summary：对话摘要（可选字符串）。
- 输出：
response：AI 的回复（字符串）。
- 提示词： 使用提示词指示 AI 担任 Luminous Power Technologies 的客户服务 Agent。它会利用对话历史和摘要提供相关信息。
- 用法： 调用
answerMessage函数，并传入用户输入、对话历史和摘要，以生成回复。
2. 为对话命名（src/ai/flows/name-conversation.ts）
- 用途： 根据对话中的第一条消息生成描述性名称。
- 输入：
firstMessage：对话中的第一条消息（字符串）。
- 输出：
conversationName：生成的对话名称（字符串）。
- 提示词： 使用提示词根据第一条消息创建简短且具有描述性的名称，力求简洁且贴切。
- 用法： 调用
nameConversation函数，并传入新对话的第一条消息，以生成合适的名称。
3. 总结对话（src/ai/flows/summarize-conversation.ts）
- 用途： 使用 AI 总结对话中最近的 10 条消息。
- 输入：
messages：对话中最近的 10 条消息（由{ sender: string; text: string }组成的数组）。
- 输出：
summary：对话摘要（字符串）。
- 提示词： 使用提示词将给定对话总结为几句话。
- 用法： 调用
summarizeConversation函数，并传入对话中最近的 10 条消息，以生成摘要。
4. 文本转语音（src/ai/flows/text-to-speech.ts）
- 用途： 使用 Genkit 工作流将文本转换为语音。
- 输入：
text：要转换为语音的文本（字符串）。language：文本要转换成的语言（可选字符串，默认为英语）。
- 输出：
audioUrl：生成的音频文件 URL（字符串）。
- 提示词： 使用包含输入文本和语言的提示词，指示 AI 将文本转换为语音。
- 用法： 调用
textToSpeech函数，并传入文本和语言，以生成音频 URL。
5. 转录音频（src/ai/flows/transcribe-audio.ts）
- 用途： 使用 Genkit 工作流将音频转换为文本。
- 输入：
audioUrl：要转录的音频文件 URL（字符串）。
- 输出：
transcription：音频转录出的文本（字符串）。
- 提示词： 使用提示词转录给定 URL 中的音频。
- 用法： 调用
transcribeAudio函数，并传入音频 URL，以生成转录文本。
Page.tsx 功能
src/app/page.tsx 文件实现了主要的聊天机器人界面。以下是其功能概述：
- 状态管理： 使用
useState管理消息、输入内容、摘要、对话历史记录及其他与 UI 相关的状态。 - 对话处理： 实现新建、删除、选择和重命名对话的逻辑。
- 发送消息： 将用户消息发送到后端 API 进行处理，并接收 AI 回复。
- 本地存储： 将对话数据（消息、摘要和对话名称）存储在本地存储中，以便在不同会话间保留对话。
- AI 集成： 集成 Genkit flows，用于总结对话、生成对话名称以及回答用户消息。
- 文本转语音： 使用
textToSpeechflow 实现文本转语音功能。 - 语音输入： 使用
transcribeAudioflow 实现语音输入功能。 - UI 渲染： 渲染包含消息、输入区域、对话历史记录及其他 UI 元素的聊天机器人界面。
- 音频配置：提供配置扬声器和麦克风音频设置的选项
后续开发
- 实现用户身份验证和授权。
- 添加更多样式和自定义选项，优化 UI。
- 添加更多 AI 功能，例如情感分析和主题检测。
- 集成其他后端服务和 API。
- 改进错误处理和用户反馈。
- 实现测试和监控。
系统图
此图展示了 ChatMate 应用的整体架构和数据流，重点说明 page.tsx 与 AI flows 之间的交互。
graph TD
subgraph "Browser (Client-Side)"
U[User] --> UI[React UI (src/app/page.tsx)]
UI -- Interacts with --> StateHooks[React State Hooks (useState, useEffect, etc.)]
UI -- Renders --> Comp[Shadcn UI Components (@/components/ui/*)]
subgraph "User Input/Output"
InputArea[Text Input Area] --> |onKeyDown, onChange| StateHooks
MicBtn[Mic Button] --> |onClick| Record[Recording Logic (start/stopRecording)]
TTSBtn[TTS Button/Select] --> |onClick, onValueChange| Speak[Speak Logic (speakText)]
end
subgraph "Storage"
StateHooks -- Persists/Loads --> LS[Browser localStorage (messages, history, names, summary)]
end
subgraph "Media Handling"
Record --> |getUserMedia| BrowserAPI[Browser MediaRecorder API]
BrowserAPI --> |Audio Blob| Record
Record --> |createObjectURL| AudioDataURL[Client-Side Audio URL]
Speak --> |new Audio(ServerURL/DataURL)| AudioPlayer[HTML Audio Element]
end
UI -- Triggers --> SendMsg[sendMessage Logic]
UI -- Triggers --> NewChat[createNewConversation Logic]
UI -- Triggers --> SelectChat[selectConversation Logic]
UI -- Triggers --> RenameChat[handleRename Logic]
UI -- Triggers --> DeleteChat[deleteConversation Logic]
UI -- Triggers --> ReloadChat[handleReload Logic]
end
subgraph "Server-Side (Next.js API / Genkit Flows)"
AIFlows[AI Flows (@/ai/flows/*)]
Genkit[Genkit AI Instance (@/ai/ai-instance.ts)]
subgraph "Specific Flows"
AnswerFlow[answerMessage]
SummarizeFlow[summarizeConversation]
NameFlow[nameConversation]
TTSFlow[textToSpeech]
TranscribeFlow[transcribeAudio]
end
AIFlows -- Uses --> Genkit
Genkit -- Interacts with --> ModelAPI[AI Model API (e.g., Gemini)]
end
subgraph "Data Flow"
SendMsg --> |User Input, History, Summary| AnswerFlow
AnswerFlow --> |AI Response| SendMsg
SendMsg --> |Update State| StateHooks
SendMsg --> |Potentially Trigger| NameFlow
NameFlow --> |AI Name| SendMsg
StateHooks -- Triggers Summary Update --> SumLogic[updateSummary Logic]
SumLogic --> |Messages| SummarizeFlow
SummarizeFlow --> |Summary| SumLogic
SumLogic --> |Update State| StateHooks
Speak --> |Text, Language| TTSFlow
TTSFlow --> |Audio URL or Data URL| Speak
Speak --> AudioPlayer
Record --> |Audio Data URL| TranscribeFlow
TranscribeFlow --> |Transcription Text| Record
Record --> |Update Input State| StateHooks
StateHooks --> LS
end
%% Styling
classDef client fill:#f9f,stroke:#333,stroke-width:2px;
classDef server fill:#ccf,stroke:#333,stroke-width:2px;
classDef storage fill:#lightgrey,stroke:#333,stroke-width:1px;
classDef state fill:#D6EAF8,stroke:#333,stroke-width:1px;
classDef logic fill:#ABEBC6,stroke:#333,stroke-width:1px;
classDef flows fill:#FDEDEC,stroke:#333,stroke-width:1px;
class UI,StateHooks,Comp,InputArea,MicBtn,TTSBtn,Record,Speak,AudioPlayer,AudioDataURL,BrowserAPI client;
class LS storage;
class SendMsg,NewChat,SelectChat,RenameChat,DeleteChat,ReloadChat,SumLogic logic;
class AIFlows,Genkit,AnswerFlow,SummarizeFlow,NameFlow,TTSFlow,TranscribeFlow,ModelAPI server;
class AnswerFlow,SummarizeFlow,NameFlow,TTSFlow,TranscribeFlow flows;
Page.tsx 功能
src/app/page.tsx 文件实现了主要的聊天机器人界面。以下是其功能概述：
- 状态管理： 使用
useState管理消息、输入内容、摘要、对话历史记录及其他与 UI 相关的状态。 - 对话处理： 实现新建、删除、选择和重命名对话的逻辑。
- 发送消息： 将用户消息发送到 Genkit flows 进行处理，并接收 AI 回复。
- 本地存储： 将对话数据（消息、摘要和对话名称）存储在本地存储中，以便在不同会话间保留对话。
- AI 集成： 集成 Genkit flows，用于总结对话、生成对话名称以及回答用户消息。
- 文本转语音： 使用
textToSpeechflow 实现文本转语音功能。 - 语音输入： 使用
transcribeAudioflow 实现语音输入功能。 - UI 渲染： 渲染包含消息、输入区域、对话历史记录及其他 UI 元素的聊天机器人界面。
- 音频配置：提供配置扬声器和麦克风音频设置的选项
后续开发
- 实现用户身份验证和授权。
- 添加更多样式和自定义选项，优化 UI。
- 添加更多 AI 功能，例如情感分析和主题检测。
- 集成其他后端服务和 API。
- 改进错误处理和用户反馈。
- 实现测试和监控。
评论
支持 Markdown
一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。