Merge pull request #162 from modelcontextprotocol/jerome/fix/versioning

Bumped versions of sub packages

CLAUDE.md

@@ -0,0 +1,33 @@
+# MCP Inspector Development Guide
+
+## Build Commands
+
+- Build all: `npm run build`
+- Build client: `npm run build-client`
+- Build server: `npm run build-server`
+- Development mode: `npm run dev` (use `npm run dev:windows` on Windows)
+- Format code: `npm run prettier-fix`
+- Client lint: `cd client && npm run lint`
+
+## Code Style Guidelines
+
+- Use TypeScript with proper type annotations
+- Follow React functional component patterns with hooks
+- Use ES modules (import/export) not CommonJS
+- Use Prettier for formatting (auto-formatted on commit)
+- Follow existing naming conventions:
+  - camelCase for variables and functions
+  - PascalCase for component names and types
+  - kebab-case for file names
+- Use async/await for asynchronous operations
+- Implement proper error handling with try/catch blocks
+- Use Tailwind CSS for styling in the client
+- Keep components small and focused on a single responsibility
+
+## Project Organization
+
+The project is organized as a monorepo with workspaces:
+
+- `client/`: React frontend with Vite, TypeScript and Tailwind
+- `server/`: Express backend with TypeScript
+- `bin/`: CLI scripts

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

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;

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.3.0",
+  "version": "0.5.1",
   "description": "Client-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -18,21 +18,28 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview",
-    "test": "vitest run"
+    "preview": "vite preview"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.0.3",
+    "@modelcontextprotocol/sdk": "^1.6.1",
+    "@radix-ui/react-dialog": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.3",
     "@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",
+    "cmdk": "^1.0.4",
     "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",
@@ -41,8 +48,6 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
     "@types/node": "^22.7.5",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
@@ -53,12 +58,10 @@
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
-    "jsdom": "^26.0.0",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.7.0",
-    "vite": "^5.4.8",
-    "vitest": "^3.0.0"
+    "vite": "^5.4.8"
   }
 }

client/src/App.tsx

@@ -1,5 +1,3 @@
-import { useDraggablePane } from "./lib/hooks/useDraggablePane";
-import { useConnection } from "./lib/hooks/useConnection";
 import {
   ClientRequest,
   CompatibilityCallToolResult,
@@ -10,15 +8,17 @@ import {
   ListPromptsResultSchema,
   ListResourcesResultSchema,
   ListResourceTemplatesResultSchema,
-  ReadResourceResultSchema,
   ListToolsResultSchema,
+  ReadResourceResultSchema,
   Resource,
   ResourceTemplate,
   Root,
   ServerNotification,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
-import { useEffect, useRef, useState } from "react";
+import React, { Suspense, useEffect, useRef, useState } from "react";
+import { useConnection } from "./lib/hooks/useConnection";
+import { useDraggablePane } from "./lib/hooks/useDraggablePane";
 
 import { StdErrNotification } from "./lib/notificationTypes";
 
@@ -32,6 +32,7 @@ import {
   MessageSquare,
 } from "lucide-react";
 
+import { toast } from "react-toastify";
 import { z } from "zod";
 import "./App.css";
 import ConsoleTab from "./components/ConsoleTab";
@@ -49,6 +50,17 @@ const PROXY_PORT = params.get("proxyPort") ?? "3000";
 const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`;
 
 const App = () => {
+  // Handle OAuth callback route
+  if (window.location.pathname === "/oauth/callback") {
+    const OAuthCallback = React.lazy(
+      () => import("./components/OAuthCallback"),
+    );
+    return (
+      <Suspense fallback={<div>Loading...</div>}>
+        <OAuthCallback />
+      </Suspense>
+    );
+  }
   const [resources, setResources] = useState<Resource[]>([]);
   const [resourceTemplates, setResourceTemplates] = useState<
     ResourceTemplate[]
@@ -71,8 +83,14 @@ const App = () => {
     return localStorage.getItem("lastArgs") || "";
   });
 
-  const [sseUrl, setSseUrl] = useState<string>("http://localhost:3001/sse");
-  const [transportType, setTransportType] = useState<"stdio" | "sse">("stdio");
+  const [sseUrl, setSseUrl] = useState<string>(() => {
+    return localStorage.getItem("lastSseUrl") || "http://localhost:3001/sse";
+  });
+  const [transportType, setTransportType] = useState<"stdio" | "sse">(() => {
+    return (
+      (localStorage.getItem("lastTransportType") as "stdio" | "sse") || "stdio"
+    );
+  });
   const [notifications, setNotifications] = useState<ServerNotification[]>([]);
   const [stdErrNotifications, setStdErrNotifications] = useState<
     StdErrNotification[]
@@ -133,6 +151,8 @@ const App = () => {
     requestHistory,
     makeRequest: makeConnectionRequest,
     sendNotification,
+    handleCompletion,
+    completionsSupported,
     connect: connectMcpServer,
   } = useConnection({
     transportType,
@@ -159,29 +179,6 @@ const App = () => {
     getRoots: () => rootsRef.current,
   });
 
-  const makeRequest = async <T extends z.ZodType>(
-    request: ClientRequest,
-    schema: T,
-    tabKey?: keyof typeof errors,
-  ) => {
-    try {
-      const response = await makeConnectionRequest(request, schema);
-      if (tabKey !== undefined) {
-        clearError(tabKey);
-      }
-      return response;
-    } catch (e) {
-      const errorString = (e as Error).message ?? String(e);
-      if (tabKey !== undefined) {
-        setErrors((prev) => ({
-          ...prev,
-          [tabKey]: errorString,
-        }));
-      }
-      throw e;
-    }
-  };
-
   useEffect(() => {
     localStorage.setItem("lastCommand", command);
   }, [command]);
@@ -190,6 +187,31 @@ const App = () => {
     localStorage.setItem("lastArgs", args);
   }, [args]);
 
+  useEffect(() => {
+    localStorage.setItem("lastSseUrl", sseUrl);
+  }, [sseUrl]);
+
+  useEffect(() => {
+    localStorage.setItem("lastTransportType", transportType);
+  }, [transportType]);
+
+  // Auto-connect if serverUrl is provided in URL params (e.g. after OAuth callback)
+  useEffect(() => {
+    const serverUrl = params.get("serverUrl");
+    if (serverUrl) {
+      setSseUrl(serverUrl);
+      setTransportType("sse");
+      // Remove serverUrl from URL without reloading the page
+      const newUrl = new URL(window.location.href);
+      newUrl.searchParams.delete("serverUrl");
+      window.history.replaceState({}, "", newUrl.toString());
+      // Show success toast for OAuth
+      toast.success("Successfully authenticated with OAuth");
+      // Connect to the server
+      connectMcpServer();
+    }
+  }, []);
+
   useEffect(() => {
     fetch(`${PROXY_SERVER_URL}/config`)
       .then((response) => response.json())
@@ -221,6 +243,29 @@ const App = () => {
     setErrors((prev) => ({ ...prev, [tabKey]: null }));
   };
 
+  const makeRequest = async <T extends z.ZodType>(
+    request: ClientRequest,
+    schema: T,
+    tabKey?: keyof typeof errors,
+  ) => {
+    try {
+      const response = await makeConnectionRequest(request, schema);
+      if (tabKey !== undefined) {
+        clearError(tabKey);
+      }
+      return response;
+    } catch (e) {
+      const errorString = (e as Error).message ?? String(e);
+      if (tabKey !== undefined) {
+        setErrors((prev) => ({
+          ...prev,
+          [tabKey]: errorString,
+        }));
+      }
+      throw e;
+    }
+  };
+
   const listResources = async () => {
     const response = await makeRequest(
       {
@@ -440,6 +485,8 @@ const App = () => {
                         clearError("resources");
                         setSelectedResource(resource);
                       }}
+                      handleCompletion={handleCompletion}
+                      completionsSupported={completionsSupported}
                       resourceContent={resourceContent}
                       nextCursor={nextResourceCursor}
                       nextTemplateCursor={nextResourceTemplateCursor}
@@ -464,6 +511,8 @@ const App = () => {
                         clearError("prompts");
                         setSelectedPrompt(prompt);
                       }}
+                      handleCompletion={handleCompletion}
+                      completionsSupported={completionsSupported}
                       promptContent={promptContent}
                       nextCursor={nextPromptCursor}
                       error={errors.prompts}

client/src/components/DynamicJsonForm.tsx

@@ -0,0 +1,358 @@
+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 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);
+      onChange(newValue);
+    } catch (error) {
+      console.error("Failed to update form value:", error);
+      // Keep the original value unchanged
+      onChange(value);
+    }
+  };
+
+  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;

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;

client/src/components/ListPane.test.tsx

@@ -1,59 +0,0 @@
-import { render, screen, fireEvent } from "@testing-library/react";
-import ListPane from "./ListPane";
-import { describe, it, expect, vi } from "vitest";
-
-describe("ListPane", () => {
-  const defaultProps = {
-    items: [
-      { id: 1, name: "Item 1" },
-      { id: 2, name: "Item 2" },
-    ],
-    listItems: vi.fn(),
-    clearItems: vi.fn(),
-    setSelectedItem: vi.fn(),
-    renderItem: (item: { name: string }) => <span>{item.name}</span>,
-    title: "Test List",
-    buttonText: "List Items",
-  };
-
-  it("renders title correctly", () => {
-    render(<ListPane {...defaultProps} />);
-    expect(screen.getByText("Test List")).toBeInTheDocument();
-  });
-
-  it("renders list items using renderItem prop", () => {
-    render(<ListPane {...defaultProps} />);
-    expect(screen.getByText("Item 1")).toBeInTheDocument();
-    expect(screen.getByText("Item 2")).toBeInTheDocument();
-  });
-
-  it("calls listItems when List Items button is clicked", () => {
-    render(<ListPane {...defaultProps} />);
-    fireEvent.click(screen.getByText("List Items"));
-    expect(defaultProps.listItems).toHaveBeenCalledTimes(1);
-  });
-
-  it("calls clearItems when Clear button is clicked", () => {
-    render(<ListPane {...defaultProps} />);
-    fireEvent.click(screen.getByText("Clear"));
-    expect(defaultProps.clearItems).toHaveBeenCalledTimes(1);
-  });
-
-  it("calls setSelectedItem when an item is clicked", () => {
-    render(<ListPane {...defaultProps} />);
-    fireEvent.click(screen.getByText("Item 1"));
-    expect(defaultProps.setSelectedItem).toHaveBeenCalledWith(
-      defaultProps.items[0],
-    );
-  });
-
-  it("disables Clear button when items array is empty", () => {
-    render(<ListPane {...defaultProps} items={[]} />);
-    expect(screen.getByText("Clear")).toBeDisabled();
-  });
-
-  it("respects isButtonDisabled prop for List Items button", () => {
-    render(<ListPane {...defaultProps} isButtonDisabled={true} />);
-    expect(screen.getByText("List Items")).toBeDisabled();
-  });
-});

client/src/components/OAuthCallback.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from "react";
+import { authProvider } from "../lib/auth";
+import { SESSION_KEYS } from "../lib/constants";
+import { auth } from "@modelcontextprotocol/sdk/client/auth.js";
+
+const OAuthCallback = () => {
+  const hasProcessedRef = useRef(false);
+
+  useEffect(() => {
+    const handleCallback = async () => {
+      // Skip if we've already processed this callback
+      if (hasProcessedRef.current) {
+        return;
+      }
+      hasProcessedRef.current = true;
+
+      const params = new URLSearchParams(window.location.search);
+      const code = params.get("code");
+      const serverUrl = sessionStorage.getItem(SESSION_KEYS.SERVER_URL);
+
+      if (!code || !serverUrl) {
+        console.error("Missing code or server URL");
+        window.location.href = "/";
+        return;
+      }
+
+      try {
+        const result = await auth(authProvider, {
+          serverUrl,
+          authorizationCode: code,
+        });
+        if (result !== "AUTHORIZED") {
+          throw new Error(
+            `Expected to be authorized after providing auth code, got: ${result}`,
+          );
+        }
+
+        // Redirect back to the main app with server URL to trigger auto-connect
+        window.location.href = `/?serverUrl=${encodeURIComponent(serverUrl)}`;
+      } catch (error) {
+        console.error("OAuth callback error:", error);
+        window.location.href = "/";
+      }
+    };
+
+    void handleCallback();
+  }, []);
+
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <p className="text-lg text-gray-500">Processing OAuth callback...</p>
+    </div>
+  );
+};
+
+export default OAuthCallback;

client/src/components/PromptsTab.tsx

@@ -1,13 +1,18 @@
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { Combobox } from "@/components/ui/combobox";
 import { Label } from "@/components/ui/label";
 import { TabsContent } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
-import { ListPromptsResult } from "@modelcontextprotocol/sdk/types.js";
+import {
+  ListPromptsResult,
+  PromptReference,
+  ResourceReference,
+} from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
+import { useCompletionState } from "@/lib/hooks/useCompletionState";
 
 export type Prompt = {
   name: string;
@@ -26,6 +31,8 @@ const PromptsTab = ({
   getPrompt,
   selectedPrompt,
   setSelectedPrompt,
+  handleCompletion,
+  completionsSupported,
   promptContent,
   nextCursor,
   error,
@@ -36,14 +43,37 @@ const PromptsTab = ({
   getPrompt: (name: string, args: Record<string, string>) => void;
   selectedPrompt: Prompt | null;
   setSelectedPrompt: (prompt: Prompt) => void;
+  handleCompletion: (
+    ref: PromptReference | ResourceReference,
+    argName: string,
+    value: string,
+  ) => Promise<string[]>;
+  completionsSupported: boolean;
   promptContent: string;
   nextCursor: ListPromptsResult["nextCursor"];
   error: string | null;
 }) => {
   const [promptArgs, setPromptArgs] = useState<Record<string, string>>({});
+  const { completions, clearCompletions, requestCompletions } =
+    useCompletionState(handleCompletion, completionsSupported);
 
-  const handleInputChange = (argName: string, value: string) => {
+  useEffect(() => {
+    clearCompletions();
+  }, [clearCompletions, selectedPrompt]);
+
+  const handleInputChange = async (argName: string, value: string) => {
     setPromptArgs((prev) => ({ ...prev, [argName]: value }));
+
+    if (selectedPrompt) {
+      requestCompletions(
+        {
+          type: "ref/prompt",
+          name: selectedPrompt.name,
+        },
+        argName,
+        value,
+      );
+    }
   };
 
   const handleGetPrompt = () => {
@@ -96,14 +126,17 @@ const PromptsTab = ({
               {selectedPrompt.arguments?.map((arg) => (
                 <div key={arg.name}>
                   <Label htmlFor={arg.name}>{arg.name}</Label>
-                  <Input
+                  <Combobox
                     id={arg.name}
                     placeholder={`Enter ${arg.name}`}
                     value={promptArgs[arg.name] || ""}
-                    onChange={(e) =>
-                      handleInputChange(arg.name, e.target.value)
+                    onChange={(value) => handleInputChange(arg.name, value)}
+                    onInputChange={(value) =>
+                      handleInputChange(arg.name, value)
                     }
+                    options={completions[arg.name] || []}
                   />
+
                   {arg.description && (
                     <p className="text-xs text-gray-500 mt-1">
                       {arg.description}

client/src/components/ResourcesTab.tsx

@@ -1,16 +1,20 @@
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Combobox } from "@/components/ui/combobox";
 import { TabsContent } from "@/components/ui/tabs";
 import {
   ListResourcesResult,
   Resource,
   ResourceTemplate,
   ListResourceTemplatesResult,
+  ResourceReference,
+  PromptReference,
 } from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle, ChevronRight, FileText, RefreshCw } from "lucide-react";
 import ListPane from "./ListPane";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useCompletionState } from "@/lib/hooks/useCompletionState";
 
 const ResourcesTab = ({
   resources,
@@ -22,6 +26,8 @@ const ResourcesTab = ({
   readResource,
   selectedResource,
   setSelectedResource,
+  handleCompletion,
+  completionsSupported,
   resourceContent,
   nextCursor,
   nextTemplateCursor,
@@ -36,6 +42,12 @@ const ResourcesTab = ({
   readResource: (uri: string) => void;
   selectedResource: Resource | null;
   setSelectedResource: (resource: Resource | null) => void;
+  handleCompletion: (
+    ref: ResourceReference | PromptReference,
+    argName: string,
+    value: string,
+  ) => Promise<string[]>;
+  completionsSupported: boolean;
   resourceContent: string;
   nextCursor: ListResourcesResult["nextCursor"];
   nextTemplateCursor: ListResourceTemplatesResult["nextCursor"];
@@ -47,6 +59,13 @@ const ResourcesTab = ({
     {},
   );
 
+  const { completions, clearCompletions, requestCompletions } =
+    useCompletionState(handleCompletion, completionsSupported);
+
+  useEffect(() => {
+    clearCompletions();
+  }, [clearCompletions]);
+
   const fillTemplate = (
     template: string,
     values: Record<string, string>,
@@ -57,6 +76,21 @@ const ResourcesTab = ({
     );
   };
 
+  const handleTemplateValueChange = async (key: string, value: string) => {
+    setTemplateValues((prev) => ({ ...prev, [key]: value }));
+
+    if (selectedTemplate?.uriTemplate) {
+      requestCompletions(
+        {
+          type: "ref/resource",
+          uri: selectedTemplate.uriTemplate,
+        },
+        key,
+        value,
+      );
+    }
+  };
+
   const handleReadTemplateResource = () => {
     if (selectedTemplate) {
       const uri = fillTemplate(selectedTemplate.uriTemplate, templateValues);
@@ -162,22 +196,18 @@ const ResourcesTab = ({
                   const key = param.slice(1, -1);
                   return (
                     <div key={key}>
-                      <label
-                        htmlFor={key}
-                        className="block text-sm font-medium text-gray-700"
-                      >
-                        {key}
-                      </label>
-                      <Input
+                      <Label htmlFor={key}>{key}</Label>
+                      <Combobox
                         id={key}
+                        placeholder={`Enter ${key}`}
                         value={templateValues[key] || ""}
-                        onChange={(e) =>
-                          setTemplateValues({
-                            ...templateValues,
-                            [key]: e.target.value,
-                          })
+                        onChange={(value) =>
+                          handleTemplateValueChange(key, value)
                         }
-                        className="mt-1"
+                        onInputChange={(value) =>
+                          handleTemplateValueChange(key, value)
+                        }
+                        options={completions[key] || []}
                       />
                     </div>
                   );

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,
@@ -87,11 +89,20 @@ const ToolsTab = ({
                   className="max-w-full h-auto"
                 />
               )}
-              {item.type === "resource" && (
-                <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)}
-                </pre>
-              )}
+              {item.type === "resource" &&
+                (item.resource?.mimeType?.startsWith("audio/") ? (
+                  <audio
+                    controls
+                    src={`data:${item.resource.mimeType};base64,${item.resource.blob}`}
+                    className="w-full"
+                  >
+                    <p>Your browser does not support audio playback</p>
+                  </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)}
+                  </pre>
+                ))}
             </div>
           ))}
         </>
@@ -150,22 +161,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 JsonSchemaType;
+                  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,
@@ -174,54 +205,45 @@ 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);
+                      ) : prop.type === "object" || prop.type === "array" ? (
+                        <div className="mt-1">
+                          <DynamicJsonForm
+                            schema={{
+                              type: prop.type,
+                              properties: prop.properties,
+                              description: prop.description,
+                              items: prop.items,
+                            }}
+                            value={(params[key] as JsonValue) ?? {}}
+                            onChange={(newValue: JsonValue) => {
                               setParams({
                                 ...params,
-                                [key]: parsed,
+                                [key]: newValue,
                               });
-                            } catch (err) {
-                              // If invalid JSON, store as string - will be validated on submit
-                              setParams({
-                                ...params,
-                                [key]: e.target.value,
-                              });
-                            }
-                          }}
-                          className="mt-1"
-                        />
+                            }}
+                          />
+                        </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" />

client/src/components/ui/Button.test.tsx

@@ -1,55 +0,0 @@
-import { render, screen, fireEvent } from "@testing-library/react";
-import { Button } from "./button";
-import { describe, it, expect, vi } from "vitest";
-import { createRef } from "react";
-
-describe("Button", () => {
-  it("renders children correctly", () => {
-    render(<Button>Click me</Button>);
-    expect(screen.getByText("Click me")).toBeInTheDocument();
-  });
-
-  it("handles click events", () => {
-    const handleClick = vi.fn();
-    render(<Button onClick={handleClick}>Click me</Button>);
-    fireEvent.click(screen.getByText("Click me"));
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("applies different variants correctly", () => {
-    const { rerender } = render(<Button variant="default">Default</Button>);
-    expect(screen.getByText("Default")).toHaveClass("bg-primary");
-
-    rerender(<Button variant="outline">Outline</Button>);
-    expect(screen.getByText("Outline")).toHaveClass("border-input");
-
-    rerender(<Button variant="secondary">Secondary</Button>);
-    expect(screen.getByText("Secondary")).toHaveClass("bg-secondary");
-  });
-
-  it("applies different sizes correctly", () => {
-    const { rerender } = render(<Button size="default">Default</Button>);
-    expect(screen.getByText("Default")).toHaveClass("h-9");
-
-    rerender(<Button size="sm">Small</Button>);
-    expect(screen.getByText("Small")).toHaveClass("h-8");
-
-    rerender(<Button size="lg">Large</Button>);
-    expect(screen.getByText("Large")).toHaveClass("h-10");
-  });
-
-  it("forwards ref correctly", () => {
-    const ref = createRef<HTMLButtonElement>();
-    render(<Button ref={ref}>Button with ref</Button>);
-    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
-  });
-
-  it("renders as a different element when asChild is true", () => {
-    render(
-      <Button asChild>
-        <a href="#">Link Button</a>
-      </Button>,
-    );
-    expect(screen.getByText("Link Button").tagName).toBe("A");
-  });
-});

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 };

client/src/components/ui/combobox.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+interface ComboboxProps {
+  value: string;
+  onChange: (value: string) => void;
+  onInputChange: (value: string) => void;
+  options: string[];
+  placeholder?: string;
+  emptyMessage?: string;
+  id?: string;
+}
+
+export function Combobox({
+  value,
+  onChange,
+  onInputChange,
+  options = [],
+  placeholder = "Select...",
+  emptyMessage = "No results found.",
+  id,
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleSelect = React.useCallback(
+    (option: string) => {
+      onChange(option);
+      setOpen(false);
+    },
+    [onChange],
+  );
+
+  const handleInputChange = React.useCallback(
+    (value: string) => {
+      onInputChange(value);
+    },
+    [onInputChange],
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          aria-controls={id}
+          className="w-full justify-between"
+        >
+          {value || placeholder}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full p-0" align="start">
+        <Command shouldFilter={false} id={id}>
+          <CommandInput
+            placeholder={placeholder}
+            value={value}
+            onValueChange={handleInputChange}
+          />
+          <CommandEmpty>{emptyMessage}</CommandEmpty>
+          <CommandGroup>
+            {options.map((option) => (
+              <CommandItem
+                key={option}
+                value={option}
+                onSelect={() => handleSelect(option)}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    value === option ? "opacity-100" : "opacity-0",
+                  )}
+                />
+                {option}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

client/src/components/ui/command.tsx

@@ -0,0 +1,150 @@
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};

client/src/components/ui/dialog.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "@/lib/utils";
+import { Cross2Icon } from "@radix-ui/react-icons";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

client/src/components/ui/popover.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

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;

client/src/lib/auth.ts

@@ -0,0 +1,73 @@
+import { OAuthClientProvider } from "@modelcontextprotocol/sdk/client/auth.js";
+import {
+  OAuthClientInformationSchema,
+  OAuthClientInformation,
+  OAuthTokens,
+  OAuthTokensSchema,
+} from "@modelcontextprotocol/sdk/shared/auth.js";
+import { SESSION_KEYS } from "./constants";
+
+class InspectorOAuthClientProvider implements OAuthClientProvider {
+  get redirectUrl() {
+    return window.location.origin + "/oauth/callback";
+  }
+
+  get clientMetadata() {
+    return {
+      redirect_uris: [this.redirectUrl],
+      token_endpoint_auth_method: "none",
+      grant_types: ["authorization_code", "refresh_token"],
+      response_types: ["code"],
+      client_name: "MCP Inspector",
+      client_uri: "https://github.com/modelcontextprotocol/inspector",
+    };
+  }
+
+  async clientInformation() {
+    const value = sessionStorage.getItem(SESSION_KEYS.CLIENT_INFORMATION);
+    if (!value) {
+      return undefined;
+    }
+
+    return await OAuthClientInformationSchema.parseAsync(JSON.parse(value));
+  }
+
+  saveClientInformation(clientInformation: OAuthClientInformation) {
+    sessionStorage.setItem(
+      SESSION_KEYS.CLIENT_INFORMATION,
+      JSON.stringify(clientInformation),
+    );
+  }
+
+  async tokens() {
+    const tokens = sessionStorage.getItem(SESSION_KEYS.TOKENS);
+    if (!tokens) {
+      return undefined;
+    }
+
+    return await OAuthTokensSchema.parseAsync(JSON.parse(tokens));
+  }
+
+  saveTokens(tokens: OAuthTokens) {
+    sessionStorage.setItem(SESSION_KEYS.TOKENS, JSON.stringify(tokens));
+  }
+
+  redirectToAuthorization(authorizationUrl: URL) {
+    window.location.href = authorizationUrl.href;
+  }
+
+  saveCodeVerifier(codeVerifier: string) {
+    sessionStorage.setItem(SESSION_KEYS.CODE_VERIFIER, codeVerifier);
+  }
+
+  codeVerifier() {
+    const verifier = sessionStorage.getItem(SESSION_KEYS.CODE_VERIFIER);
+    if (!verifier) {
+      throw new Error("No code verifier saved for session");
+    }
+
+    return verifier;
+  }
+}
+
+export const authProvider = new InspectorOAuthClientProvider();

client/src/lib/constants.ts

@@ -0,0 +1,7 @@
+// OAuth-related session storage keys
+export const SESSION_KEYS = {
+  CODE_VERIFIER: "mcp_code_verifier",
+  SERVER_URL: "mcp_server_url",
+  TOKENS: "mcp_tokens",
+  CLIENT_INFORMATION: "mcp_client_information",
+} as const;

client/src/lib/hooks/useCompletionState.ts

@@ -0,0 +1,128 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import {
+  ResourceReference,
+  PromptReference,
+} from "@modelcontextprotocol/sdk/types.js";
+
+interface CompletionState {
+  completions: Record<string, string[]>;
+  loading: Record<string, boolean>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function debounce<T extends (...args: any[]) => PromiseLike<void>>(
+  func: T,
+  wait: number,
+): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout>;
+  return function (...args: Parameters<T>) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+}
+
+export function useCompletionState(
+  handleCompletion: (
+    ref: ResourceReference | PromptReference,
+    argName: string,
+    value: string,
+    signal?: AbortSignal,
+  ) => Promise<string[]>,
+  completionsSupported: boolean = true,
+  debounceMs: number = 300,
+) {
+  const [state, setState] = useState<CompletionState>({
+    completions: {},
+    loading: {},
+  });
+
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const cleanup = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+  }, []);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return cleanup;
+  }, [cleanup]);
+
+  const clearCompletions = useCallback(() => {
+    cleanup();
+    setState({
+      completions: {},
+      loading: {},
+    });
+  }, [cleanup]);
+
+  const requestCompletions = useCallback(
+    debounce(
+      async (
+        ref: ResourceReference | PromptReference,
+        argName: string,
+        value: string,
+      ) => {
+        if (!completionsSupported) {
+          return;
+        }
+
+        cleanup();
+
+        const abortController = new AbortController();
+        abortControllerRef.current = abortController;
+
+        setState((prev) => ({
+          ...prev,
+          loading: { ...prev.loading, [argName]: true },
+        }));
+
+        try {
+          const values = await handleCompletion(
+            ref,
+            argName,
+            value,
+            abortController.signal,
+          );
+
+          if (!abortController.signal.aborted) {
+            setState((prev) => ({
+              ...prev,
+              completions: { ...prev.completions, [argName]: values },
+              loading: { ...prev.loading, [argName]: false },
+            }));
+          }
+        } catch (err) {
+          if (!abortController.signal.aborted) {
+            setState((prev) => ({
+              ...prev,
+              loading: { ...prev.loading, [argName]: false },
+            }));
+          }
+        } finally {
+          if (abortControllerRef.current === abortController) {
+            abortControllerRef.current = null;
+          }
+        }
+      },
+      debounceMs,
+    ),
+    [handleCompletion, completionsSupported, cleanup, debounceMs],
+  );
+
+  // Clear completions when support status changes
+  useEffect(() => {
+    if (!completionsSupported) {
+      clearCompletions();
+    }
+  }, [completionsSupported, clearCompletions]);
+
+  return {
+    ...state,
+    clearCompletions,
+    requestCompletions,
+    completionsSupported,
+  };
+}

client/src/lib/hooks/useConnection.ts

@@ -1,5 +1,8 @@
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
-import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+import {
+  SSEClientTransport,
+  SseError,
+} from "@modelcontextprotocol/sdk/client/sse.js";
 import {
   ClientNotification,
   ClientRequest,
@@ -9,11 +12,19 @@ import {
   Request,
   Result,
   ServerCapabilities,
+  PromptReference,
+  ResourceReference,
+  McpError,
+  CompleteResultSchema,
+  ErrorCode,
 } from "@modelcontextprotocol/sdk/types.js";
 import { useState } from "react";
 import { toast } from "react-toastify";
-import { Notification, StdErrNotificationSchema } from "../notificationTypes";
 import { z } from "zod";
+import { SESSION_KEYS } from "../constants";
+import { Notification, StdErrNotificationSchema } from "../notificationTypes";
+import { auth } from "@modelcontextprotocol/sdk/client/auth.js";
+import { authProvider } from "../auth";
 
 const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
 
@@ -31,6 +42,12 @@ interface UseConnectionOptions {
   getRoots?: () => any[];
 }
 
+interface RequestOptions {
+  signal?: AbortSignal;
+  timeout?: number;
+  suppressToast?: boolean;
+}
+
 export function useConnection({
   transportType,
   command,
@@ -53,6 +70,7 @@ export function useConnection({
   const [requestHistory, setRequestHistory] = useState<
     { request: string; response?: string }[]
   >([]);
+  const [completionsSupported, setCompletionsSupported] = useState(true);
 
   const pushHistory = (request: object, response?: object) => {
     setRequestHistory((prev) => [
@@ -67,7 +85,8 @@ export function useConnection({
   const makeRequest = async <T extends z.ZodType>(
     request: ClientRequest,
     schema: T,
-  ) => {
+    options?: RequestOptions,
+  ): Promise<z.output<T>> => {
     if (!mcpClient) {
       throw new Error("MCP client not connected");
     }
@@ -76,12 +95,12 @@ export function useConnection({
       const abortController = new AbortController();
       const timeoutId = setTimeout(() => {
         abortController.abort("Request timed out");
-      }, requestTimeout);
+      }, options?.timeout ?? requestTimeout);
 
       let response;
       try {
         response = await mcpClient.request(request, schema, {
-          signal: abortController.signal,
+          signal: options?.signal ?? abortController.signal,
         });
         pushHistory(request, response);
       } catch (error) {
@@ -95,28 +114,88 @@ export function useConnection({
 
       return response;
     } catch (e: unknown) {
-      const errorString = (e as Error).message ?? String(e);
-      toast.error(errorString);
+      if (!options?.suppressToast) {
+        const errorString = (e as Error).message ?? String(e);
+        toast.error(errorString);
+      }
+      throw e;
+    }
+  };
 
+  const handleCompletion = async (
+    ref: ResourceReference | PromptReference,
+    argName: string,
+    value: string,
+    signal?: AbortSignal,
+  ): Promise<string[]> => {
+    if (!mcpClient || !completionsSupported) {
+      return [];
+    }
+
+    const request: ClientRequest = {
+      method: "completion/complete",
+      params: {
+        argument: {
+          name: argName,
+          value,
+        },
+        ref,
+      },
+    };
+
+    try {
+      const response = await makeRequest(request, CompleteResultSchema, {
+        signal,
+        suppressToast: true,
+      });
+      return response?.completion.values || [];
+    } catch (e: unknown) {
+      // Disable completions silently if the server doesn't support them.
+      // See https://github.com/modelcontextprotocol/specification/discussions/122
+      if (e instanceof McpError && e.code === ErrorCode.MethodNotFound) {
+        setCompletionsSupported(false);
+        return [];
+      }
+
+      // Unexpected errors - show toast and rethrow
+      toast.error(e instanceof Error ? e.message : String(e));
       throw e;
     }
   };
 
   const sendNotification = async (notification: ClientNotification) => {
     if (!mcpClient) {
-      throw new Error("MCP client not connected");
+      const error = new Error("MCP client not connected");
+      toast.error(error.message);
+      throw error;
     }
 
     try {
       await mcpClient.notification(notification);
+      // Log successful notifications
       pushHistory(notification);
     } catch (e: unknown) {
-      toast.error((e as Error).message ?? String(e));
+      if (e instanceof McpError) {
+        // Log MCP protocol errors
+        pushHistory(notification, { error: e.message });
+      }
+      toast.error(e instanceof Error ? e.message : String(e));
       throw e;
     }
   };
 
-  const connect = async () => {
+  const handleAuthError = async (error: unknown) => {
+    if (error instanceof SseError && error.code === 401) {
+      sessionStorage.setItem(SESSION_KEYS.SERVER_URL, sseUrl);
+
+      const result = await auth(authProvider, { serverUrl: sseUrl });
+      return result === "AUTHORIZED";
+    }
+
+    return false;
+  };
+
+  const connect = async (_e?: unknown, retryCount: number = 0) => {
     try {
       const client = new Client<Request, Notification, Result>(
         {
@@ -144,7 +223,22 @@ export function useConnection({
         backendUrl.searchParams.append("url", sseUrl);
       }
 
-      const clientTransport = new SSEClientTransport(backendUrl);
+      // Inject auth manually instead of using SSEClientTransport, because we're
+      // proxying through the inspector server first.
+      const headers: HeadersInit = {};
+      const tokens = await authProvider.tokens();
+      if (tokens) {
+        headers["Authorization"] = `Bearer ${tokens.access_token}`;
+      }
+
+      const clientTransport = new SSEClientTransport(backendUrl, {
+        eventSourceInit: {
+          fetch: (url, init) => fetch(url, { ...init, headers }),
+        },
+        requestInit: {
+          headers,
+        },
+      });
 
       if (onNotification) {
         client.setNotificationHandler(
@@ -160,10 +254,25 @@ export function useConnection({
         );
       }
 
-      await client.connect(clientTransport);
+      try {
+        await client.connect(clientTransport);
+      } catch (error) {
+        console.error("Failed to connect to MCP server:", error);
+        const shouldRetry = await handleAuthError(error);
+        if (shouldRetry) {
+          return connect(undefined, retryCount + 1);
+        }
+
+        if (error instanceof SseError && error.code === 401) {
+          // Don't set error state if we're about to redirect for auth
+          return;
+        }
+        throw error;
+      }
 
       const capabilities = client.getServerCapabilities();
       setServerCapabilities(capabilities ?? null);
+      setCompletionsSupported(true); // Reset completions support on new connection
 
       if (onPendingRequest) {
         client.setRequestHandler(CreateMessageRequestSchema, (request) => {
@@ -194,6 +303,8 @@ export function useConnection({
     requestHistory,
     makeRequest,
     sendNotification,
+    handleCompletion,
+    completionsSupported,
     connect,
   };
 }

client/src/test.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="vitest/globals" />
-/// <reference types="@testing-library/jest-dom" />
-
-import "@testing-library/jest-dom";
-
-declare global {
-  namespace Vi {
-    interface JestAssertion<T = any> extends jest.Matchers<void, T> {}
-  }
-}
-
-export {};

client/test/setupTests.ts

@@ -1,6 +0,0 @@
-/// <reference types="vitest/globals" />
-/// <reference types="@testing-library/jest-dom" />
-import "@testing-library/jest-dom/vitest";
-
-// Add any additional test setup, custom matchers, or global mocks here
-// This file runs before each test file

client/tsconfig.app.json

@@ -4,7 +4,6 @@
     "paths": {
       "@/*": ["./src/*"]
     },
-    "types": ["vitest/globals", "@testing-library/jest-dom"],
 
     "target": "ES2020",
     "useDefineForClassFields": true,
@@ -27,5 +26,5 @@
     "noFallthroughCasesInSwitch": true,
     "resolveJsonModule": true
   },
-  "include": ["src", "test"]
+  "include": ["src"]
 }

client/tsconfig.json

@@ -2,8 +2,7 @@
   "files": [],
   "references": [
     { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" },
-    { "path": "./tsconfig.test.json" }
+    { "path": "./tsconfig.node.json" }
   ],
   "compilerOptions": {
     "baseUrl": ".",

client/tsconfig.test.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.app.json",
-  "compilerOptions": {
-    "types": ["vitest/globals", "@testing-library/jest-dom"]
-  },
-  "include": ["src/**/*.test.tsx", "src/**/*.test.ts", "test/**/*.ts"]
-}

client/vite.config.ts

@@ -1,10 +1,11 @@
+import react from "@vitejs/plugin-react";
 import path from "path";
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {},
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),

client/vitest.config.ts

@@ -1,20 +0,0 @@
-import { defineConfig } from "vitest/config";
-import react from "@vitejs/plugin-react";
-import path from "path";
-
-export default defineConfig({
-  plugins: [react()],
-  test: {
-    environment: "jsdom",
-    globals: true,
-    setupFiles: ["./test/setupTests.ts"],
-    typecheck: {
-      tsconfig: "./tsconfig.test.json",
-    },
-  },
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.3.0",
+  "version": "0.5.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": {

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-server",
-  "version": "0.3.0",
+  "version": "0.5.1",
   "description": "Server-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -16,20 +16,19 @@
   "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",
-    "@types/eventsource": "^1.1.15",
     "@types/express": "^4.17.21",
     "@types/ws": "^8.5.12",
     "tsx": "^4.19.0",
     "typescript": "^5.6.2"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.0.3",
+    "@modelcontextprotocol/sdk": "^1.6.1",
     "cors": "^2.8.5",
-    "eventsource": "^2.0.2",
     "express": "^4.21.0",
     "ws": "^8.18.0",
     "zod": "^3.23.8"

server/src/index.ts

@@ -1,29 +1,29 @@
 #!/usr/bin/env node
 
 import cors from "cors";
-import EventSource from "eventsource";
 import { parseArgs } from "node:util";
 import { parse as shellParseArgs } from "shell-quote";
 
-import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+import {
+  SSEClientTransport,
+  SseError,
+} from "@modelcontextprotocol/sdk/client/sse.js";
 import {
   StdioClientTransport,
   getDefaultEnvironment,
 } from "@modelcontextprotocol/sdk/client/stdio.js";
 import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
 import express from "express";
-import mcpProxy from "./mcpProxy.js";
 import { findActualExecutable } from "spawn-rx";
+import mcpProxy from "./mcpProxy.js";
+
+const SSE_HEADERS_PASSTHROUGH = ["authorization"];
 
 const defaultEnvironment = {
   ...getDefaultEnvironment(),
   ...(process.env.MCP_ENV_VARS ? JSON.parse(process.env.MCP_ENV_VARS) : {}),
 };
 
-// Polyfill EventSource for an SSE client in Node.js
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(global as any).EventSource = EventSource;
-
 const { values } = parseArgs({
   args: process.argv.slice(2),
   options: {
@@ -37,7 +37,8 @@ app.use(cors());
 
 let webAppTransports: SSEServerTransport[] = [];
 
-const createTransport = async (query: express.Request["query"]) => {
+const createTransport = async (req: express.Request) => {
+  const query = req.query;
   console.log("Query parameters:", query);
 
   const transportType = query.transportType as string;
@@ -65,9 +66,26 @@ const createTransport = async (query: express.Request["query"]) => {
     return transport;
   } else if (transportType === "sse") {
     const url = query.url as string;
-    console.log(`SSE transport: url=${url}`);
+    const headers: HeadersInit = {};
+    for (const key of SSE_HEADERS_PASSTHROUGH) {
+      if (req.headers[key] === undefined) {
+        continue;
+      }
 
-    const transport = new SSEClientTransport(new URL(url));
+      const value = req.headers[key];
+      headers[key] = Array.isArray(value) ? value[value.length - 1] : value;
+    }
+
+    console.log(`SSE transport: url=${url}, headers=${Object.keys(headers)}`);
+
+    const transport = new SSEClientTransport(new URL(url), {
+      eventSourceInit: {
+        fetch: (url, init) => fetch(url, { ...init, headers }),
+      },
+      requestInit: {
+        headers,
+      },
+    });
     await transport.start();
 
     console.log("Connected to SSE transport");
@@ -82,7 +100,21 @@ app.get("/sse", async (req, res) => {
   try {
     console.log("New SSE connection");
 
-    const backingServerTransport = await createTransport(req.query);
+    let backingServerTransport;
+    try {
+      backingServerTransport = await createTransport(req);
+    } catch (error) {
+      if (error instanceof SseError && error.code === 401) {
+        console.error(
+          "Received 401 Unauthorized from MCP server:",
+          error.message,
+        );
+        res.status(401).json(error);
+        return;
+      }
+
+      throw error;
+    }
 
     console.log("Connected MCP client to backing server transport");
 
@@ -109,9 +141,6 @@ app.get("/sse", async (req, res) => {
     mcpProxy({
       transportToClient: webAppTransport,
       transportToServer: backingServerTransport,
-      onerror: (error) => {
-        console.error(error);
-      },
     });
 
     console.log("Set up MCP proxy");
@@ -152,4 +181,16 @@ app.get("/config", (req, res) => {
 });
 
 const PORT = process.env.PORT || 3000;
-app.listen(PORT, () => {});
+
+try {
+  const server = app.listen(PORT);
+
+  server.on("listening", () => {
+    const addr = server.address();
+    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);
+  process.exit(1);
+}

server/src/mcpProxy.ts

@@ -1,23 +1,29 @@
 import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
 
+function onClientError(error: Error) {
+  console.error("Error from inspector client:", error);
+}
+
+function onServerError(error: Error) {
+  console.error("Error from MCP server:", error);
+}
+
 export default function mcpProxy({
   transportToClient,
   transportToServer,
-  onerror,
 }: {
   transportToClient: Transport;
   transportToServer: Transport;
-  onerror: (error: Error) => void;
 }) {
   let transportToClientClosed = false;
   let transportToServerClosed = false;
 
   transportToClient.onmessage = (message) => {
-    transportToServer.send(message).catch(onerror);
+    transportToServer.send(message).catch(onServerError);
   };
 
   transportToServer.onmessage = (message) => {
-    transportToClient.send(message).catch(onerror);
+    transportToClient.send(message).catch(onClientError);
   };
 
   transportToClient.onclose = () => {
@@ -26,7 +32,7 @@ export default function mcpProxy({
     }
 
     transportToClientClosed = true;
-    transportToServer.close().catch(onerror);
+    transportToServer.close().catch(onServerError);
   };
 
   transportToServer.onclose = () => {
@@ -34,10 +40,9 @@ export default function mcpProxy({
       return;
     }
     transportToServerClosed = true;
-
-    transportToClient.close().catch(onerror);
+    transportToClient.close().catch(onClientError);
   };
 
-  transportToClient.onerror = onerror;
-  transportToServer.onerror = onerror;
+  transportToClient.onerror = onClientError;
+  transportToServer.onerror = onServerError;
 }