关键词

API服务协议网关客户端管理工具调度资源代理

使用说明

项目简介

本项目 'mcp-ui' 仓库主要包含一个基于Vue.js构建的现代化聊天应用前端界面，以及一个 MCP后端服务 ('mcp_server.js')。该后端服务并非一个独立的MCP服务器实现，而是一个 MCP客户端管理器，它自身作为一个客户端，可以连接和管理多个外部独立的MCP服务器（例如，用Python或其他语言实现的MCP服务器）。

该后端服务通过HTTP API向前端应用暴露功能，允许前端通过它来连接、管理和调用外部MCP服务器提供的工具和资源。可以将此后端服务理解为一个 MCP协议网关 或 MCP客户端代理。

主要功能点

  • MCP客户端管理: 可以配置和管理多个外部MCP服务器的连接，支持STDIO传输协议。
  • 工具和资源代理: 代理外部MCP服务器提供的工具和资源，并通过统一的HTTP API提供给前端应用调用。
  • API服务: 提供RESTful API，用于客户端配置管理、工具调用、资源和Prompt获取等。
  • 兼容性: 支持与基于 '@modelcontextprotocol/sdk' 构建的MCP客户端进行交互。
  • 配置持久化: 客户端配置和工具映射关系保存在本地文件中，支持导入导出。

注意: 本仓库提供的 'mcp_server.js' 并非一个完整的、独立的MCP服务器实现，它依赖于外部的MCP服务器程序（需要用户自行准备和运行）。'mcp_server.js' 的作用是连接和管理这些外部MCP服务器，并为前端应用提供统一的访问入口。

安装步骤

  1. 安装Node.js和npm: 确保你的系统已安装Node.js (v16.0.0+) 和 npm (v8.0.0+) 。
  2. 下载仓库代码: 从GitHub仓库 mcp-ui 下载代码到本地。
  3. 安装依赖: 在仓库根目录下打开终端，运行命令 'npm install' 安装项目依赖。
  4. 配置环境变量: 复制 '.env.example' 文件为 '.env'，并根据需要编辑 '.env' 文件。 关键配置包括 'MCP_SERVER_PORT' (MCP后端服务端口)。

服务器配置

要让MCP客户端（例如本仓库的前端应用）连接到 'mcp_server.js' 后端服务，你 不需要 在客户端配置服务器的启动命令和参数，因为 'mcp_server.js' 本身就是一个已经运行的HTTP服务。

MCP客户端（前端应用）需要配置的是 MCP后端服务的API地址，通常是 'http://localhost:3001' （如果 'MCP_SERVER_PORT' 设置为3001）。

对于 'mcp_server.js' 后端服务本身，它需要配置的是 要连接的外部MCP客户端 的信息。这些配置信息存储在 'config/clients.json' 文件中，可以通过HTTP API进行管理。

以下是一个 'config/clients.json' 配置文件示例（初始状态可能为空 '{}'，需要通过API添加）：

{
  "client1": {
    "command": "/path/to/your/mcp_client_program",  // 外部MCP客户端程序的启动命令 (请替换为你的实际路径)
    "args": [],                                     // 启动参数，例如 ["--port", "8080"] (根据你的MCP客户端程序需求配置)
    "description": "我的第一个MCP客户端"                 // 客户端描述，方便管理
  },
  "client2": {
    "command": "python",                             // 例如，如果你的MCP客户端是用Python写的
    "args": ["mcp_server.py"],                       // Python脚本文件名 (请替换为你的实际文件名)
    "description": "Python MCP客户端示例"
  }
  // ... 可以配置更多外部MCP客户端
}

配置说明:

  • '"client1"', '"client2"': 客户端的唯一名称 (server name)，用于在API中引用。你可以自定义名称。
  • '"command"': 外部MCP客户端程序 的启动命令。这需要指向你 自行准备的、独立的MCP服务器程序 的可执行文件或脚本。 例如，如果你有一个用Python编写的MCP服务器程序 'mcp_server.py'， 并且你想直接运行这个Python脚本，那么 '"command"' 可以设置为 '"python"'， '"args"' 可以设置为 '["mcp_server.py"]'。
  • '"args"': 启动命令的参数列表 (args)。根据你的外部MCP客户端程序的需求配置。 如果你的MCP服务器程序需要指定端口号或其他参数，可以在这里配置。
  • '"description"': 客户端的描述信息，用于在UI界面上显示，方便用户识别和管理不同的MCP客户端连接。

重要: 你需要 自行开发或获取独立的MCP服务器程序 (例如，用Python基于 '@modelcontextprotocol/sdk' 开发的服务器)。 'mcp_server.js' 只是一个管理器，它本身 不是 一个独立的MCP服务器，而是需要连接到 外部的MCP服务器 才能工作。

基本使用方法

  1. 启动MCP后端服务: 在终端中进入仓库根目录，运行 'npm run mcp:server' 启动 'mcp_server.js' 后端服务。 默认运行在 'http://localhost:3001'。
  2. 配置外部MCP客户端:
    • 编辑 'config/clients.json' 文件，添加或修改外部MCP客户端的配置信息 (command, args, description)。
    • 或者，使用HTTP API (例如，通过Postman或curl) 向 'mcp_server.js' 发送请求，动态添加、修改或删除客户端配置。 API文档请参考 'mcp_server.js' 代码中的路由定义。
  3. 启动前端应用: 运行 'npm run dev' 启动前端开发服务器，或 'npm run build' 构建前端应用后部署。
  4. 在前端应用中配置MCP后端服务地址: 在前端应用的设置中，配置MCP后端服务的API地址 (例如 'http://localhost:3001')。
  5. 连接和使用工具: 前端应用连接到MCP后端服务后，即可列出和调用配置的外部MCP客户端所提供的工具和资源。

总结: 本仓库提供了一个基于Web的MCP客户端界面 ('mcp-ui') 和一个用于管理外部MCP服务器的后端服务 ('mcp_server.js')。 你需要自行准备独立的MCP服务器程序，并通过配置 'mcp_server.js' 来连接和管理这些外部服务器，最终通过 'mcp-ui' 前端界面来使用它们的功能。

信息

分类

网页与API

访问项目