@mcp-shark/mcp-shark 1.4.0 → 1.4.1

package/README.md

@@ -66,11 +66,20 @@ Or if installed locally:
 npx @mcp-shark/mcp-shark
 ```
 
+**Open browser automatically:**
+
+```bash
+mcp-shark --open
+# or
+mcp-shark -o
+```
+
 The UI will automatically:
 
 - Install dependencies if needed
 - Build the frontend if needed
 - Start the server on `http://localhost:9853`
+- Optionally open your browser automatically (with `--open` flag)
 
 Open your browser to `http://localhost:9853` to access the MCP Shark interface.
 
@@ -331,8 +340,14 @@ No manual configuration editing required - MCP Shark handles everything for you.
    mcp-shark
 ```
 
+Or to automatically open your browser:
+
+```bash
+   mcp-shark --open
+```
+
 3. **Open your browser:**
-   Navigate to `http://localhost:9853`
+   Navigate to `http://localhost:9853` (or it will open automatically with `--open` flag)
 
 4. **Interactive Tour**: On first launch, you'll see an interactive tour - follow it to get started
 

package/bin/mcp-shark.js

@@ -3,67 +3,110 @@
 import { spawn } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
 import { dirname, join, resolve } from 'node:path';
-import { existsSync } from 'node:fs';
+import { existsSync, readFileSync } from 'node:fs';
+import { Command } from 'commander';
+import open from 'open';
+
+const SERVER_URL = 'http://localhost:9853';
+const BROWSER_OPEN_DELAY = 1000;
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const rootDir = resolve(__dirname, '..');
-const uiDir = join(rootDir, 'ui');
 
-// Check if UI directory exists
-if (!existsSync(uiDir)) {
-  console.error('Error: UI directory not found. Please ensure you are in the correct directory.');
-  process.exit(1);
-}
+/**
+ * Display welcome banner
+ */
+function displayWelcomeBanner() {
+  const pkgPath = join(rootDir, 'package.json');
+  const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
+  const version = pkg.version;
 
-// Check if node_modules exists in root directory
-const rootNodeModules = join(rootDir, 'node_modules');
-if (!existsSync(rootNodeModules)) {
-  console.log('Installing dependencies...');
-  const installProcess = spawn('npm', ['install'], {
-    cwd: rootDir,
-    stdio: 'inherit',
-    shell: true,
-  });
+  const banner = `
+   ███╗   ███╗ ██████╗ ██████╗      ███████╗██╗  ██╗ █████╗ ██████╗ ██╗  ██╗
+   ████╗ ████║██╔════╝██╔══██╗     ██╔════╝██║  ██║██╔══██╗██╔══██╗██║ ██╔╝
+   ██╔████╔██║██║     ██████╔╝     ███████╗███████║███████║██████╔╝█████╔╝ 
+   ██║╚██╔╝██║██║     ██╔═══╝      ╚════██║██╔══██║██╔══██║██╔══██╗██╔═██╗ 
+   ██║ ╚═╝ ██║╚██████╗██║          ███████║██║  ██║██║  ██║██║  ██║██║  ██╗
+   ╚═╝     ╚═╝ ╚═════╝╚═╝          ╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝
+   
+   Aggregate multiple MCP servers into a unified interface
+   Version: ${version} | Homepage: https://mcpshark.sh
+`;
 
-  installProcess.on('close', (code) => {
-    if (code !== 0) {
-      console.error('Failed to install dependencies');
-      process.exit(1);
-    }
-    console.log('Dependencies installed successfully!\n');
-    startUIServer();
-  });
-} else {
-  startUIServer();
+  console.log(banner);
 }
 
-function startUIServer() {
-  // Check if dist directory exists (production build)
-  const distDir = join(uiDir, 'dist');
-  if (!existsSync(distDir)) {
-    console.log('Building UI for production...');
-    const buildProcess = spawn('npm', ['run', 'build'], {
-      cwd: uiDir,
+const uiDir = join(rootDir, 'ui');
+const distDir = join(uiDir, 'dist');
+const rootNodeModules = join(rootDir, 'node_modules');
+
+/**
+ * Run a command and return a promise that resolves when it completes
+ */
+function runCommand(command, args, options) {
+  return new Promise((resolve, reject) => {
+    const process = spawn(command, args, {
+      ...options,
       stdio: 'inherit',
       shell: true,
     });
 
-    buildProcess.on('close', (code) => {
+    process.on('close', (code) => {
       if (code !== 0) {
-        console.error('Failed to build UI');
-        process.exit(1);
+        reject(new Error(`Command failed with exit code ${code}`));
+      } else {
+        resolve();
       }
-      runServer();
     });
-  } else {
-    runServer();
+
+    process.on('error', (error) => {
+      reject(error);
+    });
+  });
+}
+
+/**
+ * Install dependencies in the root directory
+ */
+async function installDependencies() {
+  console.log('Installing dependencies...');
+  try {
+    await runCommand('npm', ['install'], { cwd: rootDir });
+    console.log('Dependencies installed successfully!\n');
+  } catch (error) {
+    console.error('Failed to install dependencies:', error.message);
+    process.exit(1);
   }
 }
 
-function runServer() {
+/**
+ * Build the UI for production
+ */
+async function buildUI() {
+  console.log('Building UI for production...');
+  try {
+    await runCommand('npm', ['run', 'build'], { cwd: uiDir });
+  } catch (error) {
+    console.error('Failed to build UI:', error.message);
+    process.exit(1);
+  }
+}
+
+/**
+ * Open the browser after a short delay
+ */
+async function openBrowser() {
+  await new Promise((resolve) => setTimeout(resolve, BROWSER_OPEN_DELAY));
+  open(SERVER_URL);
+}
+
+/**
+ * Start the UI server
+ */
+async function startServer(shouldOpenBrowser = false) {
   console.log('Starting MCP Shark UI server...');
-  console.log('Open http://localhost:9853 in your browser');
+  console.log(`Open ${SERVER_URL} in your browser`);
   console.log('Press Ctrl+C to stop\n');
 
   const serverProcess = spawn('node', ['server.js'], {
@@ -72,22 +115,105 @@ function runServer() {
     shell: true,
   });
 
+  if (shouldOpenBrowser) {
+    await openBrowser();
+  }
+
+  let isShuttingDown = false;
+
   serverProcess.on('close', (code) => {
-    if (code !== 0 && code !== null) {
-      console.error(`Server exited with code ${code}`);
-      process.exit(code);
+    if (!isShuttingDown) {
+      if (code !== 0 && code !== null) {
+        console.error(`Server exited with code ${code}`);
+        process.exit(code);
+      }
+    } else {
+      process.exit(0);
     }
   });
 
   // Handle process termination
-  process.on('SIGINT', () => {
-    console.log('\nShutting down...');
-    serverProcess.kill('SIGINT');
-    process.exit(0);
-  });
+  const shutdown = async (signal) => {
+    if (isShuttingDown) return;
+    isShuttingDown = true;
 
-  process.on('SIGTERM', () => {
-    serverProcess.kill('SIGTERM');
-    process.exit(0);
-  });
+    console.log('Shutting down...');
+
+    // Send signal to child process
+    serverProcess.kill(signal);
+
+    // Wait for child process to exit, with timeout
+    const timeout = setTimeout(() => {
+      console.log('Forcefully terminating server process...');
+      serverProcess.kill('SIGKILL');
+      process.exit(1);
+    }, 5000);
+
+    serverProcess.once('close', () => {
+      clearTimeout(timeout);
+      process.exit(0);
+    });
+  };
+
+  process.on('SIGINT', () => shutdown('SIGINT'));
+  process.on('SIGTERM', () => shutdown('SIGTERM'));
+}
+
+/**
+ * Validate that required directories exist
+ */
+function validateDirectories() {
+  if (!existsSync(uiDir)) {
+    console.error('Error: UI directory not found. Please ensure you are in the correct directory.');
+    process.exit(1);
+  }
+}
+
+/**
+ * Ensure dependencies are installed
+ */
+async function ensureDependencies() {
+  if (!existsSync(rootNodeModules)) {
+    await installDependencies();
+  }
+}
+
+/**
+ * Ensure UI is built
+ */
+async function ensureUIBuilt() {
+  if (!existsSync(distDir)) {
+    await buildUI();
+  }
 }
+
+/**
+ * Main execution function
+ */
+async function main() {
+  // Display welcome banner
+  displayWelcomeBanner();
+
+  // Parse command line options
+  const program = new Command();
+  program.option('-o, --open', 'Open the browser', false).parse(process.argv);
+
+  const options = program.opts();
+
+  // Validate environment
+  validateDirectories();
+
+  // Ensure dependencies are installed
+  await ensureDependencies();
+
+  // Ensure UI is built
+  await ensureUIBuilt();
+
+  // Start the server
+  await startServer(options.open);
+}
+
+main().catch((error) => {
+  console.error('Unexpected error:', error);
+  process.exit(1);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-shark/mcp-shark",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Aggregate multiple Model Context Protocol (MCP) servers into a single unified interface with a powerful monitoring UI. Prov deep visibility into every request and response.",
   "type": "module",
   "main": "./bin/mcp-shark.js",
@@ -85,7 +85,9 @@
     "mcp-shark-common": "github:mcp-shark/mcp-shark-common",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "ws": "^8.16.0"
+    "ws": "^8.16.0",
+    "open": "^11.0.0",
+    "commander": "^14.0.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",