Merge branch 'main' into patch-1

.github/workflows/main.yml

@@ -25,6 +25,11 @@ jobs:
       # Working around https://github.com/npm/cli/issues/4828
       # - run: npm ci
       - run: npm install --no-package-lock
+
+      - name: Run client tests
+        working-directory: ./client
+        run: npm test
+
       - run: npm run build
 
   publish:

.gitignore

@@ -4,3 +4,4 @@ server/build
 client/dist
 client/tsconfig.app.tsbuildinfo
 client/tsconfig.node.tsbuildinfo
+.vscode

CONTRIBUTING.md

@@ -7,7 +7,7 @@ Thanks for your interest in contributing! This guide explains how to get involve
 1. Fork the repository and clone it locally
 2. Install dependencies with `npm install`
 3. Run `npm run dev` to start both client and server in development mode
-4. Use the web UI at http://localhost:5173 to interact with the inspector
+4. Use the web UI at http://127.0.0.1:5173 to interact with the inspector
 
 ## Development Process & Pull Requests
 

README.md

@@ -42,6 +42,10 @@ For more details on ways to use the inspector, see the [Inspector section of the
 
 The inspector supports bearer token authentication for SSE connections. Enter your token in the UI when connecting to an MCP server, and it will be sent in the Authorization header.
 
+### Security Considerations
+
+The MCP Inspector includes a proxy server that can run and communicate with local MCP processes. The proxy server should not be exposed to untrusted networks as it has permissions to spawn local processes and can connect to any specified MCP server.
+
 ### From this repository
 
 If you're working on the inspector itself:

bin/cli.js

@@ -27,9 +27,15 @@ async function main() {
     }
 
     if (parsingFlags && arg === "-e" && i + 1 < args.length) {
-      const [key, value] = args[++i].split("=");
-      if (key && value) {
+      const envVar = args[++i];
+      const equalsIndex = envVar.indexOf("=");
+
+      if (equalsIndex !== -1) {
+        const key = envVar.substring(0, equalsIndex);
+        const value = envVar.substring(equalsIndex + 1);
         envVars[key] = value;
+      } else {
+        envVars[envVar] = "";
       }
     } else if (!command) {
       command = arg;
@@ -96,7 +102,7 @@ async function main() {
   await Promise.any([server, client, delay(2 * 1000)]);
   const portParam = SERVER_PORT === "3000" ? "" : `?proxyPort=${SERVER_PORT}`;
   console.log(
-    `\n🔍 MCP Inspector is up and running at http://localhost:${CLIENT_PORT}${portParam} 🚀`,
+    `\n🔍 MCP Inspector is up and running at http://127.0.0.1:${CLIENT_PORT}${portParam} 🚀`,
   );
 
   try {

client/jest.config.cjs

@@ -0,0 +1,33 @@
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1",
+    "\\.css$": "<rootDir>/src/__mocks__/styleMock.js",
+  },
+  transform: {
+    "^.+\\.tsx?$": [
+      "ts-jest",
+      {
+        jsx: "react-jsx",
+        tsconfig: "tsconfig.jest.json",
+      },
+    ],
+  },
+  extensionsToTreatAsEsm: [".ts", ".tsx"],
+  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
+  // Exclude directories and files that don't need to be tested
+  testPathIgnorePatterns: [
+    "/node_modules/",
+    "/dist/",
+    "/bin/",
+    "\\.config\\.(js|ts|cjs|mjs)$",
+  ],
+  // Exclude the same patterns from coverage reports
+  coveragePathIgnorePatterns: [
+    "/node_modules/",
+    "/dist/",
+    "/bin/",
+    "\\.config\\.(js|ts|cjs|mjs)$",
+  ],
+};

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Client-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -18,12 +18,14 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "jest --config jest.config.cjs",
+    "test:watch": "jest --config jest.config.cjs --watch"
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.6.1",
-    "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.3",
@@ -35,8 +37,8 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
     "lucide-react": "^0.447.0",
-    "prismjs": "^1.29.0",
     "pkce-challenge": "^4.1.0",
+    "prismjs": "^1.30.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-simple-code-editor": "^0.14.1",
@@ -48,18 +50,25 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@types/jest": "^29.5.14",
     "@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",
+    "co": "^4.6.0",
     "eslint": "^9.11.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.13",
+    "ts-jest": "^29.2.6",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.7.0",
     "vite": "^5.4.8"

client/src/App.tsx

@@ -15,6 +15,7 @@ import {
   Root,
   ServerNotification,
   Tool,
+  LoggingLevel,
 } from "@modelcontextprotocol/sdk/types.js";
 import React, { Suspense, useEffect, useRef, useState } from "react";
 import { useConnection } from "./lib/hooks/useConnection";
@@ -47,7 +48,7 @@ import ToolsTab from "./components/ToolsTab";
 
 const params = new URLSearchParams(window.location.search);
 const PROXY_PORT = params.get("proxyPort") ?? "3000";
-const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`;
+const PROXY_SERVER_URL = `http://${window.location.hostname}:${PROXY_PORT}`;
 
 const App = () => {
   // Handle OAuth callback route
@@ -91,6 +92,7 @@ const App = () => {
       (localStorage.getItem("lastTransportType") as "stdio" | "sse") || "stdio"
     );
   });
+  const [logLevel, setLogLevel] = useState<LoggingLevel>("debug");
   const [notifications, setNotifications] = useState<ServerNotification[]>([]);
   const [stdErrNotifications, setStdErrNotifications] = useState<
     StdErrNotification[]
@@ -412,6 +414,17 @@ const App = () => {
     await sendNotification({ method: "notifications/roots/list_changed" });
   };
 
+  const sendLogLevelRequest = async (level: LoggingLevel) => {
+    await makeRequest(
+      {
+        method: "logging/setLevel" as const,
+        params: { level },
+      },
+      z.object({}),
+    );
+    setLogLevel(level);
+  };
+
   return (
     <div className="flex h-screen bg-background">
       <Sidebar
@@ -430,6 +443,9 @@ const App = () => {
         setBearerToken={setBearerToken}
         onConnect={connectMcpServer}
         stdErrNotifications={stdErrNotifications}
+        logLevel={logLevel}
+        sendLogLevelRequest={sendLogLevelRequest}
+        loggingSupported={!!serverCapabilities?.logging || false}
       />
       <div className="flex-1 flex flex-col overflow-hidden">
         <div className="flex-1 overflow-auto">

client/src/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

client/src/components/DynamicJsonForm.tsx

@@ -1,26 +1,36 @@
-import { useState } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import JsonEditor from "./JsonEditor";
+import { updateValueAtPath, JsonObject } from "@/utils/jsonPathUtils";
+import { generateDefaultValue, formatFieldLabel } from "@/utils/schemaUtils";
 
 export type JsonValue =
   | string
   | number
   | boolean
   | null
+  | undefined
   | JsonValue[]
   | { [key: string]: JsonValue };
 
 export type JsonSchemaType = {
-  type: "string" | "number" | "integer" | "boolean" | "array" | "object";
+  type:
+    | "string"
+    | "number"
+    | "integer"
+    | "boolean"
+    | "array"
+    | "object"
+    | "null";
   description?: string;
+  required?: boolean;
+  default?: JsonValue;
   properties?: Record<string, JsonSchemaType>;
   items?: JsonSchemaType;
 };
 
-type JsonObject = { [key: string]: JsonValue };
-
 interface DynamicJsonFormProps {
   schema: JsonSchemaType;
   value: JsonValue;
@@ -28,13 +38,6 @@ interface DynamicJsonFormProps {
   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,
@@ -43,29 +46,65 @@ const DynamicJsonForm = ({
 }: DynamicJsonFormProps) => {
   const [isJsonMode, setIsJsonMode] = useState(false);
   const [jsonError, setJsonError] = useState<string>();
+  // Store the raw JSON string to allow immediate feedback during typing
+  // while deferring parsing until the user stops typing
+  const [rawJsonValue, setRawJsonValue] = useState<string>(
+    JSON.stringify(value ?? generateDefaultValue(schema), null, 2),
+  );
 
-  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);
-          });
+  // Use a ref to manage debouncing timeouts to avoid parsing JSON
+  // on every keystroke which would be inefficient and error-prone
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+
+  // Debounce JSON parsing and parent updates to handle typing gracefully
+  const debouncedUpdateParent = useCallback(
+    (jsonString: string) => {
+      // Clear any existing timeout
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
       }
-        return obj;
+
+      // Set a new timeout
+      timeoutRef.current = setTimeout(() => {
+        try {
+          const parsed = JSON.parse(jsonString);
+          onChange(parsed);
+          setJsonError(undefined);
+        } catch {
+          // Don't set error during normal typing
         }
-      default:
-        return null;
+      }, 300);
+    },
+    [onChange, setJsonError],
+  );
+
+  // Update rawJsonValue when value prop changes
+  useEffect(() => {
+    if (!isJsonMode) {
+      setRawJsonValue(
+        JSON.stringify(value ?? generateDefaultValue(schema), null, 2),
+      );
+    }
+  }, [value, schema, isJsonMode]);
+
+  const handleSwitchToFormMode = () => {
+    if (isJsonMode) {
+      // When switching to Form mode, ensure we have valid JSON
+      try {
+        const parsed = JSON.parse(rawJsonValue);
+        // Update the parent component's state with the parsed value
+        onChange(parsed);
+        // Switch to form mode
+        setIsJsonMode(false);
+      } catch (err) {
+        setJsonError(err instanceof Error ? err.message : "Invalid JSON");
+      }
+    } else {
+      // Update raw JSON value when switching to JSON mode
+      setRawJsonValue(
+        JSON.stringify(value ?? generateDefaultValue(schema), null, 2),
+      );
+      setIsJsonMode(true);
     }
   };
 
@@ -103,21 +142,68 @@ const DynamicJsonForm = ({
 
     switch (propSchema.type) {
       case "string":
+        return (
+          <Input
+            type="text"
+            value={(currentValue as string) ?? ""}
+            onChange={(e) => {
+              const val = e.target.value;
+              // Allow clearing non-required fields by setting undefined
+              // This preserves the distinction between empty string and unset
+              if (!val && !propSchema.required) {
+                handleFieldChange(path, undefined);
+              } else {
+                handleFieldChange(path, val);
+              }
+            }}
+            placeholder={propSchema.description}
+            required={propSchema.required}
+          />
+        );
       case "number":
+        return (
+          <Input
+            type="number"
+            value={(currentValue as number)?.toString() ?? ""}
+            onChange={(e) => {
+              const val = e.target.value;
+              // Allow clearing non-required number fields
+              // This preserves the distinction between 0 and unset
+              if (!val && !propSchema.required) {
+                handleFieldChange(path, undefined);
+              } else {
+                const num = Number(val);
+                if (!isNaN(num)) {
+                  handleFieldChange(path, num);
+                }
+              }
+            }}
+            placeholder={propSchema.description}
+            required={propSchema.required}
+          />
+        );
       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),
-              )
+            type="number"
+            step="1"
+            value={(currentValue as number)?.toString() ?? ""}
+            onChange={(e) => {
+              const val = e.target.value;
+              // Allow clearing non-required integer fields
+              // This preserves the distinction between 0 and unset
+              if (!val && !propSchema.required) {
+                handleFieldChange(path, undefined);
+              } else {
+                const num = Number(val);
+                // Only update if it's a valid integer
+                if (!isNaN(num) && Number.isInteger(num)) {
+                  handleFieldChange(path, num);
                 }
+              }
+            }}
             placeholder={propSchema.description}
+            required={propSchema.required}
           />
         );
       case "boolean":
@@ -127,10 +213,15 @@ const DynamicJsonForm = ({
             checked={(currentValue as boolean) ?? false}
             onChange={(e) => handleFieldChange(path, e.target.checked)}
             className="w-4 h-4"
+            required={propSchema.required}
           />
         );
-      case "object":
-        if (!propSchema.properties) return null;
+      case "object": {
+        // Handle case where we have a value but no schema properties
+        const objectValue = (currentValue as JsonObject) || {};
+
+        // If we have schema properties, use them to render fields
+        if (propSchema.properties) {
           return (
             <div className="space-y-4 border rounded-md p-4">
               {Object.entries(propSchema.properties).map(([key, prop]) => (
@@ -138,7 +229,7 @@ const DynamicJsonForm = ({
                   <Label>{formatFieldLabel(key)}</Label>
                   {renderFormFields(
                     prop,
-                  (currentValue as JsonObject)?.[key],
+                    objectValue[key],
                     [...path, key],
                     depth + 1,
                   )}
@@ -146,6 +237,29 @@ const DynamicJsonForm = ({
               ))}
             </div>
           );
+        }
+        // If we have a value but no schema properties, render fields based on the value
+        else if (Object.keys(objectValue).length > 0) {
+          return (
+            <div className="space-y-4 border rounded-md p-4">
+              {Object.entries(objectValue).map(([key, value]) => (
+                <div key={key} className="space-y-2">
+                  <Label>{formatFieldLabel(key)}</Label>
+                  <Input
+                    type="text"
+                    value={String(value)}
+                    onChange={(e) =>
+                      handleFieldChange([...path, key], e.target.value)
+                    }
+                  />
+                </div>
+              ))}
+            </div>
+          );
+        }
+        // If we have neither schema properties nor value, return null
+        return null;
+      }
       case "array": {
         const arrayValue = Array.isArray(currentValue) ? currentValue : [];
         if (!propSchema.items) return null;
@@ -187,9 +301,12 @@ const DynamicJsonForm = ({
                 variant="outline"
                 size="sm"
                 onClick={() => {
+                  const defaultValue = generateDefaultValue(
+                    propSchema.items as JsonSchemaType,
+                  );
                   handleFieldChange(path, [
                     ...arrayValue,
-                    generateDefaultValue(propSchema.items as JsonSchemaType),
+                    defaultValue ?? null,
                   ]);
                 }}
                 title={
@@ -215,139 +332,65 @@ const DynamicJsonForm = ({
       return;
     }
 
-    const updateArray = (
-      array: JsonValue[],
-      path: string[],
-      value: JsonValue,
-    ): JsonValue[] => {
-      const [index, ...restPath] = path;
-      const arrayIndex = Number(index);
-
-      // Validate array index
-      if (isNaN(arrayIndex)) {
-        console.error(`Invalid array index: ${index}`);
-        return array;
-      }
-
-      // Check array bounds
-      if (arrayIndex < 0) {
-        console.error(`Array index out of bounds: ${arrayIndex} < 0`);
-        return array;
-      }
-
-      const newArray = [...array];
-
-      if (restPath.length === 0) {
-        newArray[arrayIndex] = value;
-      } else {
-        // Ensure index position exists
-        if (arrayIndex >= array.length) {
-          console.warn(`Extending array to index ${arrayIndex}`);
-          newArray.length = arrayIndex + 1;
-          newArray.fill(null, array.length, arrayIndex);
-        }
-        newArray[arrayIndex] = updateValue(
-          newArray[arrayIndex],
-          restPath,
-          value,
-        );
-      }
-      return newArray;
-    };
-
-    const updateObject = (
-      obj: JsonObject,
-      path: string[],
-      value: JsonValue,
-    ): JsonObject => {
-      const [key, ...restPath] = path;
-
-      // Validate object key
-      if (typeof key !== "string") {
-        console.error(`Invalid object key: ${key}`);
-        return obj;
-      }
-
-      const newObj = { ...obj };
-
-      if (restPath.length === 0) {
-        newObj[key] = value;
-      } else {
-        // Ensure key exists
-        if (!(key in newObj)) {
-          console.warn(`Creating new key in object: ${key}`);
-          newObj[key] = {};
-        }
-        newObj[key] = updateValue(newObj[key], restPath, value);
-      }
-      return newObj;
-    };
-
-    const updateValue = (
-      current: JsonValue,
-      path: string[],
-      value: JsonValue,
-    ): JsonValue => {
-      if (path.length === 0) return value;
-
     try {
-        if (!current) {
-          current = !isNaN(Number(path[0])) ? [] : {};
-        }
-
-        // Type checking
-        if (Array.isArray(current)) {
-          return updateArray(current, path, value);
-        } else if (typeof current === "object" && current !== null) {
-          return updateObject(current, path, value);
-        } else {
-          console.error(
-            `Cannot update path ${path.join(".")} in non-object/array value:`,
-            current,
-          );
-          return current;
-        }
-      } catch (error) {
-        console.error(`Error updating value at path ${path.join(".")}:`, error);
-        return current;
-      }
-    };
-
-    try {
-      const newValue = updateValue(value, path, fieldValue);
+      const newValue = updateValueAtPath(value, path, fieldValue);
       onChange(newValue);
     } catch (error) {
       console.error("Failed to update form value:", error);
-      // Keep the original value unchanged
       onChange(value);
     }
   };
 
+  const shouldUseJsonMode =
+    schema.type === "object" &&
+    (!schema.properties || Object.keys(schema.properties).length === 0);
+
+  useEffect(() => {
+    if (shouldUseJsonMode && !isJsonMode) {
+      setIsJsonMode(true);
+    }
+  }, [shouldUseJsonMode, isJsonMode]);
+
   return (
     <div className="space-y-4">
       <div className="flex justify-end">
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => setIsJsonMode(!isJsonMode)}
-        >
+        <Button variant="outline" size="sm" onClick={handleSwitchToFormMode}>
           {isJsonMode ? "Switch to Form" : "Switch to JSON"}
         </Button>
       </div>
 
       {isJsonMode ? (
         <JsonEditor
-          value={JSON.stringify(value ?? generateDefaultValue(schema), null, 2)}
+          value={rawJsonValue}
           onChange={(newValue) => {
-            try {
-              onChange(JSON.parse(newValue));
-              setJsonError(undefined);
-            } catch (err) {
-              setJsonError(err instanceof Error ? err.message : "Invalid JSON");
-            }
+            // Always update local state
+            setRawJsonValue(newValue);
+
+            // Use the debounced function to attempt parsing and updating parent
+            debouncedUpdateParent(newValue);
           }}
           error={jsonError}
         />
+      ) : // If schema type is object but value is not an object or is empty, and we have actual JSON data,
+      // render a simple representation of the JSON data
+      schema.type === "object" &&
+        (typeof value !== "object" ||
+          value === null ||
+          Object.keys(value).length === 0) &&
+        rawJsonValue &&
+        rawJsonValue !== "{}" ? (
+        <div className="space-y-4 border rounded-md p-4">
+          <p className="text-sm text-gray-500">
+            Form view not available for this JSON structure. Using simplified
+            view:
+          </p>
+          <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto">
+            {rawJsonValue}
+          </pre>
+          <p className="text-sm text-gray-500">
+            Use JSON mode for full editing capabilities.
+          </p>
+        </div>
       ) : (
         renderFormFields(schema, value)
       )}

client/src/components/JsonEditor.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from "react";
 import Editor from "react-simple-code-editor";
 import Prism from "prismjs";
 import "prismjs/components/prism-json";
@@ -10,7 +11,20 @@ interface JsonEditorProps {
   error?: string;
 }
 
-const JsonEditor = ({ value, onChange, error }: JsonEditorProps) => {
+const JsonEditor = ({
+  value,
+  onChange,
+  error: externalError,
+}: JsonEditorProps) => {
+  const [editorContent, setEditorContent] = useState(value);
+  const [internalError, setInternalError] = useState<string | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    setEditorContent(value);
+  }, [value]);
+
   const formatJson = (json: string): string => {
     try {
       return JSON.stringify(JSON.parse(json), null, 2);
@@ -19,25 +33,42 @@ const JsonEditor = ({ value, onChange, error }: JsonEditorProps) => {
     }
   };
 
+  const handleEditorChange = (newContent: string) => {
+    setEditorContent(newContent);
+    setInternalError(undefined);
+    onChange(newContent);
+  };
+
+  const handleFormatJson = () => {
+    try {
+      const formatted = formatJson(editorContent);
+      setEditorContent(formatted);
+      onChange(formatted);
+      setInternalError(undefined);
+    } catch (err) {
+      setInternalError(err instanceof Error ? err.message : "Invalid JSON");
+    }
+  };
+
+  const displayError = internalError || externalError;
+
   return (
     <div className="relative space-y-2">
       <div className="flex justify-end">
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => onChange(formatJson(value))}
-        >
+        <Button variant="outline" size="sm" onClick={handleFormatJson}>
           Format JSON
         </Button>
       </div>
       <div
         className={`border rounded-md ${
-          error ? "border-red-500" : "border-gray-200 dark:border-gray-800"
+          displayError
+            ? "border-red-500"
+            : "border-gray-200 dark:border-gray-800"
         }`}
       >
         <Editor
-          value={value}
-          onValueChange={onChange}
+          value={editorContent}
+          onValueChange={handleEditorChange}
           highlight={(code) =>
             Prism.highlight(code, Prism.languages.json, "json")
           }
@@ -51,7 +82,9 @@ const JsonEditor = ({ value, onChange, error }: JsonEditorProps) => {
           className="w-full"
         />
       </div>
-      {error && <p className="text-sm text-red-500 mt-1">{error}</p>}
+      {displayError && (
+        <p className="text-sm text-red-500 mt-1">{displayError}</p>
+      )}
     </div>
   );
 };

client/src/components/Sidebar.tsx

@@ -19,6 +19,10 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { StdErrNotification } from "@/lib/notificationTypes";
+import {
+  LoggingLevel,
+  LoggingLevelSchema,
+} from "@modelcontextprotocol/sdk/types.js";
 
 import useTheme from "../lib/useTheme";
 import { version } from "../../../package.json";
@@ -39,6 +43,9 @@ interface SidebarProps {
   setBearerToken: (token: string) => void;
   onConnect: () => void;
   stdErrNotifications: StdErrNotification[];
+  logLevel: LoggingLevel;
+  sendLogLevelRequest: (level: LoggingLevel) => void;
+  loggingSupported: boolean;
 }
 
 const Sidebar = ({
@@ -57,6 +64,9 @@ const Sidebar = ({
   setBearerToken,
   onConnect,
   stdErrNotifications,
+  logLevel,
+  sendLogLevelRequest,
+  loggingSupported,
 }: SidebarProps) => {
   const [theme, setTheme] = useTheme();
   const [showEnvVars, setShowEnvVars] = useState(false);
@@ -177,9 +187,17 @@ const Sidebar = ({
                           value={key}
                           onChange={(e) => {
                             const newKey = e.target.value;
-                            const newEnv = { ...env };
-                            delete newEnv[key];
-                            newEnv[newKey] = value;
+                            const newEnv = Object.entries(env).reduce(
+                              (acc, [k, v]) => {
+                                if (k === key) {
+                                  acc[newKey] = value;
+                                } else {
+                                  acc[k] = v;
+                                }
+                                return acc;
+                              },
+                              {} as Record<string, string>,
+                            );
                             setEnv(newEnv);
                             setShownEnvVars((prev) => {
                               const next = new Set(prev);
@@ -290,6 +308,28 @@ const Sidebar = ({
                     : "Disconnected"}
               </span>
             </div>
+
+            {loggingSupported && connectionStatus === "connected" && (
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Logging Level</label>
+                <Select
+                  value={logLevel}
+                  onValueChange={(value: LoggingLevel) =>
+                    sendLogLevelRequest(value)
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select logging level" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {Object.values(LoggingLevelSchema.enum).map((level) => (
+                      <SelectItem value={level}>{level}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+
             {stdErrNotifications.length > 0 && (
               <>
                 <div className="mt-4 border-t border-gray-200 pt-4">

client/src/components/ToolsTab.tsx

@@ -6,16 +6,17 @@ 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 { generateDefaultValue } from "@/utils/schemaUtils";
 import {
+  CallToolResultSchema,
+  CompatibilityCallToolResult,
   ListToolsResult,
   Tool,
-  CallToolResultSchema,
 } from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle, Send } from "lucide-react";
 import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
-
-import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js";
+import { escapeUnicode } from "@/utils/escapeUnicode";
 
 const ToolsTab = ({
   tools,
@@ -53,7 +54,7 @@ const ToolsTab = ({
           <>
             <h4 className="font-semibold mb-2">Invalid Tool Result:</h4>
             <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64">
-              {JSON.stringify(toolResult, null, 2)}
+              {escapeUnicode(toolResult)}
             </pre>
             <h4 className="font-semibold mb-2">Errors:</h4>
             {parsedResult.error.errors.map((error, idx) => (
@@ -61,7 +62,7 @@ const ToolsTab = ({
                 key={idx}
                 className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64"
               >
-                {JSON.stringify(error, null, 2)}
+                {escapeUnicode(error)}
               </pre>
             ))}
           </>
@@ -100,7 +101,7 @@ const ToolsTab = ({
                   </audio>
                 ) : (
                   <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words p-4 rounded text-sm overflow-auto max-h-64">
-                    {JSON.stringify(item.resource, null, 2)}
+                    {escapeUnicode(item.resource)}
                   </pre>
                 ))}
             </div>
@@ -112,7 +113,7 @@ const ToolsTab = ({
         <>
           <h4 className="font-semibold mb-2">Tool Result (Legacy):</h4>
           <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64">
-            {JSON.stringify(toolResult.toolResult, null, 2)}
+            {escapeUnicode(toolResult.toolResult)}
           </pre>
         </>
       );
@@ -214,7 +215,10 @@ const ToolsTab = ({
                               description: prop.description,
                               items: prop.items,
                             }}
-                            value={(params[key] as JsonValue) ?? {}}
+                            value={
+                              (params[key] as JsonValue) ??
+                              generateDefaultValue(prop)
+                            }
                             onChange={(newValue: JsonValue) => {
                               setParams({
                                 ...params,
@@ -229,6 +233,7 @@ const ToolsTab = ({
                           id={key}
                           name={key}
                           placeholder={prop.description}
+                          value={(params[key] as string) ?? ""}
                           onChange={(e) =>
                             setParams({
                               ...params,

client/src/components/__tests__/DynamicJsonForm.test.tsx

@@ -0,0 +1,95 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, jest } from "@jest/globals";
+import DynamicJsonForm from "../DynamicJsonForm";
+import type { JsonSchemaType } from "../DynamicJsonForm";
+
+describe("DynamicJsonForm String Fields", () => {
+  const renderForm = (props = {}) => {
+    const defaultProps = {
+      schema: {
+        type: "string" as const,
+        description: "Test string field",
+      } satisfies JsonSchemaType,
+      value: undefined,
+      onChange: jest.fn(),
+    };
+    return render(<DynamicJsonForm {...defaultProps} {...props} />);
+  };
+
+  describe("Type Validation", () => {
+    it("should handle numeric input as string type", () => {
+      const onChange = jest.fn();
+      renderForm({ onChange });
+
+      const input = screen.getByRole("textbox");
+      fireEvent.change(input, { target: { value: "123321" } });
+
+      expect(onChange).toHaveBeenCalledWith("123321");
+      // Verify the value is a string, not a number
+      expect(typeof onChange.mock.calls[0][0]).toBe("string");
+    });
+
+    it("should render as text input, not number input", () => {
+      renderForm();
+      const input = screen.getByRole("textbox");
+      expect(input).toHaveProperty("type", "text");
+    });
+  });
+});
+
+describe("DynamicJsonForm Integer Fields", () => {
+  const renderForm = (props = {}) => {
+    const defaultProps = {
+      schema: {
+        type: "integer" as const,
+        description: "Test integer field",
+      } satisfies JsonSchemaType,
+      value: undefined,
+      onChange: jest.fn(),
+    };
+    return render(<DynamicJsonForm {...defaultProps} {...props} />);
+  };
+
+  describe("Basic Operations", () => {
+    it("should render number input with step=1", () => {
+      renderForm();
+      const input = screen.getByRole("spinbutton");
+      expect(input).toHaveProperty("type", "number");
+      expect(input).toHaveProperty("step", "1");
+    });
+
+    it("should pass integer values to onChange", () => {
+      const onChange = jest.fn();
+      renderForm({ onChange });
+
+      const input = screen.getByRole("spinbutton");
+      fireEvent.change(input, { target: { value: "42" } });
+
+      expect(onChange).toHaveBeenCalledWith(42);
+      // Verify the value is a number, not a string
+      expect(typeof onChange.mock.calls[0][0]).toBe("number");
+    });
+
+    it("should not pass string values to onChange", () => {
+      const onChange = jest.fn();
+      renderForm({ onChange });
+
+      const input = screen.getByRole("spinbutton");
+      fireEvent.change(input, { target: { value: "abc" } });
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle non-numeric input by not calling onChange", () => {
+      const onChange = jest.fn();
+      renderForm({ onChange });
+
+      const input = screen.getByRole("spinbutton");
+      fireEvent.change(input, { target: { value: "abc" } });
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+});

client/src/components/__tests__/Sidebar.test.tsx

@@ -0,0 +1,307 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, beforeEach, jest } from "@jest/globals";
+import Sidebar from "../Sidebar";
+
+// Mock theme hook
+jest.mock("../../lib/useTheme", () => ({
+  __esModule: true,
+  default: () => ["light", jest.fn()],
+}));
+
+describe("Sidebar Environment Variables", () => {
+  const defaultProps = {
+    connectionStatus: "disconnected" as const,
+    transportType: "stdio" as const,
+    setTransportType: jest.fn(),
+    command: "",
+    setCommand: jest.fn(),
+    args: "",
+    setArgs: jest.fn(),
+    sseUrl: "",
+    setSseUrl: jest.fn(),
+    env: {},
+    setEnv: jest.fn(),
+    bearerToken: "",
+    setBearerToken: jest.fn(),
+    onConnect: jest.fn(),
+    stdErrNotifications: [],
+    logLevel: "info" as const,
+    sendLogLevelRequest: jest.fn(),
+    loggingSupported: true,
+  };
+
+  const renderSidebar = (props = {}) => {
+    return render(<Sidebar {...defaultProps} {...props} />);
+  };
+
+  const openEnvVarsSection = () => {
+    const button = screen.getByText("Environment Variables");
+    fireEvent.click(button);
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Basic Operations", () => {
+    it("should add a new environment variable", () => {
+      const setEnv = jest.fn();
+      renderSidebar({ env: {}, setEnv });
+
+      openEnvVarsSection();
+
+      const addButton = screen.getByText("Add Environment Variable");
+      fireEvent.click(addButton);
+
+      expect(setEnv).toHaveBeenCalledWith({ "": "" });
+    });
+
+    it("should remove an environment variable", () => {
+      const setEnv = jest.fn();
+      const initialEnv = { TEST_KEY: "test_value" };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      const removeButton = screen.getByRole("button", { name: "×" });
+      fireEvent.click(removeButton);
+
+      expect(setEnv).toHaveBeenCalledWith({});
+    });
+
+    it("should update environment variable value", () => {
+      const setEnv = jest.fn();
+      const initialEnv = { TEST_KEY: "test_value" };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      const valueInput = screen.getByDisplayValue("test_value");
+      fireEvent.change(valueInput, { target: { value: "new_value" } });
+
+      expect(setEnv).toHaveBeenCalledWith({ TEST_KEY: "new_value" });
+    });
+
+    it("should toggle value visibility", () => {
+      const initialEnv = { TEST_KEY: "test_value" };
+      renderSidebar({ env: initialEnv });
+
+      openEnvVarsSection();
+
+      const valueInput = screen.getByDisplayValue("test_value");
+      expect(valueInput).toHaveProperty("type", "password");
+
+      const toggleButton = screen.getByRole("button", { name: /show value/i });
+      fireEvent.click(toggleButton);
+
+      expect(valueInput).toHaveProperty("type", "text");
+    });
+  });
+
+  describe("Key Editing", () => {
+    it("should maintain order when editing first key", () => {
+      const setEnv = jest.fn();
+      const initialEnv = {
+        FIRST_KEY: "first_value",
+        SECOND_KEY: "second_value",
+        THIRD_KEY: "third_value",
+      };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      const firstKeyInput = screen.getByDisplayValue("FIRST_KEY");
+      fireEvent.change(firstKeyInput, { target: { value: "NEW_FIRST_KEY" } });
+
+      expect(setEnv).toHaveBeenCalledWith({
+        NEW_FIRST_KEY: "first_value",
+        SECOND_KEY: "second_value",
+        THIRD_KEY: "third_value",
+      });
+    });
+
+    it("should maintain order when editing middle key", () => {
+      const setEnv = jest.fn();
+      const initialEnv = {
+        FIRST_KEY: "first_value",
+        SECOND_KEY: "second_value",
+        THIRD_KEY: "third_value",
+      };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      const middleKeyInput = screen.getByDisplayValue("SECOND_KEY");
+      fireEvent.change(middleKeyInput, { target: { value: "NEW_SECOND_KEY" } });
+
+      expect(setEnv).toHaveBeenCalledWith({
+        FIRST_KEY: "first_value",
+        NEW_SECOND_KEY: "second_value",
+        THIRD_KEY: "third_value",
+      });
+    });
+
+    it("should maintain order when editing last key", () => {
+      const setEnv = jest.fn();
+      const initialEnv = {
+        FIRST_KEY: "first_value",
+        SECOND_KEY: "second_value",
+        THIRD_KEY: "third_value",
+      };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      const lastKeyInput = screen.getByDisplayValue("THIRD_KEY");
+      fireEvent.change(lastKeyInput, { target: { value: "NEW_THIRD_KEY" } });
+
+      expect(setEnv).toHaveBeenCalledWith({
+        FIRST_KEY: "first_value",
+        SECOND_KEY: "second_value",
+        NEW_THIRD_KEY: "third_value",
+      });
+    });
+
+    it("should maintain order during key editing", () => {
+      const setEnv = jest.fn();
+      const initialEnv = {
+        KEY1: "value1",
+        KEY2: "value2",
+      };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      // Type "NEW_" one character at a time
+      const key1Input = screen.getByDisplayValue("KEY1");
+      "NEW_".split("").forEach((char) => {
+        fireEvent.change(key1Input, {
+          target: { value: char + "KEY1".slice(1) },
+        });
+      });
+
+      // Verify the last setEnv call maintains the order
+      const lastCall = setEnv.mock.calls[
+        setEnv.mock.calls.length - 1
+      ][0] as Record<string, string>;
+      const entries = Object.entries(lastCall);
+
+      // The values should stay with their original keys
+      expect(entries[0][1]).toBe("value1"); // First entry should still have value1
+      expect(entries[1][1]).toBe("value2"); // Second entry should still have value2
+    });
+  });
+
+  describe("Multiple Operations", () => {
+    it("should maintain state after multiple key edits", () => {
+      const setEnv = jest.fn();
+      const initialEnv = {
+        FIRST_KEY: "first_value",
+        SECOND_KEY: "second_value",
+      };
+      const { rerender } = renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      // First key edit
+      const firstKeyInput = screen.getByDisplayValue("FIRST_KEY");
+      fireEvent.change(firstKeyInput, { target: { value: "NEW_FIRST_KEY" } });
+
+      // Get the updated env from the first setEnv call
+      const updatedEnv = setEnv.mock.calls[0][0] as Record<string, string>;
+
+      // Rerender with the updated env
+      rerender(<Sidebar {...defaultProps} env={updatedEnv} setEnv={setEnv} />);
+
+      // Second key edit
+      const secondKeyInput = screen.getByDisplayValue("SECOND_KEY");
+      fireEvent.change(secondKeyInput, { target: { value: "NEW_SECOND_KEY" } });
+
+      // Verify the final state matches what we expect
+      expect(setEnv).toHaveBeenLastCalledWith({
+        NEW_FIRST_KEY: "first_value",
+        NEW_SECOND_KEY: "second_value",
+      });
+    });
+
+    it("should maintain visibility state after key edit", () => {
+      const initialEnv = { TEST_KEY: "test_value" };
+      const { rerender } = renderSidebar({ env: initialEnv });
+
+      openEnvVarsSection();
+
+      // Show the value
+      const toggleButton = screen.getByRole("button", { name: /show value/i });
+      fireEvent.click(toggleButton);
+
+      const valueInput = screen.getByDisplayValue("test_value");
+      expect(valueInput).toHaveProperty("type", "text");
+
+      // Edit the key
+      const keyInput = screen.getByDisplayValue("TEST_KEY");
+      fireEvent.change(keyInput, { target: { value: "NEW_KEY" } });
+
+      // Rerender with updated env
+      rerender(<Sidebar {...defaultProps} env={{ NEW_KEY: "test_value" }} />);
+
+      // Value should still be visible
+      const updatedValueInput = screen.getByDisplayValue("test_value");
+      expect(updatedValueInput).toHaveProperty("type", "text");
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle empty key", () => {
+      const setEnv = jest.fn();
+      const initialEnv = { TEST_KEY: "test_value" };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      const keyInput = screen.getByDisplayValue("TEST_KEY");
+      fireEvent.change(keyInput, { target: { value: "" } });
+
+      expect(setEnv).toHaveBeenCalledWith({ "": "test_value" });
+    });
+
+    it("should handle special characters in key", () => {
+      const setEnv = jest.fn();
+      const initialEnv = { TEST_KEY: "test_value" };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      const keyInput = screen.getByDisplayValue("TEST_KEY");
+      fireEvent.change(keyInput, { target: { value: "TEST-KEY@123" } });
+
+      expect(setEnv).toHaveBeenCalledWith({ "TEST-KEY@123": "test_value" });
+    });
+
+    it("should handle unicode characters", () => {
+      const setEnv = jest.fn();
+      const initialEnv = { TEST_KEY: "test_value" };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      const keyInput = screen.getByDisplayValue("TEST_KEY");
+      fireEvent.change(keyInput, { target: { value: "TEST_🔑" } });
+
+      expect(setEnv).toHaveBeenCalledWith({ "TEST_🔑": "test_value" });
+    });
+
+    it("should handle very long key names", () => {
+      const setEnv = jest.fn();
+      const initialEnv = { TEST_KEY: "test_value" };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      const keyInput = screen.getByDisplayValue("TEST_KEY");
+      const longKey = "A".repeat(100);
+      fireEvent.change(keyInput, { target: { value: longKey } });
+
+      expect(setEnv).toHaveBeenCalledWith({ [longKey]: "test_value" });
+    });
+  });
+});

client/src/components/__tests__/ToolsTab.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, jest } from "@jest/globals";
+import ToolsTab from "../ToolsTab";
+import { Tool } from "@modelcontextprotocol/sdk/types.js";
+import { Tabs } from "@/components/ui/tabs";
+
+describe("ToolsTab", () => {
+  const mockTools: Tool[] = [
+    {
+      name: "tool1",
+      description: "First tool",
+      inputSchema: {
+        type: "object" as const,
+        properties: {
+          num: { type: "number" as const },
+        },
+      },
+    },
+    {
+      name: "tool2",
+      description: "Second tool",
+      inputSchema: {
+        type: "object" as const,
+        properties: {
+          num: { type: "number" as const },
+        },
+      },
+    },
+  ];
+
+  const defaultProps = {
+    tools: mockTools,
+    listTools: jest.fn(),
+    clearTools: jest.fn(),
+    callTool: jest.fn(),
+    selectedTool: null,
+    setSelectedTool: jest.fn(),
+    toolResult: null,
+    nextCursor: "",
+    error: null,
+  };
+
+  const renderToolsTab = (props = {}) => {
+    return render(
+      <Tabs defaultValue="tools">
+        <ToolsTab {...defaultProps} {...props} />
+      </Tabs>,
+    );
+  };
+
+  it("should reset input values when switching tools", () => {
+    const { rerender } = renderToolsTab({
+      selectedTool: mockTools[0],
+    });
+
+    // Enter a value in the first tool's input
+    const input = screen.getByRole("spinbutton") as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "42" } });
+    expect(input.value).toBe("42");
+
+    // Switch to second tool
+    rerender(
+      <Tabs defaultValue="tools">
+        <ToolsTab {...defaultProps} selectedTool={mockTools[1]} />
+      </Tabs>,
+    );
+
+    // Verify input is reset
+    const newInput = screen.getByRole("spinbutton") as HTMLInputElement;
+    expect(newInput.value).toBe("");
+  });
+});

client/src/utils/__tests__/escapeUnicode.test.ts

@@ -0,0 +1,27 @@
+import { escapeUnicode } from "../escapeUnicode";
+
+describe("escapeUnicode", () => {
+  it("should escape Unicode characters in a string", () => {
+    const input = { text: "你好世界" };
+    const expected = '{\n  "text": "\\\\u4f60\\\\u597d\\\\u4e16\\\\u754c"\n}';
+    expect(escapeUnicode(input)).toBe(expected);
+  });
+
+  it("should handle empty strings", () => {
+    const input = { text: "" };
+    const expected = '{\n  "text": ""\n}';
+    expect(escapeUnicode(input)).toBe(expected);
+  });
+
+  it("should handle null and undefined values", () => {
+    const input = { text: null, value: undefined };
+    const expected = '{\n  "text": null\n}';
+    expect(escapeUnicode(input)).toBe(expected);
+  });
+
+  it("should handle numbers and booleans", () => {
+    const input = { number: 123, boolean: true };
+    const expected = '{\n  "number": 123,\n  "boolean": true\n}';
+    expect(escapeUnicode(input)).toBe(expected);
+  });
+});

client/src/utils/__tests__/jsonPathUtils.test.ts

@@ -0,0 +1,180 @@
+import { updateValueAtPath, getValueAtPath } from "../jsonPathUtils";
+import { JsonValue } from "../../components/DynamicJsonForm";
+
+describe("updateValueAtPath", () => {
+  // Basic functionality tests
+  test("returns the new value when path is empty", () => {
+    expect(updateValueAtPath({ foo: "bar" }, [], "newValue")).toBe("newValue");
+  });
+
+  test("initializes an empty object when input is null/undefined and path starts with a string", () => {
+    expect(updateValueAtPath(null as any, ["foo"], "bar")).toEqual({
+      foo: "bar",
+    });
+    expect(updateValueAtPath(undefined as any, ["foo"], "bar")).toEqual({
+      foo: "bar",
+    });
+  });
+
+  test("initializes an empty array when input is null/undefined and path starts with a number", () => {
+    expect(updateValueAtPath(null as any, ["0"], "bar")).toEqual(["bar"]);
+    expect(updateValueAtPath(undefined as any, ["0"], "bar")).toEqual(["bar"]);
+  });
+
+  // Object update tests
+  test("updates a simple object property", () => {
+    const obj = { name: "John", age: 30 };
+    expect(updateValueAtPath(obj, ["age"], 31)).toEqual({
+      name: "John",
+      age: 31,
+    });
+  });
+
+  test("updates a nested object property", () => {
+    const obj = { user: { name: "John", address: { city: "New York" } } };
+    expect(
+      updateValueAtPath(obj, ["user", "address", "city"], "Boston"),
+    ).toEqual({ user: { name: "John", address: { city: "Boston" } } });
+  });
+
+  test("creates missing object properties", () => {
+    const obj = { user: { name: "John" } };
+    expect(
+      updateValueAtPath(obj, ["user", "address", "city"], "Boston"),
+    ).toEqual({ user: { name: "John", address: { city: "Boston" } } });
+  });
+
+  // Array update tests
+  test("updates an array item", () => {
+    const arr = [1, 2, 3, 4];
+    expect(updateValueAtPath(arr, ["2"], 5)).toEqual([1, 2, 5, 4]);
+  });
+
+  test("extends an array when index is out of bounds", () => {
+    const arr = [1, 2, 3];
+    const result = updateValueAtPath(arr, ["5"], "new") as JsonValue[];
+
+    // Check overall array structure
+    expect(result).toEqual([1, 2, 3, null, null, "new"]);
+
+    // Explicitly verify that indices 3 and 4 contain null, not undefined
+    expect(result[3]).toBe(null);
+    expect(result[4]).toBe(null);
+
+    // Verify these aren't "holes" in the array (important distinction)
+    expect(3 in result).toBe(true);
+    expect(4 in result).toBe(true);
+
+    // Verify the array has the correct length
+    expect(result.length).toBe(6);
+
+    // Verify the array doesn't have holes by checking every index exists
+    expect(result.every((_, index: number) => index in result)).toBe(true);
+  });
+
+  test("updates a nested array item", () => {
+    const obj = { users: [{ name: "John" }, { name: "Jane" }] };
+    expect(updateValueAtPath(obj, ["users", "1", "name"], "Janet")).toEqual({
+      users: [{ name: "John" }, { name: "Janet" }],
+    });
+  });
+
+  // Error handling tests
+  test("returns original value when trying to update a primitive with a path", () => {
+    const spy = jest.spyOn(console, "error").mockImplementation();
+    const result = updateValueAtPath("string", ["foo"], "bar");
+    expect(result).toBe("string");
+    expect(spy).toHaveBeenCalled();
+    spy.mockRestore();
+  });
+
+  test("returns original array when index is invalid", () => {
+    const spy = jest.spyOn(console, "error").mockImplementation();
+    const arr = [1, 2, 3];
+    expect(updateValueAtPath(arr, ["invalid"], 4)).toEqual(arr);
+    expect(spy).toHaveBeenCalled();
+    spy.mockRestore();
+  });
+
+  test("returns original array when index is negative", () => {
+    const spy = jest.spyOn(console, "error").mockImplementation();
+    const arr = [1, 2, 3];
+    expect(updateValueAtPath(arr, ["-1"], 4)).toEqual(arr);
+    expect(spy).toHaveBeenCalled();
+    spy.mockRestore();
+  });
+
+  test("handles sparse arrays correctly by filling holes with null", () => {
+    // Create a sparse array by deleting an element
+    const sparseArr = [1, 2, 3];
+    delete sparseArr[1]; // Now sparseArr is [1, <1 empty item>, 3]
+
+    // Update a value beyond the array length
+    const result = updateValueAtPath(sparseArr, ["5"], "new") as JsonValue[];
+
+    // Check overall array structure
+    expect(result).toEqual([1, null, 3, null, null, "new"]);
+
+    // Explicitly verify that index 1 (the hole) contains null, not undefined
+    expect(result[1]).toBe(null);
+
+    // Verify this isn't a hole in the array
+    expect(1 in result).toBe(true);
+
+    // Verify all indices contain null (not undefined)
+    expect(result[1]).not.toBe(undefined);
+    expect(result[3]).toBe(null);
+    expect(result[4]).toBe(null);
+  });
+});
+
+describe("getValueAtPath", () => {
+  test("returns the original value when path is empty", () => {
+    const obj = { foo: "bar" };
+    expect(getValueAtPath(obj, [])).toBe(obj);
+  });
+
+  test("returns the value at a simple path", () => {
+    const obj = { name: "John", age: 30 };
+    expect(getValueAtPath(obj, ["name"])).toBe("John");
+  });
+
+  test("returns the value at a nested path", () => {
+    const obj = { user: { name: "John", address: { city: "New York" } } };
+    expect(getValueAtPath(obj, ["user", "address", "city"])).toBe("New York");
+  });
+
+  test("returns default value when path does not exist", () => {
+    const obj = { user: { name: "John" } };
+    expect(getValueAtPath(obj, ["user", "address", "city"], "Unknown")).toBe(
+      "Unknown",
+    );
+  });
+
+  test("returns default value when input is null/undefined", () => {
+    expect(getValueAtPath(null as any, ["foo"], "default")).toBe("default");
+    expect(getValueAtPath(undefined as any, ["foo"], "default")).toBe(
+      "default",
+    );
+  });
+
+  test("handles array indices correctly", () => {
+    const arr = ["a", "b", "c"];
+    expect(getValueAtPath(arr, ["1"])).toBe("b");
+  });
+
+  test("returns default value for out of bounds array indices", () => {
+    const arr = ["a", "b", "c"];
+    expect(getValueAtPath(arr, ["5"], "default")).toBe("default");
+  });
+
+  test("returns default value for invalid array indices", () => {
+    const arr = ["a", "b", "c"];
+    expect(getValueAtPath(arr, ["invalid"], "default")).toBe("default");
+  });
+
+  test("navigates through mixed object and array paths", () => {
+    const obj = { users: [{ name: "John" }, { name: "Jane" }] };
+    expect(getValueAtPath(obj, ["users", "1", "name"])).toBe("Jane");
+  });
+});

client/src/utils/__tests__/schemaUtils.test.ts

@@ -0,0 +1,139 @@
+import { generateDefaultValue, formatFieldLabel } from "../schemaUtils";
+import { JsonSchemaType } from "../../components/DynamicJsonForm";
+
+describe("generateDefaultValue", () => {
+  test("generates default string", () => {
+    expect(generateDefaultValue({ type: "string", required: true })).toBe("");
+  });
+
+  test("generates default number", () => {
+    expect(generateDefaultValue({ type: "number", required: true })).toBe(0);
+  });
+
+  test("generates default integer", () => {
+    expect(generateDefaultValue({ type: "integer", required: true })).toBe(0);
+  });
+
+  test("generates default boolean", () => {
+    expect(generateDefaultValue({ type: "boolean", required: true })).toBe(
+      false,
+    );
+  });
+
+  test("generates default array", () => {
+    expect(generateDefaultValue({ type: "array", required: true })).toEqual([]);
+  });
+
+  test("generates default empty object", () => {
+    expect(generateDefaultValue({ type: "object", required: true })).toEqual(
+      {},
+    );
+  });
+
+  test("generates default null for unknown types", () => {
+    // @ts-expect-error Testing with invalid type
+    expect(generateDefaultValue({ type: "unknown", required: true })).toBe(
+      null,
+    );
+  });
+
+  test("generates empty array for non-required array", () => {
+    expect(generateDefaultValue({ type: "array", required: false })).toEqual(
+      [],
+    );
+  });
+
+  test("generates empty object for non-required object", () => {
+    expect(generateDefaultValue({ type: "object", required: false })).toEqual(
+      {},
+    );
+  });
+
+  test("generates null for non-required primitive types", () => {
+    expect(generateDefaultValue({ type: "string", required: false })).toBe(
+      null,
+    );
+    expect(generateDefaultValue({ type: "number", required: false })).toBe(
+      null,
+    );
+    expect(generateDefaultValue({ type: "boolean", required: false })).toBe(
+      null,
+    );
+  });
+
+  test("generates object with properties", () => {
+    const schema: JsonSchemaType = {
+      type: "object",
+      required: true,
+      properties: {
+        name: { type: "string", required: true },
+        age: { type: "number", required: true },
+        isActive: { type: "boolean", required: true },
+      },
+    };
+    expect(generateDefaultValue(schema)).toEqual({
+      name: "",
+      age: 0,
+      isActive: false,
+    });
+  });
+
+  test("handles nested objects", () => {
+    const schema: JsonSchemaType = {
+      type: "object",
+      required: true,
+      properties: {
+        user: {
+          type: "object",
+          required: true,
+          properties: {
+            name: { type: "string", required: true },
+            address: {
+              type: "object",
+              required: true,
+              properties: {
+                city: { type: "string", required: true },
+              },
+            },
+          },
+        },
+      },
+    };
+    expect(generateDefaultValue(schema)).toEqual({
+      user: {
+        name: "",
+        address: {
+          city: "",
+        },
+      },
+    });
+  });
+
+  test("uses schema default value when provided", () => {
+    expect(generateDefaultValue({ type: "string", default: "test" })).toBe(
+      "test",
+    );
+  });
+});
+
+describe("formatFieldLabel", () => {
+  test("formats camelCase", () => {
+    expect(formatFieldLabel("firstName")).toBe("First Name");
+  });
+
+  test("formats snake_case", () => {
+    expect(formatFieldLabel("first_name")).toBe("First name");
+  });
+
+  test("formats single word", () => {
+    expect(formatFieldLabel("name")).toBe("Name");
+  });
+
+  test("formats mixed case with underscores", () => {
+    expect(formatFieldLabel("user_firstName")).toBe("User first Name");
+  });
+
+  test("handles empty string", () => {
+    expect(formatFieldLabel("")).toBe("");
+  });
+});

client/src/utils/escapeUnicode.ts

@@ -0,0 +1,16 @@
+// Utility function to escape Unicode characters
+export function escapeUnicode(obj: unknown): string {
+  return JSON.stringify(
+    obj,
+    (_key: string, value) => {
+      if (typeof value === "string") {
+        // Replace non-ASCII characters with their Unicode escape sequences
+        return value.replace(/[^\0-\x7F]/g, (char) => {
+          return "\\u" + ("0000" + char.charCodeAt(0).toString(16)).slice(-4);
+        });
+      }
+      return value;
+    },
+    2,
+  );
+}

client/src/utils/jsonPathUtils.ts

@@ -0,0 +1,149 @@
+import { JsonValue } from "../components/DynamicJsonForm";
+
+export type JsonObject = { [key: string]: JsonValue };
+
+/**
+ * Updates a value at a specific path in a nested JSON structure
+ * @param obj The original JSON value
+ * @param path Array of keys/indices representing the path to the value
+ * @param value The new value to set
+ * @returns A new JSON value with the updated path
+ */
+export function updateValueAtPath(
+  obj: JsonValue,
+  path: string[],
+  value: JsonValue,
+): JsonValue {
+  if (path.length === 0) return value;
+
+  if (obj === null || obj === undefined) {
+    obj = !isNaN(Number(path[0])) ? [] : {};
+  }
+
+  if (Array.isArray(obj)) {
+    return updateArray(obj, path, value);
+  } else if (typeof obj === "object" && obj !== null) {
+    return updateObject(obj as JsonObject, path, value);
+  } else {
+    console.error(
+      `Cannot update path ${path.join(".")} in non-object/array value:`,
+      obj,
+    );
+    return obj;
+  }
+}
+
+/**
+ * Updates an array at a specific path
+ */
+function updateArray(
+  array: JsonValue[],
+  path: string[],
+  value: JsonValue,
+): JsonValue[] {
+  const [index, ...restPath] = path;
+  const arrayIndex = Number(index);
+
+  if (isNaN(arrayIndex)) {
+    console.error(`Invalid array index: ${index}`);
+    return array;
+  }
+
+  if (arrayIndex < 0) {
+    console.error(`Array index out of bounds: ${arrayIndex} < 0`);
+    return array;
+  }
+
+  let newArray: JsonValue[] = [];
+  for (let i = 0; i < array.length; i++) {
+    newArray[i] = i in array ? array[i] : null;
+  }
+
+  if (arrayIndex >= newArray.length) {
+    const extendedArray: JsonValue[] = new Array(arrayIndex).fill(null);
+    // Copy over the existing elements (now guaranteed to be dense)
+    for (let i = 0; i < newArray.length; i++) {
+      extendedArray[i] = newArray[i];
+    }
+    newArray = extendedArray;
+  }
+
+  if (restPath.length === 0) {
+    newArray[arrayIndex] = value;
+  } else {
+    newArray[arrayIndex] = updateValueAtPath(
+      newArray[arrayIndex],
+      restPath,
+      value,
+    );
+  }
+  return newArray;
+}
+
+/**
+ * Updates an object at a specific path
+ */
+function updateObject(
+  obj: JsonObject,
+  path: string[],
+  value: JsonValue,
+): JsonObject {
+  const [key, ...restPath] = path;
+
+  // Validate object key
+  if (typeof key !== "string") {
+    console.error(`Invalid object key: ${key}`);
+    return obj;
+  }
+
+  const newObj = { ...obj };
+
+  if (restPath.length === 0) {
+    newObj[key] = value;
+  } else {
+    // Ensure key exists
+    if (!(key in newObj)) {
+      newObj[key] = {};
+    }
+    newObj[key] = updateValueAtPath(newObj[key], restPath, value);
+  }
+  return newObj;
+}
+
+/**
+ * Gets a value at a specific path in a nested JSON structure
+ * @param obj The JSON value to traverse
+ * @param path Array of keys/indices representing the path to the value
+ * @param defaultValue Value to return if path doesn't exist
+ * @returns The value at the path, or defaultValue if not found
+ */
+export function getValueAtPath(
+  obj: JsonValue,
+  path: string[],
+  defaultValue: JsonValue = null,
+): JsonValue {
+  if (path.length === 0) return obj;
+
+  const [first, ...rest] = path;
+
+  if (obj === null || obj === undefined) {
+    return defaultValue;
+  }
+
+  if (Array.isArray(obj)) {
+    const index = Number(first);
+    if (isNaN(index) || index < 0 || index >= obj.length) {
+      return defaultValue;
+    }
+    return getValueAtPath(obj[index], rest, defaultValue);
+  }
+
+  if (typeof obj === "object" && obj !== null) {
+    if (!(first in obj)) {
+      return defaultValue;
+    }
+    return getValueAtPath((obj as JsonObject)[first], rest, defaultValue);
+  }
+
+  return defaultValue;
+}

client/src/utils/schemaUtils.ts

@@ -0,0 +1,57 @@
+import { JsonValue, JsonSchemaType } from "../components/DynamicJsonForm";
+import { JsonObject } from "./jsonPathUtils";
+
+/**
+ * Generates a default value based on a JSON schema type
+ * @param schema The JSON schema definition
+ * @returns A default value matching the schema type, or null for non-required fields
+ */
+export function generateDefaultValue(schema: JsonSchemaType): JsonValue {
+  if ("default" in schema) {
+    return schema.default;
+  }
+
+  if (!schema.required) {
+    if (schema.type === "array") return [];
+    if (schema.type === "object") return {};
+    return null;
+  }
+
+  switch (schema.type) {
+    case "string":
+      return "";
+    case "number":
+    case "integer":
+      return 0;
+    case "boolean":
+      return false;
+    case "array":
+      return [];
+    case "object": {
+      if (!schema.properties) return {};
+
+      const obj: JsonObject = {};
+      Object.entries(schema.properties)
+        .filter(([, prop]) => prop.required)
+        .forEach(([key, prop]) => {
+          const value = generateDefaultValue(prop);
+          obj[key] = value;
+        });
+      return obj;
+    }
+    default:
+      return null;
+  }
+}
+
+/**
+ * Formats a field key into a human-readable label
+ * @param key The field key to format
+ * @returns A formatted label string
+ */
+export function 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
+}

client/tsconfig.app.json

@@ -24,7 +24,8 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "types": ["jest", "@testing-library/jest-dom", "node"]
   },
   "include": ["src"]
 }

client/tsconfig.jest.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "moduleResolution": "node"
+  },
+  "include": ["src"]
+}

client/vite.config.ts

@@ -5,7 +5,9 @@ import { defineConfig } from "vite";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  server: {},
+  server: {
+    host: true,
+  },
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -34,14 +34,15 @@
     "publish-all": "npm publish --workspaces --access public && npm publish --access public"
   },
   "dependencies": {
-    "@modelcontextprotocol/inspector-client": "^0.6.0",
-    "@modelcontextprotocol/inspector-server": "^0.6.0",
+    "@modelcontextprotocol/inspector-client": "^0.7.0",
+    "@modelcontextprotocol/inspector-server": "^0.7.0",
     "concurrently": "^9.0.1",
     "shell-quote": "^1.8.2",
     "spawn-rx": "^5.1.2",
     "ts-node": "^10.9.2"
   },
   "devDependencies": {
+    "@types/jest": "^29.5.14",
     "@types/node": "^22.7.5",
     "@types/shell-quote": "^1.7.5",
     "prettier": "3.3.3"

server/package.json

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