Implemented URL elicitation support in web app.

Author: BobDickinson

configs/mcp.json

@@ -8,6 +8,14 @@
         "test/configs/demo.json"
       ]
     },
+    "url-elicitation-form": {
+      "command": "node",
+      "args": [
+        "test/build/server-composable.js",
+        "--config",
+        "test/configs/url-elicitation-form.json"
+      ]
+    },
     "everything": {
       "command": "npx",
       "args": [

docs/inspector-client-todo.md

@@ -84,13 +84,9 @@ Goal: Parity with v1 client
 
 Goal: Bring Inspector Web support to current spec
 
-- URL elicitation (already in InspectorClient, just need UX)
-  - https://github.com/modelcontextprotocol/inspector/issues/929
-  - https://github.com/modelcontextprotocol/inspector/pull/994
-  - May be tricky to test because everything doesn't support it yet
 - Add "sampling with tools" support
   - https://github.com/modelcontextprotocol/inspector/issues/932
-- Review v1 project boards for any feature deficiencies
+- Review v1 project boards for any feature deficiencies to spec
 
 Goal: Inspector Web quality
 
@@ -100,6 +96,22 @@ Goal: Inspector Web quality
     Error: waitForStateFile failed: JSON parse error (file may be mid-write or corrupt). File: /var/folders/c8/jr_qy1fs1cj3hfhr5m_2f4c40000gn/T/mcp-inspector-e2e-1771550464080-66tdoqzpfxo.json. Attempts: 40. Raw snippet: {"state":{"servers":{"http://localhost:51796/sse":{"preregisteredClientInformation":{"client_id":"test-storage-path","client_secret":"test-secret-sp"},"codeVerifier":"U8mEkBln9JtFLMzC3b50kj0QtubtwpDPU... (405 chars total). Run with DEBUG_WAIT_FOR_STATE_FILE=1 for per-attempt logs.
     ❯ vi.waitFor.timeout.timeout test/test-helpers.ts:138:15
     ```
+- Another test failure (only seen once):
+  - **tests**/inspectorClient-oauth-e2e.test.ts > InspectorClient OAuth E2E > Resource metadata discovery and oauthStepChange ('SSE') > should discover resource metadata and set resource in guided flow
+  ```
+  Error: Failed to discover OAuth metadata
+  ❯ Object.execute auth/state-machine.ts:72:15
+     70|       );
+     71|       if (!metadata) {
+     72|         throw new Error("Failed to discover OAuth metadata");
+       |               ^
+     73|       }
+     74|       const parsedMetadata = await OAuthMetadataSchema.parseAsync(metadata);
+  ❯ OAuthStateMachine.executeStep auth/state-machine.ts:283:5
+  ❯ InspectorClient.beginGuidedAuth mcp/inspectorClient.ts:3170:5
+  ❯ InspectorClient.runGuidedAuth mcp/inspectorClient.ts:3184:7
+  ❯ __tests__/inspectorClient-oauth-e2e.test.ts:1369:9
+  ```
 - Review open v1 bugs (esp auth bugs) to see which ones still apply
 
 Misc
@@ -123,3 +135,12 @@ Better forms (test tool, etc)
 
 - UX (cleaner, maybe ditch ink-forms, see if it can be styled better?)
 - Functionality (data types, arrays, arrays of objects, etc)
+
+## URL Elicitation
+
+- https://github.com/modelcontextprotocol/inspector/issues/929
+- https://github.com/modelcontextprotocol/inspector/pull/994
+
+Not supported in everything server yet, so we tested via composable server:
+
+`npm run web:dev -- --config configs/mcp.json --server url-elicitation-form`

docs/mcp-feature-tracker.md

@@ -39,7 +39,7 @@ Track MCP feature support across InspectorClient, Web v1, Web v1.5, and TUI.
 | Sampling requests                          | ✅              | ✅      | ✅       | ❌  |
 | Sampling with tools                        | ❌              | ❌      | ❌       | ❌  |
 | Elicitation requests (form)                | ✅              | ✅      | ✅       | ❌  |
-| Elicitation requests (url)                 | ✅              | ❌      | ❌       | ❌  |
+| Elicitation requests (url)                 | ✅              | ❌      | ✅       | ❌  |
 | Tasks (long-running operations)            | ✅              | ✅      | ✅       | ❌  |
 | Requestor task support                     | ✅              | ✅      | ✅       | ❌  |
 | Completions (resource templates)           | ✅              | ✅      | ✅       | ❌  |

test/README.md

@@ -13,14 +13,14 @@ The **@modelcontextprotocol/server-everything** package is the standard test-ben
 
 The composable test server is **complementary**, not a replacement:
 
-| Situation                                    | Composable server advantage                                                                         | Everything server                                                           |
-| -------------------------------------------- | --------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
-| **Testing specific capability combinations** | Compose exactly the subset you need (e.g. tools only, resources only, tasks + resources).           | Fixed "kitchen sink" shape.                                                 |
-| **Pagination testing**                       | `maxPageSize` configurable per list type. Test cursor behavior with small page sizes (e.g. 2 or 3). | Fixed resource/prompt counts. No configurable pagination.                   |
-| **Controlled, predictable behavior**         | No random log messages or timers. Responses are deterministic.                                      | Random log messages every 15 seconds, subscription updates every 5 seconds. |
-| **listChanged / subscriptions**              | Enable or disable `listChanged` per list type. `subscriptions` toggle for resource updates.         | Fixed behavior.                                                             |
-| **Task variants**                            | Test task tools in isolation: immediate, progress, elicitation, sampling, optional vs required.     | Has task-like behavior in a fixed form.                                     |
-| **Rapid iteration**                          | Swap config files to test different server shapes without code changes.                             | Single fixed shape.                                                         |
+| Situation                                    | Composable server advantage                                                                         | Everything server                                               |
+| -------------------------------------------- | --------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- |
+| **Testing specific capability combinations** | Compose exactly the subset you need (e.g. tools only, resources only, tasks + resources).           | Fixed "kitchen sink" shape.                                     |
+| **Pagination testing**                       | `maxPageSize` configurable per list type. Test cursor behavior with small page sizes (e.g. 2 or 3). | Fixed resource/prompt counts. No configurable pagination.       |
+| **Controlled, predictable behavior**         | No unexpected notifications, log evenets, etc. Behavior is focussed and deterministic.              | Various log messages, notifications, subscription updates, etc. |
+| **listChanged / subscriptions**              | Enable or disable `listChanged` per list type. `subscriptions` toggle for resource updates.         | Fixed behavior.                                                 |
+| **Task variants**                            | Test task tools in isolation: immediate, progress, elicitation, sampling, optional vs required.     | Has task-like behavior in a fixed form.                         |
+| **Rapid iteration**                          | Swap config files to test different server shapes without code changes.                             | Single fixed shape.                                             |
 
 **Use Everything when:** You want broad coverage, community standard, quick `npx` start, or hosted DCR-only OAuth for testing against a real auth server.
 

web/src/App.tsx

@@ -467,6 +467,7 @@ const App = () => {
         sessionId,
         receiverTasks: true,
         receiverTaskTtlMs: getMCPTaskTtl(currentConfig),
+        elicit: { form: true, url: true },
       };
 
       if (hasOAuthConfig) {
@@ -597,32 +598,64 @@ const App = () => {
       const elicitation = event.detail;
       const currentTab = lastToolCallOriginTabRef.current;
       const numericId = getNumericId(elicitation.id);
+      const params = elicitation.request.params ?? {};
+      const isUrl = params.mode === "url";
+
+      const baseItem = {
+        id: numericId,
+        elicitationId: elicitation.id as string,
+        originatingTab: currentTab,
+        resolve: async (result: ElicitationResponse) => {
+          await elicitation.respond(result);
+        },
+        decline: async (error: Error) => {
+          elicitation.reject(error);
+          elicitation.remove();
+          console.error("Elicitation request rejected:", error);
+        },
+      };
 
-      setPendingElicitationRequests((prev) => [
-        ...prev,
-        {
-          id: numericId,
-          request: {
-            id: numericId,
-            message: elicitation.request.params.message,
-            requestedSchema: elicitation.request.params.requestedSchema,
-          },
-          originatingTab: currentTab,
-          resolve: async (result: ElicitationResponse) => {
-            await elicitation.respond(result);
+      if (isUrl) {
+        setPendingElicitationRequests((prev) => [
+          ...prev,
+          {
+            ...baseItem,
+            request: {
+              mode: "url",
+              id: numericId,
+              message: params.message as string,
+              url: params.url as string,
+              elicitationId: params.elicitationId as string,
+            },
           },
-          decline: async (error: Error) => {
-            elicitation.reject(error);
-            elicitation.remove();
-            console.error("Elicitation request rejected:", error);
+        ]);
+      } else {
+        setPendingElicitationRequests((prev) => [
+          ...prev,
+          {
+            ...baseItem,
+            request: {
+              mode: "form",
+              id: numericId,
+              message: params.message as string,
+              requestedSchema: params.requestedSchema,
+            },
           },
-        },
-      ]);
+        ]);
+      }
 
       setActiveTab("elicitations");
       window.location.hash = "elicitations";
     };
 
+    const handlePendingElicitationsChange = () => {
+      const stillPending = inspectorClient.getPendingElicitations();
+      const pendingIds = new Set(stillPending.map((e) => e.id));
+      setPendingElicitationRequests((prev) =>
+        prev.filter((r) => pendingIds.has(r.elicitationId)),
+      );
+    };
+
     inspectorClient.addEventListener(
       "newPendingSample",
       handleNewPendingSample,
@@ -631,6 +664,10 @@ const App = () => {
       "newPendingElicitation",
       handleNewPendingElicitation,
     );
+    inspectorClient.addEventListener(
+      "pendingElicitationsChange",
+      handlePendingElicitationsChange,
+    );
 
     return () => {
       inspectorClient.removeEventListener(
@@ -641,6 +678,10 @@ const App = () => {
         "newPendingElicitation",
         handleNewPendingElicitation,
       );
+      inspectorClient.removeEventListener(
+        "pendingElicitationsChange",
+        handlePendingElicitationsChange,
+      );
     };
   }, [inspectorClient]);
 

web/src/components/ElicitationRequest.tsx

@@ -5,13 +5,13 @@ import JsonView from "./JsonView";
 import { JsonSchemaType, JsonValue } from "@/utils/jsonUtils";
 import { generateDefaultValue } from "@/utils/schemaUtils";
 import {
-  PendingElicitationRequest,
+  PendingFormElicitationRequest,
   ElicitationResponse,
 } from "./ElicitationTab";
 import Ajv from "ajv";
 
 export type ElicitationRequestProps = {
-  request: PendingElicitationRequest;
+  request: PendingFormElicitationRequest;
   onResolve: (id: number, response: ElicitationResponse) => void;
 };
 

web/src/components/ElicitationTab.tsx

@@ -2,24 +2,52 @@ import { Alert, AlertDescription } from "@/components/ui/alert";
 import { TabsContent } from "@/components/ui/tabs";
 import { JsonSchemaType } from "@/utils/jsonUtils";
 import ElicitationRequest from "./ElicitationRequest";
+import ElicitationUrlRequest from "./ElicitationUrlRequest";
 
-export interface ElicitationRequestData {
+/** Form-mode elicitation request payload */
+export interface FormElicitationRequestData {
+  mode: "form";
   id: number;
   message: string;
   requestedSchema: JsonSchemaType;
 }
 
+/** URL-mode elicitation request payload */
+export interface UrlElicitationRequestData {
+  mode: "url";
+  id: number;
+  message: string;
+  url: string;
+  elicitationId: string;
+}
+
+export type ElicitationRequestData =
+  | FormElicitationRequestData
+  | UrlElicitationRequestData;
+
 export interface ElicitationResponse {
   action: "accept" | "decline" | "cancel";
   content?: Record<string, unknown>;
 }
 
 export type PendingElicitationRequest = {
   id: number;
+  /** Client-side id (ElicitationCreateMessage.id) for syncing with getPendingElicitations() */
+  elicitationId: string;
   request: ElicitationRequestData;
   originatingTab?: string;
 };
 
+/** Pending form-only request; use for ElicitationRequest component */
+export type PendingFormElicitationRequest = PendingElicitationRequest & {
+  request: FormElicitationRequestData;
+};
+
+/** Pending URL-only request; use for ElicitationUrlRequest component */
+export type PendingUrlElicitationRequest = PendingElicitationRequest & {
+  request: UrlElicitationRequestData;
+};
+
 export type Props = {
   pendingRequests: PendingElicitationRequest[];
   onResolve: (id: number, response: ElicitationResponse) => void;
@@ -37,13 +65,21 @@ const ElicitationTab = ({ pendingRequests, onResolve }: Props) => {
         </Alert>
         <div className="mt-4 space-y-4">
           <h3 className="text-lg font-semibold">Recent Requests</h3>
-          {pendingRequests.map((request) => (
-            <ElicitationRequest
-              key={request.id}
-              request={request}
-              onResolve={onResolve}
-            />
-          ))}
+          {pendingRequests.map((request) =>
+            request.request.mode === "url" ? (
+              <ElicitationUrlRequest
+                key={request.id}
+                request={request as PendingUrlElicitationRequest}
+                onResolve={onResolve}
+              />
+            ) : (
+              <ElicitationRequest
+                key={request.id}
+                request={request as PendingFormElicitationRequest}
+                onResolve={onResolve}
+              />
+            ),
+          )}
           {pendingRequests.length === 0 && (
             <p className="text-gray-500">No pending requests</p>
           )}