Live completion/complete suggestions on resource template inputs

Wires the server's `completions` capability through to the resource
template form so each variable's input becomes an Autocomplete that
fires `completion/complete` (debounced, 300ms) on every keystroke and
surfaces the returned values as a dropdown — mirroring v1's behavior.

- core/mcp/inspectorClientProtocol.ts: surface getCompletions on the
  protocol so non-runtime callers (state managers, hooks, tests) can
  depend on it. FakeInspectorClient gains a vi.fn-backed stub.
- ResourceTemplatePanel: accepts onCompleteArgument + completionsSupported.
  When both are present it renders Mantine Autocomplete instead of
  TextInput, debounces keystrokes via per-arg timers, aborts in-flight
  requests on the next keystroke, and disables client-side filtering
  (the server already filtered for the typed prefix).
- ResourcesScreen / InspectorView: thread the props through; the
  screen-level callback re-injects the active template's URI as the
  `ref: "ref/resource"` so the panel-level callback stays ref-free.
- App.tsx: wires onCompleteArgument to inspectorClient.getCompletions
  and derives completionsSupported from `capabilities?.completions`.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: cliffhall

clients/web/src/App.tsx

@@ -508,6 +508,27 @@ function App() {
     [inspectorClient],
   );
 
+  const onCompleteArgument = useCallback(
+    async (
+      ref:
+        | { type: "ref/resource"; uri: string }
+        | { type: "ref/prompt"; name: string },
+      argumentName: string,
+      argumentValue: string,
+      context: Record<string, string>,
+    ): Promise<string[]> => {
+      if (!inspectorClient) return [];
+      const result = await inspectorClient.getCompletions(
+        ref,
+        argumentName,
+        argumentValue,
+        context,
+      );
+      return result.values;
+    },
+    [inspectorClient],
+  );
+
   const onCancelTask = useCallback(
     (taskId: string) => {
       if (!inspectorClient) return;
@@ -630,6 +651,8 @@ function App() {
       onSubscribeResource={onSubscribeResource}
       onUnsubscribeResource={onUnsubscribeResource}
       onRefreshResources={onRefreshResources}
+      onCompleteArgument={onCompleteArgument}
+      completionsSupported={capabilities?.completions !== undefined}
       onCancelTask={onCancelTask}
       onClearCompletedTasks={todoNoop}
       onRefreshTasks={onRefreshTasks}

clients/web/src/components/groups/ResourceTemplatePanel/ResourceTemplatePanel.test.tsx

@@ -137,4 +137,95 @@ describe("ResourceTemplatePanel", () => {
       screen.getByRole("button", { name: "Read Resource" }),
     ).not.toBeDisabled();
   });
+
+  describe("completions", () => {
+    it("calls onCompleteArgument (debounced) and surfaces values when supported", async () => {
+      const user = userEvent.setup();
+      const onCompleteArgument = vi
+        .fn<
+          (
+            argName: string,
+            value: string,
+            context: Record<string, string>,
+          ) => Promise<string[]>
+        >()
+        .mockResolvedValue(["alpha", "alphabet"]);
+
+      renderWithMantine(
+        <ResourceTemplatePanel
+          template={singleVarTemplate}
+          onReadResource={vi.fn()}
+          completionsSupported
+          onCompleteArgument={onCompleteArgument}
+        />,
+      );
+
+      await user.type(screen.getByRole("textbox", { name: "userId" }), "al");
+      // Wait past the 300ms debounce.
+      await new Promise((r) => setTimeout(r, 400));
+      expect(onCompleteArgument).toHaveBeenCalledTimes(1);
+      expect(onCompleteArgument).toHaveBeenCalledWith("userId", "al", {});
+
+      // Server-returned values surface in the Autocomplete dropdown.
+      expect(await screen.findByText("alpha")).toBeInTheDocument();
+      expect(screen.getByText("alphabet")).toBeInTheDocument();
+    });
+
+    it("passes sibling variables as completion context", async () => {
+      const user = userEvent.setup();
+      const onCompleteArgument = vi
+        .fn<
+          (
+            argName: string,
+            value: string,
+            context: Record<string, string>,
+          ) => Promise<string[]>
+        >()
+        .mockResolvedValue([]);
+
+      renderWithMantine(
+        <ResourceTemplatePanel
+          template={titledTemplate}
+          onReadResource={vi.fn()}
+          completionsSupported
+          onCompleteArgument={onCompleteArgument}
+        />,
+      );
+
+      await user.type(
+        screen.getByRole("textbox", { name: "tableName" }),
+        "users",
+      );
+      await new Promise((r) => setTimeout(r, 400));
+      // The completing arg ("tableName") is excluded from context; only
+      // the other variables ride along.
+      expect(onCompleteArgument).toHaveBeenLastCalledWith(
+        "tableName",
+        "users",
+        { rowId: "" },
+      );
+
+      await user.type(screen.getByRole("textbox", { name: "rowId" }), "42");
+      await new Promise((r) => setTimeout(r, 400));
+      expect(onCompleteArgument).toHaveBeenLastCalledWith("rowId", "42", {
+        tableName: "users",
+      });
+    });
+
+    it("does not call onCompleteArgument when completions are unsupported", async () => {
+      const user = userEvent.setup();
+      const onCompleteArgument = vi.fn();
+      renderWithMantine(
+        <ResourceTemplatePanel
+          template={singleVarTemplate}
+          onReadResource={vi.fn()}
+          completionsSupported={false}
+          onCompleteArgument={onCompleteArgument}
+        />,
+      );
+      await user.type(screen.getByLabelText("userId"), "ab");
+      await new Promise((r) => setTimeout(r, 400));
+      expect(onCompleteArgument).not.toHaveBeenCalled();
+    });
+  });
 });

clients/web/src/components/groups/ResourceTemplatePanel/ResourceTemplatePanel.tsx

@@ -1,14 +1,41 @@
-import { useState, useMemo } from "react";
-import { Button, Group, Stack, Text, TextInput, Title } from "@mantine/core";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  Autocomplete,
+  Button,
+  Group,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
 import type { ResourceTemplate } from "@modelcontextprotocol/sdk/types.js";
 import { AnnotationBadge } from "../../elements/AnnotationBadge/AnnotationBadge";
 import { CopyButton } from "../../elements/CopyButton/CopyButton";
 
 export interface ResourceTemplatePanelProps {
   template: ResourceTemplate;
   onReadResource: (uri: string) => void;
+  /**
+   * When provided, each keystroke in a variable input dispatches a
+   * (debounced) `completion/complete` request to the server. The
+   * resolved values are surfaced as a dropdown via Mantine `Autocomplete`.
+   * Wire to `InspectorClient.getCompletions` in the host App.
+   */
+  onCompleteArgument?: (
+    argumentName: string,
+    argumentValue: string,
+    context: Record<string, string>,
+  ) => Promise<string[]>;
+  /**
+   * Gates whether to render Autocomplete (with live completions) vs the
+   * plain TextInput. Typically derived from the server's
+   * `completions` capability.
+   */
+  completionsSupported?: boolean;
 }
 
+const COMPLETION_DEBOUNCE_MS = 300;
+
 function parseVariableNames(uriTemplate: string): string[] {
   const names: string[] = [];
   const regex = /\{(\w+)\}/g;
@@ -69,6 +96,8 @@ const AnnotationGroup = Group.withProps({
 export function ResourceTemplatePanel({
   template,
   onReadResource,
+  onCompleteArgument,
+  completionsSupported = false,
 }: ResourceTemplatePanelProps) {
   const { name, title, uriTemplate, description, annotations } = template;
 
@@ -80,9 +109,79 @@ export function ResourceTemplatePanel({
   const [variables, setVariables] = useState<Record<string, string>>(() =>
     Object.fromEntries(variableNames.map((n) => [n, ""])),
   );
+  const [completions, setCompletions] = useState<Record<string, string[]>>({});
+
+  // Reset state when the user switches to a different template.
+  useEffect(() => {
+    setVariables(Object.fromEntries(variableNames.map((n) => [n, ""])));
+    setCompletions({});
+  }, [uriTemplate, variableNames]);
+
+  // Latest in-flight controller per argument, so a faster keystroke can
+  // abort an outstanding completion request and the late response can't
+  // overwrite the fresh one.
+  const requestsRef = useRef<Map<string, AbortController>>(new Map());
+  // Debounce timer per argument so we don't spam the server on every key.
+  const timersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(
+    new Map(),
+  );
+
+  // Drop pending timers / abort in-flight requests on unmount.
+  useEffect(() => {
+    const timers = timersRef.current;
+    const requests = requestsRef.current;
+    return () => {
+      for (const t of timers.values()) clearTimeout(t);
+      timers.clear();
+      for (const c of requests.values()) c.abort();
+      requests.clear();
+    };
+  }, []);
+
+  const useAutocomplete = completionsSupported && !!onCompleteArgument;
+
+  const runCompletion = useCallback(
+    async (varName: string, value: string, context: Record<string, string>) => {
+      if (!onCompleteArgument) return;
+      requestsRef.current.get(varName)?.abort();
+      const controller = new AbortController();
+      requestsRef.current.set(varName, controller);
+      try {
+        const values = await onCompleteArgument(varName, value, context);
+        if (controller.signal.aborted) return;
+        setCompletions((prev) => ({ ...prev, [varName]: values }));
+      } catch {
+        if (!controller.signal.aborted) {
+          setCompletions((prev) => ({ ...prev, [varName]: [] }));
+        }
+      } finally {
+        if (requestsRef.current.get(varName) === controller) {
+          requestsRef.current.delete(varName);
+        }
+      }
+    },
+    [onCompleteArgument],
+  );
 
   function handleVariableChange(varName: string, value: string) {
-    setVariables((prev) => ({ ...prev, [varName]: value }));
+    setVariables((prev) => {
+      const next = { ...prev, [varName]: value };
+      if (useAutocomplete) {
+        // Schedule a debounced completion call. The `context` carries the
+        // other variables' current values so the server can disambiguate
+        // when one variable depends on another.
+        const context: Record<string, string> = { ...next };
+        delete context[varName];
+        const existing = timersRef.current.get(varName);
+        if (existing) clearTimeout(existing);
+        const timer = setTimeout(() => {
+          timersRef.current.delete(varName);
+          void runCompletion(varName, value, context);
+        }, COMPLETION_DEBOUNCE_MS);
+        timersRef.current.set(varName, timer);
+      }
+      return next;
+    });
   }
 
   const canSubmit = variableNames.every((n) => variables[n]?.length > 0);
@@ -104,17 +203,33 @@ export function ResourceTemplatePanel({
       </HeaderRow>
       {description && <DescriptionText>{description}</DescriptionText>}
       <Stack gap="sm">
-        {variableNames.map((varName) => (
-          <TextInput
-            key={varName}
-            label={varName}
-            placeholder={`Enter ${varName}`}
-            value={variables[varName] ?? ""}
-            onChange={(e) =>
-              handleVariableChange(varName, e.currentTarget.value)
-            }
-          />
-        ))}
+        {variableNames.map((varName) =>
+          useAutocomplete ? (
+            <Autocomplete
+              key={varName}
+              label={varName}
+              placeholder={`Enter ${varName}`}
+              value={variables[varName] ?? ""}
+              data={completions[varName] ?? []}
+              // The server already filtered the values for the typed
+              // prefix; passing options through verbatim avoids hiding
+              // valid suggestions when the input is empty or doesn't
+              // substring-match what the server returned.
+              filter={({ options }) => options}
+              onChange={(value) => handleVariableChange(varName, value)}
+            />
+          ) : (
+            <TextInput
+              key={varName}
+              label={varName}
+              placeholder={`Enter ${varName}`}
+              value={variables[varName] ?? ""}
+              onChange={(e) =>
+                handleVariableChange(varName, e.currentTarget.value)
+              }
+            />
+          ),
+        )}
       </Stack>
       <FooterRow>
         <AnnotationGroup>

clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx

@@ -25,10 +25,19 @@ export interface ResourcesScreenProps {
   subscriptions: InspectorResourceSubscription[];
   readState?: ReadResourceState;
   listChanged: boolean;
+  completionsSupported?: boolean;
   onRefreshList: () => void;
   onReadResource: (uri: string) => void;
   onSubscribeResource: (uri: string) => void;
   onUnsubscribeResource: (uri: string) => void;
+  onCompleteArgument?: (
+    ref:
+      | { type: "ref/resource"; uri: string }
+      | { type: "ref/prompt"; name: string },
+    argumentName: string,
+    argumentValue: string,
+    context: Record<string, string>,
+  ) => Promise<string[]>;
 }
 
 const ScreenLayout = Flex.withProps({
@@ -88,10 +97,12 @@ export function ResourcesScreen({
   subscriptions,
   readState,
   listChanged,
+  completionsSupported,
   onRefreshList,
   onReadResource,
   onSubscribeResource,
   onUnsubscribeResource,
+  onCompleteArgument,
 }: ResourcesScreenProps) {
   const [selectedResourceUri, setSelectedResourceUri] = useState<
     string | undefined
@@ -210,6 +221,21 @@ export function ResourcesScreen({
             <ResourceTemplatePanel
               template={selectedTemplate}
               onReadResource={handleReadResource}
+              completionsSupported={completionsSupported}
+              onCompleteArgument={
+                onCompleteArgument
+                  ? (argName, value, context) =>
+                      onCompleteArgument(
+                        {
+                          type: "ref/resource",
+                          uri: selectedTemplate.uriTemplate,
+                        },
+                        argName,
+                        value,
+                        context,
+                      )
+                  : undefined
+              }
             />
           </PreviewCard>
         </PreviewPane>