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.4.0",
+  "version": "0.5.1",
   "description": "Client-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -21,18 +21,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.4.1",
+    "@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",

client/src/App.tsx

@@ -151,6 +151,8 @@ const App = () => {
     requestHistory,
     makeRequest: makeConnectionRequest,
     sendNotification,
+    handleCompletion,
+    completionsSupported,
     connect: connectMcpServer,
   } = useConnection({
     transportType,
@@ -177,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]);
@@ -264,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(
       {
@@ -483,6 +485,8 @@ const App = () => {
                         clearError("resources");
                         setSelectedResource(resource);
                       }}
+                      handleCompletion={handleCompletion}
+                      completionsSupported={completionsSupported}
                       resourceContent={resourceContent}
                       nextCursor={nextResourceCursor}
                       nextTemplateCursor={nextResourceTemplateCursor}
@@ -507,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/OAuthCallback.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react";
-import { handleOAuthCallback } from "../lib/auth";
+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);
@@ -24,9 +25,16 @@ const OAuthCallback = () => {
       }
 
       try {
-        const accessToken = await handleOAuthCallback(serverUrl, code);
-        // Store the access token for future use
-        sessionStorage.setItem(SESSION_KEYS.ACCESS_TOKEN, accessToken);
+        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) {

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,
@@ -159,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,
@@ -183,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/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

@@ -1,93 +1,73 @@
-import pkceChallenge from "pkce-challenge";
+import { OAuthClientProvider } from "@modelcontextprotocol/sdk/client/auth.js";
+import {
+  OAuthClientInformationSchema,
+  OAuthClientInformation,
+  OAuthTokens,
+  OAuthTokensSchema,
+} from "@modelcontextprotocol/sdk/shared/auth.js";
 import { SESSION_KEYS } from "./constants";
 
-export interface OAuthMetadata {
-  authorization_endpoint: string;
-  token_endpoint: string;
-}
+class InspectorOAuthClientProvider implements OAuthClientProvider {
+  get redirectUrl() {
+    return window.location.origin + "/oauth/callback";
+  }
 
-export async function discoverOAuthMetadata(
-  serverUrl: string,
-): Promise<OAuthMetadata> {
-  try {
-    const url = new URL("/.well-known/oauth-authorization-server", serverUrl);
-    const response = await fetch(url.toString());
+  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",
+    };
+  }
 
-    if (response.ok) {
-      const metadata = await response.json();
-      return {
-        authorization_endpoint: metadata.authorization_endpoint,
-        token_endpoint: metadata.token_endpoint,
-      };
+  async clientInformation() {
+    const value = sessionStorage.getItem(SESSION_KEYS.CLIENT_INFORMATION);
+    if (!value) {
+      return undefined;
     }
-  } catch (error) {
-    console.warn("OAuth metadata discovery failed:", error);
+
+    return await OAuthClientInformationSchema.parseAsync(JSON.parse(value));
   }
 
-  // Fall back to default endpoints
-  const baseUrl = new URL(serverUrl);
-  return {
-    authorization_endpoint: new URL("/authorize", baseUrl).toString(),
-    token_endpoint: new URL("/token", baseUrl).toString(),
-  };
-}
-
-export async function startOAuthFlow(serverUrl: string): Promise<string> {
-  // Generate PKCE challenge
-  const challenge = await pkceChallenge();
-  const codeVerifier = challenge.code_verifier;
-  const codeChallenge = challenge.code_challenge;
-
-  // Store code verifier for later use
-  sessionStorage.setItem(SESSION_KEYS.CODE_VERIFIER, codeVerifier);
-
-  // Discover OAuth endpoints
-  const metadata = await discoverOAuthMetadata(serverUrl);
-
-  // Build authorization URL
-  const authUrl = new URL(metadata.authorization_endpoint);
-  authUrl.searchParams.set("response_type", "code");
-  authUrl.searchParams.set("code_challenge", codeChallenge);
-  authUrl.searchParams.set("code_challenge_method", "S256");
-  authUrl.searchParams.set(
-    "redirect_uri",
-    window.location.origin + "/oauth/callback",
-  );
-
-  return authUrl.toString();
-}
-
-export async function handleOAuthCallback(
-  serverUrl: string,
-  code: string,
-): Promise<string> {
-  // Get stored code verifier
-  const codeVerifier = sessionStorage.getItem(SESSION_KEYS.CODE_VERIFIER);
-  if (!codeVerifier) {
-    throw new Error("No code verifier found");
+  saveClientInformation(clientInformation: OAuthClientInformation) {
+    sessionStorage.setItem(
+      SESSION_KEYS.CLIENT_INFORMATION,
+      JSON.stringify(clientInformation),
+    );
   }
 
-  // Discover OAuth endpoints
-  const metadata = await discoverOAuthMetadata(serverUrl);
+  async tokens() {
+    const tokens = sessionStorage.getItem(SESSION_KEYS.TOKENS);
+    if (!tokens) {
+      return undefined;
+    }
 
-  // Exchange code for tokens
-  const response = await fetch(metadata.token_endpoint, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      grant_type: "authorization_code",
-      code,
-      code_verifier: codeVerifier,
-      redirect_uri: window.location.origin + "/oauth/callback",
-    }),
-  });
-
-  if (!response.ok) {
-    throw new Error("Token exchange failed");
+    return await OAuthTokensSchema.parseAsync(JSON.parse(tokens));
   }
 
-  const data = await response.json();
-  return data.access_token;
+  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

@@ -2,5 +2,6 @@
 export const SESSION_KEYS = {
   CODE_VERIFIER: "mcp_code_verifier",
   SERVER_URL: "mcp_server_url",
-  ACCESS_TOKEN: "mcp_access_token",
+  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

@@ -12,13 +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 { z } from "zod";
-import { startOAuthFlow } from "../auth";
 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;
 
@@ -36,6 +42,12 @@ interface UseConnectionOptions {
   getRoots?: () => any[];
 }
 
+interface RequestOptions {
+  signal?: AbortSignal;
+  timeout?: number;
+  suppressToast?: boolean;
+}
+
 export function useConnection({
   transportType,
   command,
@@ -58,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) => [
@@ -72,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");
     }
@@ -81,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) {
@@ -100,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>(
         {
@@ -149,10 +223,12 @@ export function useConnection({
         backendUrl.searchParams.append("url", sseUrl);
       }
 
+      // Inject auth manually instead of using SSEClientTransport, because we're
+      // proxying through the inspector server first.
       const headers: HeadersInit = {};
-      const accessToken = sessionStorage.getItem(SESSION_KEYS.ACCESS_TOKEN);
-      if (accessToken) {
-        headers["Authorization"] = `Bearer ${accessToken}`;
+      const tokens = await authProvider.tokens();
+      if (tokens) {
+        headers["Authorization"] = `Bearer ${tokens.access_token}`;
       }
 
       const clientTransport = new SSEClientTransport(backendUrl, {
@@ -182,19 +258,21 @@ export function useConnection({
         await client.connect(clientTransport);
       } catch (error) {
         console.error("Failed to connect to MCP server:", error);
-        if (error instanceof SseError && error.code === 401) {
-          // Store the server URL for the callback handler
-          sessionStorage.setItem(SESSION_KEYS.SERVER_URL, sseUrl);
-          const redirectUrl = await startOAuthFlow(sseUrl);
-          window.location.href = redirectUrl;
-          return;
+        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) => {
@@ -225,6 +303,8 @@ export function useConnection({
     requestHistory,
     makeRequest,
     sendNotification,
+    handleCompletion,
+    completionsSupported,
     connect,
   };
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.4.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.4.0",
+  "version": "0.5.1",
   "description": "Server-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -16,7 +16,8 @@
   "scripts": {
     "build": "tsc",
     "start": "node build/index.js",
-    "dev": "tsx watch --clear-screen=false src/index.ts"
+    "dev": "tsx watch --clear-screen=false src/index.ts",
+    "dev:windows": "tsx watch --clear-screen=false src/index.ts < NUL"
   },
   "devDependencies": {
     "@types/cors": "^2.8.17",
@@ -26,7 +27,7 @@
     "typescript": "^5.6.2"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.4.1",
+    "@modelcontextprotocol/sdk": "^1.6.1",
     "cors": "^2.8.5",
     "express": "^4.21.0",
     "ws": "^8.18.0",

server/src/index.ts

@@ -181,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);
+}