Use serve to create npm package for the client

Author: jspahrsummers

client/bin/cli.js

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+import handler from "serve-handler";
+import http from "http";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const distPath = join(__dirname, "../dist");
+
+const server = http.createServer((request, response) => {
+  return handler(request, response, { public: distPath });
+});
+
+const port = process.env.PORT || 3000;
+server.listen(port, () => {
+  console.log(`MCP inspector client running at http://localhost:${port}`);
+});

client/package.json

@@ -7,11 +7,19 @@
   "homepage": "https://modelcontextprotocol.github.io",
   "bugs": "https://github.com/modelcontextprotocol/inspector/issues",
   "type": "module",
+  "bin": {
+    "mcp-inspector-client": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "dist"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "prepare": "npm run build"
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "*",
@@ -25,6 +33,7 @@
     "lucide-react": "^0.447.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "serve-handler": "^6.1.6",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"
@@ -34,6 +43,7 @@
     "@types/node": "^22.7.5",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
+    "@types/serve-handler": "^6.1.4",
     "@vitejs/plugin-react": "^4.3.2",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.11.1",