@mcpjam/inspector 0.8.2 → 0.9.0

package/README.md

@@ -1,9 +1,9 @@
 <div align="center">
 
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="./public/mcp_jam_dark.png">
-  <source media="(prefers-color-scheme: light)" srcset="./public/mcp_jam_light.png">
-  <img width="250" alt="MCPJam Inspector V1 logo" src="./public/mcp_jam_light.png">
+  <source media="(prefers-color-scheme: dark)" srcset="./client/public/mcp_jam_dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="./client/public/mcp_jam_light.png">
+  <img width="250" alt="MCPJam Inspector V1 logo" src="./client/public/mcp_jam_light.png">
 </picture>
 
 <br/>
@@ -14,6 +14,10 @@
 [![License: Apache 2.0](https://img.shields.io/badge/License-Apache%202.0-blue.svg?style=for-the-badge)](https://opensource.org/licenses/Apache-2.0)
 [![Discord](https://img.shields.io/badge/Discord-Join%20Server-5865F2.svg?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/JEnDtz8X6z)
 
+<a href="https://www.opencoreventures.com/" target="_blank">
+  <img width="150" alt="Catalyst Logo" src="./client/public/catalyst.png" style="margin: -10px">
+</a>
+
 </div>
 
 A developer tool for testing, debugging Model Context Protocol (MCP) servers. Test whether or not you built your MCP server correctly. The project is open source and fully compliant to the MCP spec.
@@ -30,19 +34,19 @@ A developer tool for testing, debugging Model Context Protocol (MCP) servers. Te
 
 ## 📸 Screenshots
 
-<img alt="MCPJam Inspector Demo" src="./public/demo_1.png">
+<img alt="MCPJam Inspector Demo" src="./client/public/demo_1.png">
 
 <details>
 <summary><strong>LLM Playground</strong></summary>
 
-<img alt="LLM Chat Demo" src="./public/demo_2.png">
+<img alt="LLM Chat Demo" src="./client/public/demo_2.png">
 
 </details>
 
 <details>
 <summary><strong>Connect to any server</strong></summary>
 
-<img alt="MCPJam Connection Demo" src="./public/demo_3.png">
+<img alt="MCPJam Connection Demo" src="./client/public/demo_3.png">
 
 </details>
 
@@ -64,6 +68,20 @@ npx @mcpjam/inspector@latest --port 4000
 npx @mcpjam/inspector@latest --ollama llama3.2
 ```
 
+## 🐳 Docker
+
+Run MCPJam Inspector using Docker:
+
+```bash
+# Run the latest version from Docker Hub
+docker run -p 3001:3001 mcpjam/mcp-inspector:latest
+
+# Or run in the background
+docker run -d -p 3001:3001 --name mcp-inspector mcpjam/mcp-inspector:latest
+```
+
+The application will be available at `http://localhost:3001`.
+
 ## Requirements
 
 [![Node.js](https://img.shields.io/badge/Node.js-20+-green.svg?style=for-the-badge&logo=node.js)](https://nodejs.org/)

package/bin/start.js

@@ -5,6 +5,7 @@ import { spawn } from "child_process";
 import { fileURLToPath } from "url";
 import { createServer } from "net";
 import { execSync } from "child_process";
+import { existsSync } from "fs";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -61,7 +62,7 @@ function logError(message) {
 function logStep(step, message) {
   log(
     `\n${colors.cyan}${colors.bright}[${step}]${colors.reset} ${message}`,
-    colors.white,
+    colors.white
   );
 }
 
@@ -87,7 +88,7 @@ function logBox(content, title = null) {
         title +
         " ".repeat(width - title.length - titlePadding) +
         "│",
-      colors.cyan,
+      colors.cyan
     );
     log("├" + "─".repeat(width) + "┤", colors.cyan);
   }
@@ -121,14 +122,21 @@ function isPortAvailable(port) {
   });
 }
 
-async function findAvailablePort(startPort = 3000, maxPort = 3100) {
+async function findAvailablePort(startPort = 3000, maxPort = 65535) {
+  logProgress(`Scanning for available ports starting from ${startPort}...`);
+
   for (let port = startPort; port <= maxPort; port++) {
     if (await isPortAvailable(port)) {
       return port;
     }
+
+    // Show progress every 10 ports to avoid spam
+    if (port % 10 === 0) {
+      logProgress(`Checked port ${port}, continuing search...`);
+    }
   }
   throw new Error(
-    `No available ports found between ${startPort} and ${maxPort}`,
+    `No available ports found between ${startPort} and ${maxPort}`
   );
 }
 
@@ -157,41 +165,17 @@ function spawnPromise(command, args, options) {
   });
 }
 
-async function showWelcomeMessage() {
-  console.clear();
-  log(MCP_BANNER, colors.cyan);
-
-  logDivider();
-
-  const welcomeText = `Welcome to the MCP Inspector! 
-This tool helps you explore and interact with Model Context Protocol servers.
-Get ready to discover the power of MCP integration.`;
-
-  logBox(welcomeText, "🎯 Getting Started");
-
-  logDivider();
-}
-
-async function showServerInfo(port) {
-  const serverInfo = `Server URL: http://localhost:${port}
-Environment: Production
-Framework: Next.js
-Status: Starting up...`;
-
-  logBox(serverInfo, "🌐 Server Configuration");
-}
-
 async function showSuccessMessage(port) {
   logDivider();
 
   const successText = `🎉 MCP Inspector is now running successfully!
 
-📱 Access your application at: ${colors.bright}${colors.green}http://localhost:${port}${colors.reset}
-🔧 Server is ready to handle MCP connections
+📱 Access your application at: http://localhost:${port}
+🔧 Unified server ready to handle MCP connections
 📊 Monitor your MCP tools and resources
 💬 Start chatting with your MCP-enabled AI
 
-${colors.dim}Press Ctrl+C to stop the server${colors.reset}`;
+Press Ctrl+C to stop the server`;
 
   logBox(successText, "🚀 Ready to Go!");
 
@@ -273,7 +257,7 @@ async function openTerminalWithMultipleCommands(commands, title) {
     await spawnPromise(
       terminalCmd[0],
       [...terminalCmd.slice(1), "bash", "-c", fullCommand],
-      { echoOutput: false },
+      { echoOutput: false }
     );
   }
 }
@@ -287,11 +271,11 @@ async function setupOllamaInSingleTerminal(model) {
 
     await openTerminalWithMultipleCommands(
       commands,
-      `Ollama: Pull ${model} & Serve`,
+      `Ollama: Pull ${model} & Serve`
     );
     logSuccess("Ollama pull and serve started in same terminal");
     logProgress(
-      "Waiting for model download to complete and server to start...",
+      "Waiting for model download to complete and server to start..."
     );
 
     // Wait a bit for the model pull to start
@@ -320,7 +304,7 @@ async function setupOllamaInSingleTerminal(model) {
       await delay(10000); // Wait 10 seconds between checks
       if (i % 3 === 0) {
         logProgress(
-          `Still waiting for model ${model} to be ready and server to start...`,
+          `Still waiting for model ${model} to be ready and server to start...`
         );
       }
     }
@@ -329,7 +313,7 @@ async function setupOllamaInSingleTerminal(model) {
       logSuccess(`Model ${model} is ready and Ollama server is running`);
     } else {
       logWarning(
-        `Setup may still be in progress. Please check the terminal window.`,
+        `Setup may still be in progress. Please check the terminal window.`
       );
     }
   } catch (error) {
@@ -339,7 +323,10 @@ async function setupOllamaInSingleTerminal(model) {
 }
 
 async function main() {
-  await showWelcomeMessage();
+  // Show MCP banner at startup
+  console.clear();
+  log(MCP_BANNER, colors.cyan);
+  logDivider();
 
   // Parse command line arguments
   const args = process.argv.slice(2);
@@ -363,7 +350,6 @@ async function main() {
     if (parsingFlags && arg === "--port" && i + 1 < args.length) {
       const port = args[++i];
       envVars.PORT = port;
-      envVars.NEXT_PUBLIC_BASE_URL = `http://localhost:${port}`;
       envVars.BASE_URL = `http://localhost:${port}`;
       continue;
     }
@@ -390,7 +376,7 @@ async function main() {
     if (!isOllamaInstalled) {
       logError("Ollama is not installed. Please install Ollama first:");
       logInfo(
-        "Visit https://ollama.ai/download to download and install Ollama",
+        "Visit https://ollama.ai/download to download and install Ollama"
       );
       process.exit(1);
     }
@@ -415,35 +401,51 @@ async function main() {
   // Apply parsed environment variables to process.env first
   Object.assign(process.env, envVars);
 
-  // Get requested port and find available port
+  // Port discovery and configuration
   const requestedPort = parseInt(process.env.PORT ?? "3000", 10);
   let PORT;
 
   try {
-    logStep("0", "Checking port availability...");
-
-    if (await isPortAvailable(requestedPort)) {
-      PORT = requestedPort.toString();
-      logSuccess(`Port ${requestedPort} is available`);
+    // Check if user explicitly set a port via --port flag
+    const hasExplicitPort = envVars.PORT !== undefined;
+
+    if (hasExplicitPort) {
+      logInfo(`Using explicitly requested port: ${requestedPort}`);
+      if (await isPortAvailable(requestedPort)) {
+        PORT = requestedPort.toString();
+        logSuccess(`Port ${requestedPort} is available and ready`);
+      } else {
+        logError(`Explicitly requested port ${requestedPort} is not available`);
+        logInfo(
+          "Use a different port with --port <number> or let the system find one automatically"
+        );
+        throw new Error(`Port ${requestedPort} is already in use`);
+      }
     } else {
-      logWarning(`Port ${requestedPort} is in use, finding alternative...`);
-      const availablePort = await findAvailablePort(requestedPort + 1);
-      PORT = availablePort.toString();
-      logSuccess(`Using available port ${availablePort}`);
-
-      // Update environment variables with the new port
-      envVars.PORT = PORT;
-      envVars.NEXT_PUBLIC_BASE_URL = `http://localhost:${PORT}`;
-      envVars.BASE_URL = `http://localhost:${PORT}`;
-      Object.assign(process.env, envVars);
+      // Dynamic port discovery
+      logInfo("No specific port requested, using dynamic port discovery");
+      if (await isPortAvailable(requestedPort)) {
+        PORT = requestedPort.toString();
+        logSuccess(`Default port ${requestedPort} is available`);
+      } else {
+        logWarning(
+          `Default port ${requestedPort} is in use, searching for next available port...`
+        );
+        const availablePort = await findAvailablePort(requestedPort + 1);
+        PORT = availablePort.toString();
+        logSuccess(`Found available port: ${availablePort}`);
+      }
     }
+
+    // Update environment variables with the final port
+    envVars.PORT = PORT;
+    envVars.BASE_URL = `http://localhost:${PORT}`;
+    Object.assign(process.env, envVars);
   } catch (error) {
-    logError(`Failed to find available port: ${error.message}`);
+    logError(`Port configuration failed: ${error.message}`);
     throw error;
   }
 
-  await showServerInfo(PORT);
-
   const abort = new AbortController();
 
   let cancelled = false;
@@ -459,19 +461,29 @@ async function main() {
   });
 
   try {
-    logStep("1", "Initializing Next.js production server");
-    await delay(1000);
+    const distServerPath = resolve(projectRoot, "dist", "server", "index.js");
 
-    logStep("2", "Building application for production");
-    logProgress("This may take a few moments...");
-    await delay(500);
+    // Check if production build exists
+    if (!existsSync(distServerPath)) {
+      logProgress("Building client and server for production...");
 
-    logStep("3", "Starting server on port " + PORT);
+      await spawnPromise("npm", ["run", "build"], {
+        env: process.env,
+        cwd: projectRoot,
+        signal: abort.signal,
+        echoOutput: false,
+      });
+
+      logSuccess("Build completed successfully");
+      await delay(500);
+    } else {
+      await delay(500);
+    }
 
-    await spawnPromise("npm", ["run", "start"], {
+    await spawnPromise("node", [distServerPath], {
       env: {
         ...process.env,
-        ...envVars,
+        NODE_ENV: "production",
         PORT: PORT,
       },
       cwd: projectRoot,