Merge remote-tracking branch 'origin/main' into justin/sdk-auth

2025-02-21 15:31:09 +00:00
parent 02479d3ea9 e28a64c932
commit 19ee9fa86a
13 changed files with 617 additions and 75 deletions
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@ The MCP inspector is a developer tool for testing and debugging MCP servers.
 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
+npx @modelcontextprotocol/inspector node build/index.js
 ```

 You can pass both arguments and environment variables to your MCP server. Arguments are passed directly to your server, while environment variables can be set using the `-e` flag:
@@ -21,19 +21,19 @@ You can pass both arguments and environment variables to your MCP server. Argume
 npx @modelcontextprotocol/inspector build/index.js arg1 arg2

 # Pass environment variables only
-npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 build/index.js
+npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 node build/index.js

 # Pass both environment variables and arguments
-npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 build/index.js arg1 arg2
+npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 node build/index.js arg1 arg2

 # Use -- to separate inspector flags from server arguments
-npx @modelcontextprotocol/inspector -e KEY=$VALUE -- build/index.js -e server-flag
+npx @modelcontextprotocol/inspector -e KEY=$VALUE -- node build/index.js -e server-flag
 ```

 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
+CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector node build/index.js
 ```

 For more details on ways to use the inspector, see the [Inspector section of the MCP docs site](https://modelcontextprotocol.io/docs/tools/inspector). For help with debugging, see the [Debugging guide](https://modelcontextprotocol.io/docs/tools/debugging).
@@ -48,6 +48,13 @@ Development mode:
 npm run dev
 ```

+> **Note for Windows users:**  
+> On Windows, use the following command instead:
+>
+> ```bash
+> npm run dev:windows
+> ```
+
 Production mode:

 ```bash
--- a/client/bin/cli.js
+++ b/client/bin/cli.js
@@ -9,7 +9,10 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 const distPath = join(__dirname, "../dist");

 const server = http.createServer((request, response) => {
-  return handler(request, response, { public: distPath });
+  return handler(request, response, {
+    public: distPath,
+    rewrites: [{ source: "/**", destination: "/index.html" }],
+  });
 });

 const port = process.env.PORT || 5173;
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.4.0",
+  "version": "0.4.1",
  "description": "Client-side application for the Model Context Protocol inspector",
  "license": "MIT",
  "author": "Anthropic, PBC (https://anthropic.com)",
@@ -22,17 +22,21 @@
  },
  "dependencies": {
    "@modelcontextprotocol/sdk": "^1.4.1",
+    "@radix-ui/react-checkbox": "^1.1.4",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-select": "^2.1.2",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.1",
+    "@types/prismjs": "^1.26.5",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "lucide-react": "^0.447.0",
+    "prismjs": "^1.29.0",
    "pkce-challenge": "^4.1.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
+    "react-simple-code-editor": "^0.14.1",
    "react-toastify": "^10.0.6",
    "serve-handler": "^6.1.6",
    "tailwind-merge": "^2.5.3",
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -0,0 +1,269 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import JsonEditor from "./JsonEditor";
+
+export type JsonValue =
+  | string
+  | number
+  | boolean
+  | null
+  | JsonValue[]
+  | { [key: string]: JsonValue };
+
+export type JsonSchemaType = {
+  type: "string" | "number" | "integer" | "boolean" | "array" | "object";
+  description?: string;
+  properties?: Record<string, JsonSchemaType>;
+  items?: JsonSchemaType;
+};
+
+type JsonObject = { [key: string]: JsonValue };
+
+interface DynamicJsonFormProps {
+  schema: JsonSchemaType;
+  value: JsonValue;
+  onChange: (value: JsonValue) => void;
+  maxDepth?: number;
+}
+
+const formatFieldLabel = (key: string): string => {
+  return key
+    .replace(/([A-Z])/g, " $1") // Insert space before capital letters
+    .replace(/_/g, " ") // Replace underscores with spaces
+    .replace(/^\w/, (c) => c.toUpperCase()); // Capitalize first letter
+};
+
+const DynamicJsonForm = ({
+  schema,
+  value,
+  onChange,
+  maxDepth = 3,
+}: DynamicJsonFormProps) => {
+  const [isJsonMode, setIsJsonMode] = useState(false);
+  const [jsonError, setJsonError] = useState<string>();
+
+  const generateDefaultValue = (propSchema: JsonSchemaType): JsonValue => {
+    switch (propSchema.type) {
+      case "string":
+        return "";
+      case "number":
+      case "integer":
+        return 0;
+      case "boolean":
+        return false;
+      case "array":
+        return [];
+      case "object": {
+        const obj: JsonObject = {};
+        if (propSchema.properties) {
+          Object.entries(propSchema.properties).forEach(([key, prop]) => {
+            obj[key] = generateDefaultValue(prop);
+          });
+        }
+        return obj;
+      }
+      default:
+        return null;
+    }
+  };
+
+  const renderFormFields = (
+    propSchema: JsonSchemaType,
+    currentValue: JsonValue,
+    path: string[] = [],
+    depth: number = 0,
+  ) => {
+    if (
+      depth >= maxDepth &&
+      (propSchema.type === "object" || propSchema.type === "array")
+    ) {
+      // Render as JSON editor when max depth is reached
+      return (
+        <JsonEditor
+          value={JSON.stringify(
+            currentValue ?? generateDefaultValue(propSchema),
+            null,
+            2,
+          )}
+          onChange={(newValue) => {
+            try {
+              const parsed = JSON.parse(newValue);
+              handleFieldChange(path, parsed);
+              setJsonError(undefined);
+            } catch (err) {
+              setJsonError(err instanceof Error ? err.message : "Invalid JSON");
+            }
+          }}
+          error={jsonError}
+        />
+      );
+    }
+
+    switch (propSchema.type) {
+      case "string":
+      case "number":
+      case "integer":
+        return (
+          <Input
+            type={propSchema.type === "string" ? "text" : "number"}
+            value={(currentValue as string | number) ?? ""}
+            onChange={(e) =>
+              handleFieldChange(
+                path,
+                propSchema.type === "string"
+                  ? e.target.value
+                  : Number(e.target.value),
+              )
+            }
+            placeholder={propSchema.description}
+          />
+        );
+      case "boolean":
+        return (
+          <Input
+            type="checkbox"
+            checked={(currentValue as boolean) ?? false}
+            onChange={(e) => handleFieldChange(path, e.target.checked)}
+            className="w-4 h-4"
+          />
+        );
+      case "object":
+        if (!propSchema.properties) return null;
+        return (
+          <div className="space-y-4 border rounded-md p-4">
+            {Object.entries(propSchema.properties).map(([key, prop]) => (
+              <div key={key} className="space-y-2">
+                <Label>{formatFieldLabel(key)}</Label>
+                {renderFormFields(
+                  prop,
+                  (currentValue as JsonObject)?.[key],
+                  [...path, key],
+                  depth + 1,
+                )}
+              </div>
+            ))}
+          </div>
+        );
+      case "array": {
+        const arrayValue = Array.isArray(currentValue) ? currentValue : [];
+        if (!propSchema.items) return null;
+        return (
+          <div className="space-y-4">
+            {propSchema.description && (
+              <p className="text-sm text-gray-600">{propSchema.description}</p>
+            )}
+
+            {propSchema.items?.description && (
+              <p className="text-sm text-gray-500">
+                Items: {propSchema.items.description}
+              </p>
+            )}
+
+            <div className="space-y-2">
+              {arrayValue.map((item, index) => (
+                <div key={index} className="flex items-center gap-2">
+                  {renderFormFields(
+                    propSchema.items as JsonSchemaType,
+                    item,
+                    [...path, index.toString()],
+                    depth + 1,
+                  )}
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      const newArray = [...arrayValue];
+                      newArray.splice(index, 1);
+                      handleFieldChange(path, newArray);
+                    }}
+                  >
+                    Remove
+                  </Button>
+                </div>
+              ))}
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => {
+                  handleFieldChange(path, [
+                    ...arrayValue,
+                    generateDefaultValue(propSchema.items as JsonSchemaType),
+                  ]);
+                }}
+                title={
+                  propSchema.items?.description
+                    ? `Add new ${propSchema.items.description}`
+                    : "Add new item"
+                }
+              >
+                Add Item
+              </Button>
+            </div>
+          </div>
+        );
+      }
+      default:
+        return null;
+    }
+  };
+
+  const handleFieldChange = (path: string[], fieldValue: JsonValue) => {
+    if (path.length === 0) {
+      onChange(fieldValue);
+      return;
+    }
+
+    const newValue = {
+      ...(typeof value === "object" && value !== null && !Array.isArray(value)
+        ? value
+        : {}),
+    } as JsonObject;
+    let current: JsonObject = newValue;
+
+    for (let i = 0; i < path.length - 1; i++) {
+      const key = path[i];
+      if (!(key in current)) {
+        current[key] = {};
+      }
+      current = current[key] as JsonObject;
+    }
+
+    current[path[path.length - 1]] = fieldValue;
+    onChange(newValue);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-end">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setIsJsonMode(!isJsonMode)}
+        >
+          {isJsonMode ? "Switch to Form" : "Switch to JSON"}
+        </Button>
+      </div>
+
+      {isJsonMode ? (
+        <JsonEditor
+          value={JSON.stringify(value ?? generateDefaultValue(schema), null, 2)}
+          onChange={(newValue) => {
+            try {
+              onChange(JSON.parse(newValue));
+              setJsonError(undefined);
+            } catch (err) {
+              setJsonError(err instanceof Error ? err.message : "Invalid JSON");
+            }
+          }}
+          error={jsonError}
+        />
+      ) : (
+        renderFormFields(schema, value)
+      )}
+    </div>
+  );
+};
+
+export default DynamicJsonForm;
--- a/client/src/components/JsonEditor.tsx
+++ b/client/src/components/JsonEditor.tsx
@@ -0,0 +1,59 @@
+import Editor from "react-simple-code-editor";
+import Prism from "prismjs";
+import "prismjs/components/prism-json";
+import "prismjs/themes/prism.css";
+import { Button } from "@/components/ui/button";
+
+interface JsonEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  error?: string;
+}
+
+const JsonEditor = ({ value, onChange, error }: JsonEditorProps) => {
+  const formatJson = (json: string): string => {
+    try {
+      return JSON.stringify(JSON.parse(json), null, 2);
+    } catch {
+      return json;
+    }
+  };
+
+  return (
+    <div className="relative space-y-2">
+      <div className="flex justify-end">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onChange(formatJson(value))}
+        >
+          Format JSON
+        </Button>
+      </div>
+      <div
+        className={`border rounded-md ${
+          error ? "border-red-500" : "border-gray-200 dark:border-gray-800"
+        }`}
+      >
+        <Editor
+          value={value}
+          onValueChange={onChange}
+          highlight={(code) =>
+            Prism.highlight(code, Prism.languages.json, "json")
+          }
+          padding={10}
+          style={{
+            fontFamily: '"Fira code", "Fira Mono", monospace',
+            fontSize: 14,
+            backgroundColor: "transparent",
+            minHeight: "100px",
+          }}
+          className="w-full"
+        />
+      </div>
+      {error && <p className="text-sm text-red-500 mt-1">{error}</p>}
+    </div>
+  );
+};
+
+export default JsonEditor;
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -1,9 +1,11 @@
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { TabsContent } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
+import DynamicJsonForm, { JsonSchemaType, JsonValue } from "./DynamicJsonForm";
 import {
  ListToolsResult,
  Tool,
@@ -15,6 +17,12 @@ import ListPane from "./ListPane";

 import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js";

+type SchemaProperty = {
+  type: string;
+  description?: string;
+  properties?: Record<string, SchemaProperty>;
+};
+
 const ToolsTab = ({
  tools,
  listTools,
@@ -159,22 +167,42 @@ const ToolsTab = ({
                {selectedTool.description}
              </p>
              {Object.entries(selectedTool.inputSchema.properties ?? []).map(
-                ([key, value]) => (
-                  <div key={key}>
-                    <Label
-                      htmlFor={key}
-                      className="block text-sm font-medium text-gray-700"
-                    >
-                      {key}
-                    </Label>
-                    {
-                      /* @ts-expect-error value type is currently unknown */
-                      value.type === "string" ? (
+                ([key, value]) => {
+                  const prop = value as SchemaProperty;
+                  return (
+                    <div key={key}>
+                      <Label
+                        htmlFor={key}
+                        className="block text-sm font-medium text-gray-700"
+                      >
+                        {key}
+                      </Label>
+                      {prop.type === "boolean" ? (
+                        <div className="flex items-center space-x-2 mt-2">
+                          <Checkbox
+                            id={key}
+                            name={key}
+                            checked={!!params[key]}
+                            onCheckedChange={(checked: boolean) =>
+                              setParams({
+                                ...params,
+                                [key]: checked,
+                              })
+                            }
+                          />
+                          <label
+                            htmlFor={key}
+                            className="text-sm font-medium text-gray-700 dark:text-gray-300"
+                          >
+                            {prop.description || "Toggle this option"}
+                          </label>
+                        </div>
+                      ) : prop.type === "string" ? (
                        <Textarea
                          id={key}
                          name={key}
-                          // @ts-expect-error value type is currently unknown
-                          placeholder={value.description}
+                          placeholder={prop.description}
+                          value={(params[key] as string) ?? ""}
                          onChange={(e) =>
                            setParams({
                              ...params,
@@ -183,54 +211,46 @@ const ToolsTab = ({
                          }
                          className="mt-1"
                        />
-                      ) : /* @ts-expect-error value type is currently unknown */
-                      value.type === "object" ? (
-                        <Textarea
-                          id={key}
-                          name={key}
-                          // @ts-expect-error value type is currently unknown
-                          placeholder={value.description}
-                          onChange={(e) => {
-                            try {
-                              const parsed = JSON.parse(e.target.value);
-                              setParams({
-                                ...params,
-                                [key]: parsed,
-                              });
-                            } catch (err) {
-                              // If invalid JSON, store as string - will be validated on submit
-                              setParams({
-                                ...params,
-                                [key]: e.target.value,
-                              });
+                      ) : prop.type === "object" ? (
+                        <div className="mt-1">
+                          <DynamicJsonForm
+                            schema={
+                              {
+                                type: "object",
+                                properties: prop.properties,
+                                description: prop.description,
+                              } as JsonSchemaType
                            }
-                          }}
-                          className="mt-1"
-                        />
+                            value={(params[key] as JsonValue) ?? {}}
+                            onChange={(newValue: JsonValue) => {
+                              setParams({
+                                ...params,
+                                [key]: newValue,
+                              });
+                            }}
+                          />
+                        </div>
                      ) : (
                        <Input
-                          // @ts-expect-error value type is currently unknown
-                          type={value.type === "number" ? "number" : "text"}
+                          type={prop.type === "number" ? "number" : "text"}
                          id={key}
                          name={key}
-                          // @ts-expect-error value type is currently unknown
-                          placeholder={value.description}
+                          placeholder={prop.description}
                          onChange={(e) =>
                            setParams({
                              ...params,
                              [key]:
-                                // @ts-expect-error value type is currently unknown
-                                value.type === "number"
+                                prop.type === "number"
                                  ? Number(e.target.value)
                                  : e.target.value,
                            })
                          }
                          className="mt-1"
                        />
-                      )
-                    }
-                  </div>
-                ),
+                      )}
+                    </div>
+                  );
+                },
              )}
              <Button onClick={() => callTool(selectedTool.name, params)}>
                <Send className="w-4 h-4 mr-2" />
--- a/client/src/components/ui/checkbox.tsx
+++ b/client/src/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -57,6 +57,10 @@ button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
 }

+button[role="checkbox"] {
+  padding: 0;
+}
+
@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
--- a/client/src/lib/auth.ts
+++ b/client/src/lib/auth.ts
@@ -71,4 +71,4 @@ class InspectorOAuthClientProvider implements OAuthClientProvider {
  }
 }

-export const authProvider = new InspectorOAuthClientProvider();
+export const authProvider = new InspectorOAuthClientProvider();
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,23 +1,23 @@
 {
  "name": "@modelcontextprotocol/inspector",
-  "version": "0.4.0",
+  "version": "0.4.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@modelcontextprotocol/inspector",
-      "version": "0.4.0",
+      "version": "0.4.1",
      "license": "MIT",
      "workspaces": [
        "client",
        "server"
      ],
      "dependencies": {
-        "@modelcontextprotocol/inspector-client": "0.3.0",
-        "@modelcontextprotocol/inspector-server": "0.3.0",
+        "@modelcontextprotocol/inspector-client": "0.4.1",
+        "@modelcontextprotocol/inspector-server": "0.4.1",
        "concurrently": "^9.0.1",
        "shell-quote": "^1.8.2",
-        "spawn-rx": "^5.1.0",
+        "spawn-rx": "^5.1.2",
        "ts-node": "^10.9.2"
      },
      "bin": {
@@ -31,21 +31,25 @@
    },
    "client": {
      "name": "@modelcontextprotocol/inspector-client",
-      "version": "0.4.0",
+      "version": "0.4.1",
      "license": "MIT",
      "dependencies": {
        "@modelcontextprotocol/sdk": "^1.4.1",
+        "@radix-ui/react-checkbox": "^1.1.4",
        "@radix-ui/react-icons": "^1.3.0",
        "@radix-ui/react-label": "^2.1.0",
        "@radix-ui/react-select": "^2.1.2",
        "@radix-ui/react-slot": "^1.1.0",
        "@radix-ui/react-tabs": "^1.1.1",
+        "@types/prismjs": "^1.26.5",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.1.1",
        "lucide-react": "^0.447.0",
        "pkce-challenge": "^4.1.0",
+        "prismjs": "^1.29.0",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
+        "react-simple-code-editor": "^0.14.1",
        "react-toastify": "^10.0.6",
        "serve-handler": "^6.1.6",
        "tailwind-merge": "^2.5.3",
@@ -1313,6 +1317,122 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.4.tgz",
+      "integrity": "sha512-wP0CPAHq+P5I4INKe3hJrIa1WoNqqrejzW+zoU0rOvo1b9gDEJJFl2rYfO1PYJUQCc2H1WZxIJmyv9BS8i5fLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
+      "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz",
+      "integrity": "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
+      "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-collection": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
@@ -2332,6 +2452,12 @@
        "undici-types": "~6.20.0"
      }
    },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.5",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz",
+      "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==",
+      "license": "MIT"
+    },
    "node_modules/@types/prop-types": {
      "version": "15.7.13",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
@@ -5141,6 +5267,15 @@
        "url": "https://github.com/prettier/prettier?sponsor=1"
      }
    },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/proxy-addr": {
      "version": "2.0.7",
      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -5317,6 +5452,16 @@
        }
      }
    },
+    "node_modules/react-simple-code-editor": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.14.1.tgz",
+      "integrity": "sha512-BR5DtNRy+AswWJECyA17qhUDvrrCZ6zXOCfkQY5zSmb96BVUbpVAv03WpcjcwtCwiLbIANx3gebHOcXYn1EHow==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
    "node_modules/react-style-singleton": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -5773,9 +5918,9 @@
      }
    },
    "node_modules/spawn-rx": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/spawn-rx/-/spawn-rx-5.1.0.tgz",
-      "integrity": "sha512-b4HX44hI0usMiHu6LNaZUVg0BGqHuBcl+81iEhZwhvKHz1efTqD/CHBcUbm/uIe5TARy9pJolxU2NMfh6GuQBA==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/spawn-rx/-/spawn-rx-5.1.2.tgz",
+      "integrity": "sha512-/y7tJKALVZ1lPzeZZB9jYnmtrL7d0N2zkorii5a7r7dhHkWIuLTzZpZzMJLK1dmYRgX/NCc4iarTO3F7BS2c/A==",
      "license": "MIT",
      "dependencies": {
        "debug": "^4.3.7",
@@ -6971,7 +7116,7 @@
    },
    "server": {
      "name": "@modelcontextprotocol/inspector-server",
-      "version": "0.4.0",
+      "version": "0.4.1",
      "license": "MIT",
      "dependencies": {
        "@modelcontextprotocol/sdk": "^1.4.1",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@modelcontextprotocol/inspector",
-  "version": "0.4.0",
+  "version": "0.4.1",
  "description": "Model Context Protocol inspector",
  "license": "MIT",
  "author": "Anthropic, PBC (https://anthropic.com)",
@@ -22,6 +22,7 @@
  ],
  "scripts": {
    "dev": "concurrently \"cd client && npm run dev\" \"cd server && npm run dev\"",
+    "dev:windows": "concurrently \"cd client && npm run dev\" \"cd server && npm run dev:windows",
    "build-server": "cd server && npm run build",
    "build-client": "cd client && npm run build",
    "build": "npm run build-server && npm run build-client",
@@ -33,11 +34,11 @@
    "publish-all": "npm publish --workspaces --access public && npm publish --access public"
  },
  "dependencies": {
-    "@modelcontextprotocol/inspector-client": "0.3.0",
-    "@modelcontextprotocol/inspector-server": "0.3.0",
+    "@modelcontextprotocol/inspector-client": "0.4.1",
+    "@modelcontextprotocol/inspector-server": "0.4.1",
    "concurrently": "^9.0.1",
    "shell-quote": "^1.8.2",
-    "spawn-rx": "^5.1.0",
+    "spawn-rx": "^5.1.2",
    "ts-node": "^10.9.2"
  },
  "devDependencies": {
--- a/server/package.json
+++ b/server/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@modelcontextprotocol/inspector-server",
-  "version": "0.4.0",
+  "version": "0.4.1",
  "description": "Server-side application for the Model Context Protocol inspector",
  "license": "MIT",
  "author": "Anthropic, PBC (https://anthropic.com)",
@@ -16,7 +16,8 @@
  "scripts": {
    "build": "tsc",
    "start": "node build/index.js",
-    "dev": "tsx watch --clear-screen=false src/index.ts"
+    "dev": "tsx watch --clear-screen=false src/index.ts",
+    "dev:windows": "tsx watch --clear-screen=false src/index.ts < NUL"
  },
  "devDependencies": {
    "@types/cors": "^2.8.17",
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -184,14 +184,13 @@ const PORT = process.env.PORT || 3000;

 try {
  const server = app.listen(PORT);
-  
-  server.on('listening', () => {
+
+  server.on("listening", () => {
    const addr = server.address();
-    const port = typeof addr === 'string' ? addr : addr?.port;
+    const port = typeof addr === "string" ? addr : addr?.port;
    console.log(`Proxy server listening on port ${port}`);
  });
-
 } catch (error) {
-  console.error('Failed to start server:', error);
+  console.error("Failed to start server:", error);
  process.exit(1);
 }