使用说明
带SSE传输层的多模式MCP服务器/客户端
MCP–模型上下文协议是一个开放标准，简化了大型语言模型（LLM）访问外部数据、工具和服务以及与外部数据、软件和服务交互的方式。它本质上充当一个通用接口，使人工智能应用程序能够以标准化的方式连接到各种系统和资源。MCP采用客户端-服务器模型。嵌入在LLM中的客户端向MCP服务器发送请求，MCP服务器处理与外部系统的实际交互。它通过提供一种统一的方法将LLM与各种数据源、工具和API连接起来，简化了人工智能代理和工作流程的开发。
该项目连接到多模式MCP服务器，并演示了客户端与几个强大的AI驱动工具的集成。
🧠 使用的客户端
我们使用三个客户端与MCP服务器交互：
-
MCP检查员
用于测试和调试MCP服务器的开发工具。 -
React MCP客户端
用React编写的定制前端。 -
光标AI工具编辑器
与MCP服务器集成，允许直接从编辑器界面调用工具。
🔧 MCP工具
多模式MCP服务器提供以下工具：
-
🎧 音频工具
使用将文本转换为口语音频 谷歌文本转语音. -
📊 图表工具
根据用户提示生成JSON图表数据，并使用 Chart.js. -
📄 文档工具
用途 塔维利搜索 检索相关文档和链接。 -
🖼️ 图像工具
杠杆作用 DALL·E 基于自然语言描述创建图像。 -
🎥 视频工具
使用 YouTube数据API 以返回视频ID，从而允许在UI中嵌入视频。
🛠️ 安装说明
该项目包括：
- MCP服务器 –后端逻辑和工具执行。
- React MCP客户端 –前端接口。
- MCP检查员 –MCP开发人员调试控制台。
🚀 快速开始
# 1. Clone the repository
git clone https://github.com/Ashot72/Multi-Modal-MCP-Server-Client
# 2. Start the MCP Server
cd Multi-Modal-MCP-Server-Client/backend
# 2.1 Create a .env file from env.example.txt and include:
# - OPENAI_API_KEY
# - TAVILY_API_KEY
# - YOUTUBE_API_KEY
# 2.2 Install backend dependencies
npm install
# 2.3 Start the MCP server (runs at http://localhost:3001)
npm start
# 3. Run the MCP Inspector (another terminal)
cd Multi-Modal-MCP-Server-Client/backend
npm run inspector
# After running this command, you'll see a link like the following in your terminal:
#
# Open inspector with token pre-filled:
# http://localhost:6274/?MCP_PROXY_AUTH_TOKEN=your_generated_token_here
#
# Click on it to open the MCP Inspector in your browser with the authentication token automatically filled in.
# 4. Start the React MCP Client
cd Multi-Modal-MCP-Server-Client/frontend
# 4.1 Install frontend dependencies
npm install
# 4.2 Start the development server (runs at http://localhost:5173)
npm run dev
