@modelcontextprotocol/inspector 0.2.2 → 0.2.4

package/README.md

@@ -2,18 +2,47 @@
 
 The MCP inspector is a developer tool for testing and debugging MCP servers.
 
-It can be run easily from `npx`. For example, in a folder where there's a built JavaScript server at `build/index.js`:
+![MCP Inspector Screenshot](mcp-inspector.png)
 
-```
+## Running the Inspector
+
+### From an MCP server repository
+
+To inspect an MCP server implementation, there's no need to clone this repo. Instead, use `npx`. For example, if your server is built at `build/index.js`:
+
+```bash
 npx @modelcontextprotocol/inspector build/index.js
 ```
 
-You can also pass arguments along to the server:
+You can also pass arguments along which will get passed as arguments to your MCP server:
 
 ```
 npx @modelcontextprotocol/inspector build/index.js arg1 arg2 ...
 ```
 
+The inspector runs both a client UI (default port 5173) and an MCP proxy server (default port 3000). Open the client UI in your browser to use the inspector. You can customize the ports if needed:
+
+```bash
+CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector build/index.js
+```
+
+### From this repository
+
+If you're working on the inspector itself:
+
+Development mode:
+
+```bash
+npm run dev
+```
+
+Production mode:
+
+```bash
+npm run build
+npm start
+```
+
 ## License
 
 This project is licensed under the MIT License—see the [LICENSE](LICENSE) file for details.

package/bin/cli.js

@@ -1,65 +1,88 @@
 #!/usr/bin/env node
 
-import { join, dirname } from "path";
+import { resolve, dirname } from "path";
+import { spawnPromise } from "spawn-rx";
 import { fileURLToPath } from "url";
-import concurrently from "concurrently";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
-// Get command line arguments
-const [, , command, ...mcpServerArgs] = process.argv;
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
 
-const inspectorServerPath = join(__dirname, "../server/build/index.js");
+async function main() {
+  // Get command line arguments
+  const [, , command, ...mcpServerArgs] = process.argv;
 
-// Path to the client entry point
-const inspectorClientPath = join(__dirname, "../client/bin/cli.js");
+  const inspectorServerPath = resolve(
+    __dirname,
+    "..",
+    "server",
+    "build",
+    "index.js",
+  );
 
-console.log("Starting MCP inspector...");
+  // Path to the client entry point
+  const inspectorClientPath = resolve(
+    __dirname,
+    "..",
+    "client",
+    "bin",
+    "cli.js",
+  );
 
-function escapeArg(arg) {
-  if (arg.includes(" ") || arg.includes("'") || arg.includes('"')) {
-    return `\\"${arg.replace(/"/g, '\\\\\\"')}\\"`;
-  }
-  return arg;
-}
+  const CLIENT_PORT = process.env.CLIENT_PORT ?? "5173";
+  const SERVER_PORT = process.env.SERVER_PORT ?? "3000";
 
-const serverCommand = [
-  `node`,
-  inspectorServerPath,
-  command ? `--env ${escapeArg(command)}` : "",
-  mcpServerArgs.length
-    ? `--args="${mcpServerArgs.map(escapeArg).join(" ")}"`
-    : "",
-]
-  .filter(Boolean)
-  .join(" ");
-
-const CLIENT_PORT = process.env.CLIENT_PORT ?? "";
-const SERVER_PORT = process.env.SERVER_PORT ?? "";
-
-const { result } = concurrently(
-  [
-    {
-      command: `PORT=${SERVER_PORT} ${serverCommand}`,
-      name: "server",
-    },
+  console.log("Starting MCP inspector...");
+
+  const abort = new AbortController();
+
+  let cancelled = false;
+  process.on("SIGINT", () => {
+    cancelled = true;
+    abort.abort();
+  });
+
+  const server = spawnPromise(
+    "node",
+    [
+      inspectorServerPath,
+      ...(command ? [`--env`, command] : []),
+      ...(mcpServerArgs ? ["--args", mcpServerArgs.join(" ")] : []),
+    ],
     {
-      command: `PORT=${CLIENT_PORT} node ${inspectorClientPath}`,
-      name: "client",
+      env: { ...process.env, PORT: SERVER_PORT },
+      signal: abort.signal,
+      echoOutput: true,
     },
-  ],
-  {
-    prefix: "name",
-    killOthers: ["failure", "success"],
-    restartTries: 3,
-  },
-);
-
-console.log(
-  `\n🔍 MCP Inspector is up and running at http://localhost:${CLIENT_PORT || 5173} 🚀`,
-);
-
-result.catch((err) => {
-  console.error("An error occurred:", err);
-  process.exit(1);
-});
+  );
+
+  const client = spawnPromise("node", [inspectorClientPath], {
+    env: { ...process.env, PORT: CLIENT_PORT },
+    signal: abort.signal,
+    echoOutput: true,
+  });
+
+  // Make sure our server/client didn't immediately fail
+  await Promise.any([server, client, delay(2 * 1000)]);
+  const portParam = SERVER_PORT === "3000" ? "" : `?proxyPort=${SERVER_PORT}`;
+  console.log(
+    `\n🔍 MCP Inspector is up and running at http://localhost:${CLIENT_PORT}${portParam} 🚀`,
+  );
+
+  try {
+    await Promise.any([server, client]);
+  } catch (e) {
+    if (!cancelled || process.env.DEBUG) throw e;
+  }
+
+  return 0;
+}
+
+main()
+  .then((_) => process.exit(0))
+  .catch((e) => {
+    console.error(e);
+    process.exit(1);
+  });