Merge branch 'main' into patch-1

Author: morinokami

.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 = {};