@assistant-ui/react-mcp 0.0.21 → 0.1.0

package/src/resources/McpServerResource.ts

@@ -1,20 +1,25 @@
 import { useState, useRef, useEffect, useMemo, useEffectEvent } from "react";
 import { resource } from "@assistant-ui/tap";
 import type { ClientOutput } from "@assistant-ui/store";
-import { Client } from "@modelcontextprotocol/sdk/client/index.js";
 import {
+  Client,
   StreamableHTTPClientTransport,
+  UnauthorizedError,
+  type ClientOptions,
+  type ElicitRequest,
+  type ElicitResult,
   type StreamableHTTPClientTransportOptions,
-} from "@modelcontextprotocol/sdk/client/streamableHttp.js";
-import { UnauthorizedError } from "@modelcontextprotocol/sdk/client/auth.js";
-import type { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
+} from "@modelcontextprotocol/client";
 import { createOAuthProvider } from "../auth/createOAuthProvider";
 import { buildHeaders } from "../auth/buildHeaders";
 import { assertValidServerId } from "../utils/serverId";
+import { validateElicitationContent } from "./validateElicitationContent";
 import type { MCPStorage } from "./storage/types";
 import type {
   MCPAuthConfig,
   MCPConnectionState,
+  MCPElicitation,
+  MCPElicitationResponse,
   MCPServerKind,
   MCPServerState,
   MCPToolInfo,
@@ -31,6 +36,8 @@ export type McpServerResourceProps = {
   redirectUri: string;
   autoConnect: boolean;
   connectionTimeout?: number | undefined;
+  cache?: { readonly defaultTtlMs?: number } | undefined;
+  readonly elicitation?: boolean;
   onRemove: () => Promise<void>;
 };
 
@@ -43,6 +50,9 @@ const useMcpServerResource = (
   const [tools, setTools] = useState<MCPToolInfo[]>([]);
   const [lastError, setLastError] = useState<{ message: string } | null>(null);
   const [authorizationUrl, setAuthorizationUrl] = useState<string | null>(null);
+  const [pendingElicitations, setPendingElicitations] = useState<
+    MCPElicitation[]
+  >([]);
 
   const clientRef = useRef<Client | null>(null);
   const transportRef = useRef<StreamableHTTPClientTransport | null>(null);
@@ -51,6 +61,17 @@ const useMcpServerResource = (
   );
   const transportCloseQueueRef = useRef(Promise.resolve());
   const connectionGenerationRef = useRef(0);
+  const elicitationResolversRef = useRef(
+    new Map<
+      string,
+      {
+        resolve: (result: ElicitResult) => void;
+        signal: AbortSignal;
+        onAbort: () => void;
+        requestedSchema: unknown;
+      }
+    >(),
+  );
   const pendingDisposalRef = useRef<{ cancelled: boolean } | null>(null);
   const mountedRef = useRef(true);
 
@@ -80,7 +101,39 @@ const useMcpServerResource = (
     await closeQueuedTransports(transport ? [transport] : []);
   };
 
+  const resolvePendingElicitation = (id: string, result: ElicitResult) => {
+    const entry = elicitationResolversRef.current.get(id);
+    if (!entry) return false;
+    elicitationResolversRef.current.delete(id);
+    entry.signal.removeEventListener("abort", entry.onAbort);
+    setPendingElicitations((current) =>
+      current.filter((elicitation) => elicitation.id !== id),
+    );
+    entry.resolve(result);
+    return true;
+  };
+
+  const setPendingElicitationError = (
+    id: string,
+    error: NonNullable<MCPElicitation["error"]>,
+  ) => {
+    if (!elicitationResolversRef.current.has(id)) return false;
+    setPendingElicitations((current) =>
+      current.map((elicitation) =>
+        elicitation.id === id ? { ...elicitation, error } : elicitation,
+      ),
+    );
+    return true;
+  };
+
+  const cancelPendingElicitations = () => {
+    for (const [id] of elicitationResolversRef.current) {
+      resolvePendingElicitation(id, { action: "cancel" });
+    }
+  };
+
   const closeTransports = async () => {
+    cancelPendingElicitations();
     const pendingTransport = pendingTransportRef.current;
     const activeTransport = transportRef.current;
     pendingTransportRef.current = null;
@@ -162,22 +215,136 @@ const useMcpServerResource = (
     },
   );
 
+  const applyToolsList = useEffectEvent(
+    (list: {
+      tools: Array<{
+        name: string;
+        description?: string | undefined;
+        inputSchema: unknown;
+      }>;
+    }) => {
+      setTools(
+        list.tools.map((t) => {
+          const info: MCPToolInfo = {
+            name: t.name,
+            inputSchema: t.inputSchema,
+          };
+          if (t.description !== undefined) info.description = t.description;
+          return info;
+        }),
+      );
+    },
+  );
+
+  const syncTools = useEffectEvent(
+    async (
+      client: Client,
+      generation: number,
+      options?: { startedAt?: number | undefined },
+    ): Promise<boolean> => {
+      const listPromise = client.listTools();
+      const list =
+        options?.startedAt === undefined
+          ? await listPromise
+          : await withConnectionTimeout(
+              listPromise,
+              "listing tools",
+              options.startedAt,
+            );
+      if (!isCurrentConnection(generation)) return false;
+      applyToolsList(list);
+      return true;
+    },
+  );
+
   const finalizeConnect = useEffectEvent(
     async (
       transport: StreamableHTTPClientTransport,
       generation: number,
     ): Promise<boolean> => {
-      const client = new Client({
-        name: "assistant-ui-mcp",
-        version: "0.0.0",
-      });
+      const clientOptions: ClientOptions = {
+        ...(props.elicitation === false
+          ? {}
+          : { capabilities: { elicitation: {} } }),
+        listChanged: {
+          tools: {
+            autoRefresh: true,
+            debounceMs: 300,
+            onChanged: (error, items) => {
+              if (!isCurrentConnection(generation)) return;
+              if (error !== null) {
+                setLastError({ message: error.message });
+                return;
+              }
+              if (items === null) return;
+              setLastError(null);
+              applyToolsList({ tools: items });
+            },
+          },
+        },
+      };
+      if (props.cache?.defaultTtlMs !== undefined) {
+        clientOptions.defaultCacheTtlMs = props.cache.defaultTtlMs;
+      }
+      const client = new Client(
+        {
+          name: "assistant-ui-mcp",
+          version: "0.0.0",
+        },
+        clientOptions,
+      );
+      if (props.elicitation !== false) {
+        client.setRequestHandler(
+          "elicitation/create",
+          (request: ElicitRequest, context): Promise<ElicitResult> => {
+            if (!isCurrentConnection(generation)) {
+              return Promise.resolve({ action: "cancel" });
+            }
+            if (!("requestedSchema" in request.params)) {
+              return Promise.resolve({ action: "cancel" });
+            }
+            const { message, requestedSchema } = request.params;
+
+            const id =
+              typeof crypto !== "undefined" && "randomUUID" in crypto
+                ? crypto.randomUUID()
+                : `mcp-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+            const promise = new Promise<ElicitResult>((resolve) => {
+              const onAbort = () => {
+                resolvePendingElicitation(id, { action: "cancel" });
+              };
+              elicitationResolversRef.current.set(id, {
+                resolve,
+                signal: context.signal,
+                onAbort,
+                requestedSchema,
+              });
+            });
+            setPendingElicitations((current) => [
+              ...current,
+              {
+                id,
+                message,
+                requestedSchema,
+              },
+            ]);
+            const entry = elicitationResolversRef.current.get(id);
+            if (entry) {
+              if (context.signal.aborted) {
+                entry.onAbort();
+              } else {
+                context.signal.addEventListener("abort", entry.onAbort, {
+                  once: true,
+                });
+              }
+            }
+            return promise;
+          },
+        );
+      }
       const startedAt = Date.now();
-      // SDK's StreamableHTTPClientTransport.sessionId is `string | undefined`
-      // but Transport.sessionId is declared `string?` — under
-      // exactOptionalPropertyTypes the SDK's own classes don't satisfy its
-      // Transport interface. Cast to bridge the gap.
       await withConnectionTimeout(
-        client.connect(transport as unknown as Transport),
+        client.connect(transport),
         "connecting",
         startedAt,
       );
@@ -186,26 +353,12 @@ const useMcpServerResource = (
       // post-connect failure leaves stale refs that `callTool()` would
       // happily walk into, producing confusing SDK errors instead of
       // "not connected".
-      const list = await withConnectionTimeout(
-        client.listTools(),
-        "listing tools",
-        startedAt,
-      );
-      if (!isCurrentConnection(generation)) return false;
+      const synced = await syncTools(client, generation, { startedAt });
+      if (!synced) return false;
 
       pendingTransportRef.current = null;
       clientRef.current = client;
       transportRef.current = transport;
-      setTools(
-        list.tools.map((t) => {
-          const info: MCPToolInfo = {
-            name: t.name,
-            inputSchema: t.inputSchema,
-          };
-          if (t.description !== undefined) info.description = t.description;
-          return info;
-        }),
-      );
       setConnectionState("connected");
       return true;
     },
@@ -246,6 +399,7 @@ const useMcpServerResource = (
         transportRef.current = transport;
         setConnectionState("authRequired");
       } else {
+        cancelPendingElicitations();
         if (transport) {
           pendingTransportRef.current = null;
           await closeQueuedTransports([transport]);
@@ -268,6 +422,7 @@ const useMcpServerResource = (
 
   const doCompleteAuth = useEffectEvent(async (callbackUrl: string) => {
     const generation = ++connectionGenerationRef.current;
+    cancelPendingElicitations();
     await closePendingTransport();
     if (!isCurrentConnection(generation)) throw createInterruptedAuthError();
 
@@ -362,6 +517,7 @@ const useMcpServerResource = (
       lastError,
       tools,
       authorizationUrl,
+      pendingElicitations,
     }),
     [
       props.id,
@@ -373,6 +529,7 @@ const useMcpServerResource = (
       lastError,
       tools,
       authorizationUrl,
+      pendingElicitations,
     ],
   );
 
@@ -410,6 +567,57 @@ const useMcpServerResource = (
       return await client.readResource({ uri });
     },
     completeAuth: doCompleteAuth,
+    answerElicitation: (
+      id: string,
+      response: MCPElicitationResponse,
+    ): readonly { property: string; message: string }[] | undefined => {
+      if (response.action === "accept") {
+        const entry = elicitationResolversRef.current.get(id);
+        if (!entry) return;
+
+        if (
+          typeof response.content !== "object" ||
+          response.content === null ||
+          Array.isArray(response.content)
+        ) {
+          const errors = [
+            {
+              property: "content",
+              message: "Response content must be an object.",
+            },
+          ];
+          setPendingElicitationError(id, {
+            message: "Invalid elicitation content: content.",
+            properties: ["content"],
+          });
+          return errors;
+        }
+
+        const errors = validateElicitationContent(
+          entry.requestedSchema,
+          response.content,
+        );
+        if (errors.length > 0) {
+          const properties = [
+            ...new Set(errors.map((error) => error.property)),
+          ];
+          setPendingElicitationError(id, {
+            message: `Invalid elicitation content: ${properties.join(", ")}.`,
+            properties,
+          });
+          return errors;
+        }
+
+        const result: ElicitResult = {
+          action: "accept",
+          content: response.content as ElicitResult["content"],
+        };
+        resolvePendingElicitation(id, result);
+        return;
+      }
+
+      resolvePendingElicitation(id, { action: response.action });
+    },
   };
 };
 

package/src/resources/storage/McpLocalStorage.ts

@@ -2,7 +2,7 @@ import { resource } from "@assistant-ui/tap";
 import {
   OAuthClientInformationFullSchema,
   OAuthTokensSchema,
-} from "@modelcontextprotocol/sdk/shared/auth.js";
+} from "@modelcontextprotocol/core";
 import type { MCPAuthConfig, MCPCustomServerRecord } from "../../mcp-scope";
 import type { MCPPersistedAuthState } from "../../auth/types";
 import { assertValidServerId } from "../../utils/serverId";

package/src/resources/validateElicitationContent.test.ts

@@ -0,0 +1,123 @@
+// @vitest-environment node
+
+import { describe, expect, it } from "vitest";
+import { validateElicitationContent } from "./validateElicitationContent";
+
+describe("validateElicitationContent", () => {
+  it.each([
+    ["string", 1, "Expected a string."],
+    ["number", "1", "Expected a number."],
+    ["integer", "1", "Expected an integer."],
+    ["boolean", "true", "Expected a boolean."],
+  ])("rejects a %s type mismatch", (type, value, message) => {
+    expect(
+      validateElicitationContent(
+        {
+          type: "object",
+          properties: { value: { type } },
+        },
+        { value },
+      ),
+    ).toEqual([{ property: "value", message }]);
+  });
+
+  it("rejects a fractional integer", () => {
+    expect(
+      validateElicitationContent(
+        {
+          type: "object",
+          properties: { count: { type: "integer" } },
+        },
+        { count: 1.5 },
+      ),
+    ).toEqual([{ property: "count", message: "Expected an integer." }]);
+  });
+
+  it.each([
+    ["number", NaN, "Expected a number."],
+    ["number", Infinity, "Expected a number."],
+    ["number", -Infinity, "Expected a number."],
+    ["integer", NaN, "Expected an integer."],
+    ["integer", Infinity, "Expected an integer."],
+    ["integer", -Infinity, "Expected an integer."],
+  ])("rejects a non-finite %s", (type, value, message) => {
+    expect(
+      validateElicitationContent(
+        {
+          type: "object",
+          properties: { value: { type } },
+        },
+        { value },
+      ),
+    ).toEqual([{ property: "value", message }]);
+  });
+
+  it("rejects a value outside an enum", () => {
+    expect(
+      validateElicitationContent(
+        {
+          type: "object",
+          properties: { color: { enum: ["red", "blue"] } },
+        },
+        { color: "green" },
+      ),
+    ).toEqual([
+      {
+        property: "color",
+        message: "Must be one of the allowed values.",
+      },
+    ]);
+  });
+
+  it("rejects an absent required property", () => {
+    expect(
+      validateElicitationContent(
+        {
+          type: "object",
+          required: ["answer"],
+          properties: { answer: { type: "string" } },
+        },
+        {},
+      ),
+    ).toEqual([{ property: "answer", message: "This property is required." }]);
+  });
+
+  it("accepts an empty string as a present required property", () => {
+    expect(
+      validateElicitationContent(
+        {
+          type: "object",
+          required: ["answer"],
+          properties: { answer: { type: "string" } },
+        },
+        { answer: "" },
+      ),
+    ).toEqual([]);
+  });
+
+  it("allows unknown content properties", () => {
+    expect(
+      validateElicitationContent(
+        {
+          type: "object",
+          properties: { answer: { type: "string" } },
+        },
+        { extra: true },
+      ),
+    ).toEqual([]);
+  });
+
+  it("leaves constraints beyond the flat validation subset for the server", () => {
+    expect(
+      validateElicitationContent(
+        {
+          type: "object",
+          properties: {
+            answer: { type: "string", minLength: 5, format: "email" },
+          },
+        },
+        { answer: "x" },
+      ),
+    ).toEqual([]);
+  });
+});

package/src/resources/validateElicitationContent.ts

@@ -0,0 +1,79 @@
+type ValidationError = {
+  property: string;
+  message: string;
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+const getOwn = (value: Record<string, unknown>, key: string): unknown =>
+  Object.hasOwn(value, key) ? value[key] : undefined;
+
+const matchesType = (type: unknown, value: unknown): boolean => {
+  switch (type) {
+    case "string":
+      return typeof value === "string";
+    case "number":
+      return typeof value === "number" && Number.isFinite(value);
+    case "integer":
+      return (
+        typeof value === "number" &&
+        Number.isFinite(value) &&
+        Number.isInteger(value)
+      );
+    case "boolean":
+      return typeof value === "boolean";
+    default:
+      return true;
+  }
+};
+
+const typeMessage = (type: string) =>
+  `Expected ${type === "integer" ? "an" : "a"} ${type}.`;
+
+export const validateElicitationContent = (
+  requestedSchema: unknown,
+  content: Record<string, unknown>,
+): readonly ValidationError[] => {
+  if (!isRecord(requestedSchema)) return [];
+
+  const errors: ValidationError[] = [];
+  const properties = getOwn(requestedSchema, "properties");
+  if (isRecord(properties)) {
+    for (const property of Object.keys(properties)) {
+      if (!Object.hasOwn(content, property)) continue;
+
+      const schema = properties[property];
+      if (!isRecord(schema)) continue;
+
+      const value = content[property];
+      const type = getOwn(schema, "type");
+      if (typeof type === "string" && !matchesType(type, value)) {
+        errors.push({ property, message: typeMessage(type) });
+      }
+
+      const values = getOwn(schema, "enum");
+      if (
+        Array.isArray(values) &&
+        !values.some((enumValue) => Object.is(enumValue, value))
+      ) {
+        errors.push({
+          property,
+          message: "Must be one of the allowed values.",
+        });
+      }
+    }
+  }
+
+  const required = getOwn(requestedSchema, "required");
+  if (Array.isArray(required)) {
+    for (const property of required) {
+      if (typeof property !== "string" || Object.hasOwn(content, property)) {
+        continue;
+      }
+      errors.push({ property, message: "This property is required." });
+    }
+  }
+
+  return errors;
+};