@modelcontextprotocol/inspector 0.2.2 → 0.2.3

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,82 @@
 #!/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));
+}
+
+async function main() {
+  // Get command line arguments
+  const [, , command, ...mcpServerArgs] = process.argv;
+
+  const inspectorServerPath = resolve(
+    __dirname,
+    "..",
+    "server",
+    "build",
+    "index.js",
+  );
+
+  // Path to the client entry point
+  const inspectorClientPath = resolve(
+    __dirname,
+    "..",
+    "client",
+    "bin",
+    "cli.js",
+  );
+
+  const CLIENT_PORT = process.env.CLIENT_PORT ?? "5173";
+  const SERVER_PORT = process.env.SERVER_PORT ?? "3000";
 
-const inspectorServerPath = join(__dirname, "../server/build/index.js");
+  console.log("Starting MCP inspector...");
 
-// Path to the client entry point
-const inspectorClientPath = join(__dirname, "../client/bin/cli.js");
+  const abort = new AbortController();
 
-console.log("Starting MCP inspector...");
+  let cancelled = false;
+  process.on("SIGINT", () => {
+    cancelled = true;
+    abort.abort();
+  });
 
-function escapeArg(arg) {
-  if (arg.includes(" ") || arg.includes("'") || arg.includes('"')) {
-    return `\\"${arg.replace(/"/g, '\\\\\\"')}\\"`;
+  const server = spawnPromise(
+    "node",
+    [
+      inspectorServerPath,
+      ...(command ? [`--env`, command] : []),
+      ...(mcpServerArgs ? ["--args", mcpServerArgs.join(" ")] : []),
+    ],
+    { env: { ...process.env, PORT: SERVER_PORT }, signal: abort.signal },
+  );
+
+  const client = spawnPromise("node", [inspectorClientPath], {
+    env: { ...process.env, PORT: CLIENT_PORT },
+    signal: abort.signal,
+  });
+
+  // Make sure our server/client didn't immediately fail
+  await Promise.any([server, client, delay(2 * 1000)]);
+  console.log(
+    `\n🔍 MCP Inspector is up and running at http://localhost:${CLIENT_PORT} 🚀`,
+  );
+
+  try {
+    await Promise.any([server, client]);
+  } catch (e) {
+    if (!cancelled || process.env.DEBUG) throw e;
   }
-  return arg;
+
+  return 0;
 }
 
-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",
-    },
-    {
-      command: `PORT=${CLIENT_PORT} node ${inspectorClientPath}`,
-      name: "client",
-    },
-  ],
-  {
-    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);
-});
+main()
+  .then((_) => process.exit(0))
+  .catch((e) => {
+    console.error(e);
+    process.exit(1);
+  });