Merge pull request modelcontextprotocol#61 from modelcontextprotocol/ashwin/npx

make inspector runnable via npx

Author: ashwin-ant

bin/cli.js

@@ -6,20 +6,24 @@ import concurrently from "concurrently";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
-// Paths to the server and client entry points
-const serverPath = join(__dirname, "../server/build/index.js");
-const clientPath = join(__dirname, "../client/bin/cli.js");
+// Get command line arguments
+const [, , command, ...mcpServerArgs] = process.argv;
+
+const inspectorServerPath = join(__dirname, "../server/build/index.js");
+
+// Path to the client entry point
+const inspectorClientPath = join(__dirname, "../client/bin/cli.js");
 
 console.log("Starting MCP inspector...");
 
 const { result } = concurrently(
   [
     {
-      command: `node ${serverPath}`,
+      command: `node ${inspectorServerPath}${command ? ` --env ${command}` : ""}${mcpServerArgs.length ? ` --args "${mcpServerArgs.join(" ")}"` : ""}`,
       name: "server",
     },
     {
-      command: `node ${clientPath}`,
+      command: `node ${inspectorClientPath}`,
       name: "client",
     },
   ],

client/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.1.0",
-  "private": true,
+  "version": "0.1.5",
   "description": "Client-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",

client/src/App.tsx

@@ -186,9 +186,13 @@ const App = () => {
   }, [args]);
 
   useEffect(() => {
-    fetch("http://localhost:3000/default-environment")
+    fetch("http://localhost:3000/config")
       .then((response) => response.json())
-      .then((data) => setEnv(data))
+      .then((data) => {
+        setEnv(data.defaultEnvironment);
+        setCommand(data.defaultCommand);
+        setArgs(data.defaultArgs);
+      })
       .catch((error) =>
         console.error("Error fetching default environment:", error),
       );

package-lock.json

@@ -1,7 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.1.0",
-  "private": true,
+  "version": "0.1.5",
   "description": "Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -33,6 +32,8 @@
     "prettier-fix": "prettier --write ."
   },
   "dependencies": {
+    "@modelcontextprotocol/inspector-client": "0.1.0",
+    "@modelcontextprotocol/inspector-server": "0.1.0",
     "concurrently": "^9.0.1"
   },
   "devDependencies": {

package.json

@@ -1,7 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-server",
-  "version": "0.1.0",
-  "private": true,
+  "version": "0.1.5",
   "description": "Server-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",

server/package.json

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
 
+import { parseArgs } from "node:util";
 import cors from "cors";
 import EventSource from "eventsource";
 
@@ -16,6 +17,14 @@ import mcpProxy from "./mcpProxy.js";
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 (global as any).EventSource = EventSource;
 
+const { values } = parseArgs({
+  args: process.argv.slice(2),
+  options: {
+    env: { type: "string", default: "" },
+    args: { type: "string", default: "" },
+  },
+});
+
 const app = express();
 app.use(cors());
 
@@ -97,11 +106,16 @@ app.post("/message", async (req, res) => {
   }
 });
 
-app.get("/default-environment", (req, res) => {
+app.get("/config", (req, res) => {
   try {
-    res.json(getDefaultEnvironment());
+    const defaultEnvironment = getDefaultEnvironment();
+    res.json({
+      defaultEnvironment,
+      defaultCommand: values.env,
+      defaultArgs: values.args,
+    });
   } catch (error) {
-    console.error("Error in /default-environment route:", error);
+    console.error("Error in /config route:", error);
     res.status(500).json(error);
   }
 });