使用说明

项目简介

本项目是一个基于React的Web应用，旨在通过WebSocket与后端的MCP (Model Context Protocol) 服务器进行交互。它包含一个代理服务器，用于管理与多个MCP服务器的连接，并将这些服务器提供的工具通过WebSocket暴露给前端Web应用，方便LLM应用通过浏览器调用各种工具。

主要功能点

MCP服务器代理: 作为MCP客户端和后端MCP服务器之间的桥梁，通过WebSocket协议转发请求和响应。
多服务器管理: 支持配置和连接多个MCP后端服务器，统一管理和调用来自不同服务器的工具。
工具发现与调用: 自动发现后端MCP服务器提供的工具，并在Web界面中展示，支持通过Web界面调用这些工具。
WebSocket通信: 使用WebSocket进行前端Web应用和代理服务器之间的实时双向通信。
用户友好的Web界面: 提供React Web界面，方便用户通过浏览器与MCP工具进行交互和测试。
实时日志查看: 集成日志记录功能，方便开发者监控和调试通信过程。

安装步骤

克隆仓库

git clone https://github.com/avijeett007/kno2gether-gemini-multimodal-playground.git
cd kno2gether-gemini-multimodal-playground

安装依赖 在项目根目录下运行：
```
npm install
```
(此命令会安装客户端和服务器端所需的依赖)

服务器配置

创建配置文件 复制示例配置文件 'mcp-config.example.json' 并重命名为 'mcp-config.json'，该文件位于项目根目录下。
```
cp mcp-config.example.json mcp-config.json
```

编辑配置文件 'mcp-config.json' 打开 'mcp-config.json' 文件，配置你的MCP服务器信息。在 'mcpServers' 字段下，你可以添加多个MCP服务器的配置。每个服务器配置需要指定以下信息：

{
  "mcpServers": {
    "serverName1": { // 服务器名称，可以自定义
      "command": "path/to/your/mcp_server_executable", // **[必填]** MCP服务器可执行文件的路径
      "args": ["--arg1", "value1"], // **[可选]** 启动服务器时需要传递的命令行参数，以数组形式提供
      "env": { "ENV_VAR": "value" }  // **[可选]** 启动服务器所需的环境变量，以JSON对象形式提供
    },
    "serverName2": { // 可以配置多个服务器
      "command": "another/path/mcp_server",
      "args": [],
      "env": {}
    }
  }
}

注意:

请将 '"path/to/your/mcp_server_executable"' 替换为你实际的MCP服务器可执行文件的路径。
'args' 和 'env' 字段是可选的，根据你的MCP服务器启动需求进行配置。如果不需要额外的启动参数或环境变量，可以留空。
'serverName1' 和 'serverName2' 是你自定义的服务器名称，用于在项目中标识不同的MCP服务器。

基本使用方法

启动MCP代理服务器 打开一个新的终端窗口，导航到项目根目录，运行以下命令启动MCP代理服务器：
```
node server/src/server.js
```
代理服务器默认监听WebSocket端口 '3001'。
启动React Web应用 在另一个终端窗口，导航到项目根目录，运行以下命令启动React Web应用：
```
npm start
```
Web应用将在浏览器中打开，通常地址为 'http://localhost:3000'。
使用Web界面调用MCP工具 打开浏览器访问Web应用后，如果一切配置正确，Web界面应该会连接到MCP代理服务器，并显示已配置的MCP服务器提供的工具列表。你可以通过Web界面提供的操作来调用这些工具，并查看返回结果。

注意: 确保你已经有可用的MCP服务器，并在 'mcp-config.json' 中配置了正确的服务器路径和参数。本项目本身不是一个独立的MCP服务器实现，而是一个MCP服务器的代理和客户端界面。你需要自行准备或部署后端的MCP服务器，并按照上述配置进行连接。

关键词