@mcpjam/inspector 0.2.4 → 0.3.1

package/README.md

@@ -33,6 +33,21 @@ npx @mcpjam/inspector@latest
 
 That's it! The inspector will launch automatically in your browser at `http://localhost:6274`.
 
+### Running with Docker
+You can also run the inspector using Docker. First, make sure you have Docker installed and running.
+
+Pull the latest image from Docker Hub:
+```bash
+docker pull mcpjam/mcp-inspector:main
+```
+
+Then, run the container:
+```bash
+docker run --rm -p 6274:6274 -p 6277:6277 mcpjam/mcp-inspector:main
+```
+
+The inspector will be available in your browser at `http://127.0.0.1:6274`.
+
 ---
 
 ## 📸 Screenshots

package/cli/build/cli.js

@@ -6,6 +6,14 @@ import { dirname, resolve } from "path";
 import { spawnPromise } from "spawn-rx";
 import { fileURLToPath } from "url";
 const __dirname = dirname(fileURLToPath(import.meta.url));
+const MCP_BANNER = `
+███╗   ███╗ ██████╗██████╗     ██╗ █████╗ ███╗   ███╗
+████╗ ████║██╔════╝██╔══██╗    ██║██╔══██╗████╗ ████║
+██╔████╔██║██║     ██████╔╝    ██║███████║██╔████╔██║
+██║╚██╔╝██║██║     ██╔═══╝██   ██║██╔══██║██║╚██╔╝██║
+██║ ╚═╝ ██║╚██████╗██║    ╚█████╔╝██║  ██║██║ ╚═╝ ██║
+╚═╝     ╚═╝ ╚═════╝╚═╝     ╚════╝ ╚═╝  ╚═╝╚═╝     ╚═╝                                                    
+`;
 function handleError(error) {
     let message;
     if (error instanceof Error) {
@@ -17,7 +25,7 @@ function handleError(error) {
     else {
         message = "Unknown error";
     }
-    console.error(message);
+    console.error("\x1b[31m%s\x1b[0m", "❌ Error:", message); // Red color
     process.exit(1);
 }
 function delay(ms) {
@@ -29,12 +37,16 @@ async function runWebClient(args) {
     const inspectorClientPath = resolve(__dirname, "../../", "client", "bin", "client.js");
     const CLIENT_PORT = process.env.CLIENT_PORT ?? "6274";
     const SERVER_PORT = process.env.SERVER_PORT ?? "6277";
-    console.log("Starting MCP inspector...");
+    // Clear console and display banner
+    console.clear();
+    console.log("\x1b[36m%s\x1b[0m", MCP_BANNER); // Cyan color
+    console.log("\x1b[33m%s\x1b[0m", "🚀 Launching MCP Inspector...\n"); // Yellow color
     const abort = new AbortController();
     let cancelled = false;
     process.on("SIGINT", () => {
         cancelled = true;
         abort.abort();
+        console.log("\n\x1b[31m%s\x1b[0m", "⚠️  Shutting down MCP Inspector..."); // Red color
     });
     let server;
     let serverOk;
@@ -55,9 +67,19 @@ async function runWebClient(args) {
         // Make sure server started before starting client
         serverOk = await Promise.race([server, delay(2 * 1000)]);
     }
-    catch (error) { }
+    catch (error) {
+        console.log("\x1b[31m%s\x1b[0m", "❌ Server initialization failed"); // Red color
+    }
     if (serverOk) {
         try {
+            console.log("\x1b[32m%s\x1b[0m", "✅ Server initialized successfully"); // Green color
+            console.log("\x1b[36m%s\x1b[0m", `🌐 Opening browser at http://127.0.0.1:${CLIENT_PORT}`);
+            if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
+                // Note: We need to import 'open' if we want to auto-open browser
+                // import open from "open";
+                // open(`http://127.0.0.1:${CLIENT_PORT}`);
+            }
+            console.log("\x1b[33m%s\x1b[0m", "🖥️  Starting client interface...");
             await spawnPromise("node", [inspectorClientPath], {
                 env: { ...process.env, PORT: CLIENT_PORT },
                 signal: abort.signal,

package/client/dist/assets/{OAuthCallback-DkLMDxkx.js → OAuthCallback-mxRvi54D.js}

@@ -1,4 +1,4 @@
-import { u as useToast, r as reactExports, j as jsxRuntimeExports, S as SESSION_KEYS, I as InspectorOAuthClientProvider, a as auth } from "./index-CLxTHffA.js";
+import { u as useToast, r as reactExports, j as jsxRuntimeExports, S as SESSION_KEYS, I as InspectorOAuthClientProvider, a as auth } from "./index-kMl05fui.js";
 import { p as parseOAuthCallbackParams, g as generateOAuthErrorDescription } from "./oauthUtils-DTcoXpSP.js";
 const OAuthCallback = ({ onConnect }) => {
   const { toast } = useToast();

package/client/dist/assets/{OAuthDebugCallback-DaNmVTKt.js → OAuthDebugCallback-CjHmkokp.js}

@@ -1,4 +1,4 @@
-import { r as reactExports, S as SESSION_KEYS, j as jsxRuntimeExports } from "./index-CLxTHffA.js";
+import { r as reactExports, S as SESSION_KEYS, j as jsxRuntimeExports } from "./index-kMl05fui.js";
 import { p as parseOAuthCallbackParams, g as generateOAuthErrorDescription } from "./oauthUtils-DTcoXpSP.js";
 const OAuthDebugCallback = ({ onConnect }) => {
   reactExports.useEffect(() => {

package/client/dist/assets/{index-ebsMqCvj.css → index-De3JSks9.css}

@@ -1040,6 +1040,9 @@ video {
 .relative {
   position: relative;
 }
+.sticky {
+  position: sticky;
+}
 .inset-0 {
   inset: 0px;
 }
@@ -1049,6 +1052,9 @@ video {
 .-top-1 {
   top: -0.25rem;
 }
+.bottom-0 {
+  bottom: 0px;
+}
 .left-\[50\%\] {
   left: 50%;
 }
@@ -1258,6 +1264,9 @@ video {
 .h-96 {
   height: 24rem;
 }
+.h-\[1px\] {
+  height: 1px;
+}
 .h-\[var\(--radix-select-trigger-height\)\] {
   height: var(--radix-select-trigger-height);
 }
@@ -1363,6 +1372,9 @@ video {
 .w-\[100px\] {
   width: 100px;
 }
+.w-\[1px\] {
+  width: 1px;
+}
 .w-auto {
   width: auto;
 }
@@ -1372,6 +1384,12 @@ video {
 .min-w-0 {
   min-width: 0px;
 }
+.min-w-\[180px\] {
+  min-width: 180px;
+}
+.min-w-\[200px\] {
+  min-width: 200px;
+}
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -1385,8 +1403,11 @@ video {
 .max-w-4xl {
   max-width: 56rem;
 }
-.max-w-6xl {
-  max-width: 72rem;
+.max-w-5xl {
+  max-width: 64rem;
+}
+.max-w-7xl {
+  max-width: 80rem;
 }
 .max-w-\[75\%\] {
   max-width: 75%;
@@ -1601,6 +1622,11 @@ video {
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
 .overflow-auto {
   overflow: auto;
 }
@@ -1675,6 +1701,9 @@ video {
 .border-t {
   border-top-width: 1px;
 }
+.border-dashed {
+  border-style: dashed;
+}
 .border-blue-200 {
   --tw-border-opacity: 1;
   border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
@@ -1783,6 +1812,9 @@ video {
 .bg-background\/80 {
   background-color: hsl(var(--background) / 0.8);
 }
+.bg-background\/95 {
+  background-color: hsl(var(--background) / 0.95);
+}
 .bg-black\/10 {
   background-color: rgb(0 0 0 / 0.1);
 }
@@ -1796,6 +1828,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
 }
+.bg-blue-500\/10 {
+  background-color: rgb(59 130 246 / 0.1);
+}
 .bg-border {
   background-color: hsl(var(--border));
 }
@@ -1909,6 +1944,11 @@ video {
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
+.from-background {
+  --tw-gradient-from: hsl(var(--background)) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--background) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .from-background\/50 {
   --tw-gradient-from: hsl(var(--background) / 0.5) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(var(--background) / 0) var(--tw-gradient-to-position);
@@ -1954,6 +1994,11 @@ video {
   --tw-gradient-to: hsl(var(--muted) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.from-primary\/5 {
+  --tw-gradient-from: hsl(var(--primary) / 0.05) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .from-secondary\/20 {
   --tw-gradient-from: hsl(var(--secondary) / 0.2) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(var(--secondary) / 0) var(--tw-gradient-to-position);
@@ -2028,6 +2073,9 @@ video {
 .to-muted\/50 {
   --tw-gradient-to: hsl(var(--muted) / 0.5) var(--tw-gradient-to-position);
 }
+.to-primary\/10 {
+  --tw-gradient-to: hsl(var(--primary) / 0.1) var(--tw-gradient-to-position);
+}
 .to-secondary\/10 {
   --tw-gradient-to: hsl(var(--secondary) / 0.1) var(--tw-gradient-to-position);
 }
@@ -2167,6 +2215,9 @@ video {
 .pr-8 {
   padding-right: 2rem;
 }
+.pt-0 {
+  padding-top: 0px;
+}
 .pt-2 {
   padding-top: 0.5rem;
 }
@@ -2186,6 +2237,10 @@ video {
   font-size: 1.5rem;
   line-height: 2rem;
 }
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -2259,6 +2314,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity, 1));
 }
+.text-card-foreground {
+  color: hsl(var(--card-foreground));
+}
 .text-current {
   color: currentColor;
 }
@@ -2483,6 +2541,11 @@ video {
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.backdrop-blur {
+  --tw-backdrop-blur: blur(8px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
 .backdrop-blur-md {
   --tw-backdrop-blur: blur(12px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -2493,6 +2556,10 @@ video {
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
+.backdrop-filter {
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -2684,6 +2751,10 @@ h1 {
   border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
 }
 
+.hover\:border-border:hover {
+  border-color: hsl(var(--border));
+}
+
 .hover\:border-border\/50:hover {
   border-color: hsl(var(--border) / 0.5);
 }
@@ -2716,6 +2787,10 @@ h1 {
   background-color: hsl(var(--destructive) / 0.2);
 }
 
+.hover\:bg-destructive\/80:hover {
+  background-color: hsl(var(--destructive) / 0.8);
+}
+
 .hover\:bg-destructive\/90:hover {
   background-color: hsl(var(--destructive) / 0.9);
 }
@@ -2752,6 +2827,10 @@ h1 {
   background-color: hsl(var(--primary) / 0.2);
 }
 
+.hover\:bg-primary\/80:hover {
+  background-color: hsl(var(--primary) / 0.8);
+}
+
 .hover\:bg-primary\/90:hover {
   background-color: hsl(var(--primary) / 0.9);
 }
@@ -2892,6 +2971,12 @@ h1 {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.hover\:shadow-sm:hover {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .hover\:shadow-xl:hover {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -2902,6 +2987,11 @@ h1 {
   border-color: hsl(var(--primary) / 0.5);
 }
 
+.focus\:border-red-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
+}
+
 .focus\:border-transparent:focus {
   border-color: transparent;
 }
@@ -2939,6 +3029,11 @@ h1 {
   --tw-ring-color: hsl(var(--primary) / 0.2);
 }
 
+.focus\:ring-red-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
+}
+
 .focus\:ring-ring:focus {
   --tw-ring-color: hsl(var(--ring));
 }
@@ -3250,11 +3345,22 @@ h1 {
   --tw-enter-translate-y: -100%;
 }
 
+@supports ((-webkit-backdrop-filter: var(--tw)) or (backdrop-filter: var(--tw))) {
+
+  .supports-\[backdrop-filter\]\:bg-background\/60 {
+    background-color: hsl(var(--background) / 0.6);
+  }
+}
+
 .dark\:border-blue-800:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
 }
 
+.dark\:border-blue-800\/50:is(.dark *) {
+  border-color: rgb(30 64 175 / 0.5);
+}
+
 .dark\:border-border\/60:is(.dark *) {
   border-color: hsl(var(--border) / 0.6);
 }
@@ -3268,6 +3374,10 @@ h1 {
   border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
 }
 
+.dark\:border-gray-800\/50:is(.dark *) {
+  border-color: rgb(31 41 55 / 0.5);
+}
+
 .dark\:border-green-400:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
@@ -3291,6 +3401,10 @@ h1 {
   border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
 }
 
+.dark\:border-red-800\/50:is(.dark *) {
+  border-color: rgb(153 27 27 / 0.5);
+}
+
 .dark\:border-slate-600:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
@@ -3319,6 +3433,14 @@ h1 {
   border-color: rgb(133 77 14 / var(--tw-border-opacity, 1));
 }
 
+.dark\:border-yellow-800\/50:is(.dark *) {
+  border-color: rgb(133 77 14 / 0.5);
+}
+
+.dark\:bg-blue-950\/20:is(.dark *) {
+  background-color: rgb(23 37 84 / 0.2);
+}
+
 .dark\:bg-blue-950\/30:is(.dark *) {
   background-color: rgb(23 37 84 / 0.3);
 }
@@ -3333,6 +3455,10 @@ h1 {
   background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
 }
 
+.dark\:bg-gray-950\/20:is(.dark *) {
+  background-color: rgb(3 7 18 / 0.2);
+}
+
 .dark\:bg-gray-950\/30:is(.dark *) {
   background-color: rgb(3 7 18 / 0.3);
 }
@@ -3398,6 +3524,10 @@ h1 {
   background-color: rgb(255 255 255 / 0.1);
 }
 
+.dark\:bg-yellow-950\/20:is(.dark *) {
+  background-color: rgb(66 32 6 / 0.2);
+}
+
 .dark\:bg-yellow-950\/30:is(.dark *) {
   background-color: rgb(66 32 6 / 0.3);
 }
@@ -3673,6 +3803,10 @@ h1 {
     display: inline;
   }
 
+  .sm\:w-auto {
+    width: auto;
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }