@assistant-ui/react-mcp 0.1.18 → 0.1.19

package/src/primitives/addForm/McpAddFormAuthFields.tsx

@@ -1,11 +1,14 @@
 import type { FC } from "react";
+import { McpAddFormPrimitiveBearerTokenField } from "./McpAddFormBearerTokenField";
+import { McpAddFormPrimitiveScopesField } from "./McpAddFormScopesField";
 import { type AddFormAuthType, useAddForm } from "./context";
 
 export namespace McpAddFormPrimitiveAuthFields {
   export type Props = {
     /**
      * Optional render override. Receives the current auth type so apps can render
-     * fully custom inputs. Defaults to a minimal built-in for bearer / oauth.
+     * fully custom inputs, bound to the form through `BearerTokenField` and
+     * `ScopesField`. Defaults to a minimal built-in for bearer / oauth.
      */
     children?: FC<{ authType: AddFormAuthType }>;
   };
@@ -14,7 +17,7 @@ export namespace McpAddFormPrimitiveAuthFields {
 export const McpAddFormPrimitiveAuthFields: FC<
   McpAddFormPrimitiveAuthFields.Props
 > = ({ children }) => {
-  const { state, ids, setField } = useAddForm();
+  const { state, ids } = useAddForm();
 
   if (children) {
     const Render = children;
@@ -30,15 +33,8 @@ export const McpAddFormPrimitiveAuthFields: FC<
         >
           Bearer token
         </label>
-        <input
+        <McpAddFormPrimitiveBearerTokenField
           id={ids.bearerToken}
-          type="password"
-          value={state.bearerToken}
-          onChange={(e) => setField("bearerToken", e.target.value)}
-          aria-invalid={state.errorField === "bearerToken" ? true : undefined}
-          aria-describedby={
-            state.errorField === "bearerToken" ? ids.error : undefined
-          }
           data-mcp-auth-field="bearer-token"
         />
       </div>
@@ -51,12 +47,8 @@ export const McpAddFormPrimitiveAuthFields: FC<
         <label htmlFor={ids.scopes} data-mcp-auth-field-label="oauth-scopes">
           OAuth scopes
         </label>
-        <input
+        <McpAddFormPrimitiveScopesField
           id={ids.scopes}
-          type="text"
-          placeholder="Scopes (space-separated, optional)"
-          value={state.scopes}
-          onChange={(e) => setField("scopes", e.target.value)}
           data-mcp-auth-field="oauth-scopes"
         />
       </div>

package/src/primitives/addForm/McpAddFormBearerTokenField.tsx

@@ -0,0 +1,46 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+} from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAddForm } from "./context";
+
+export namespace McpAddFormPrimitiveBearerTokenField {
+  export type Element = ComponentRef<typeof Primitive.input>;
+  export type Props = Omit<
+    ComponentPropsWithoutRef<typeof Primitive.input>,
+    "value" | "onChange" | "type"
+  >;
+}
+
+export const McpAddFormPrimitiveBearerTokenField = forwardRef<
+  McpAddFormPrimitiveBearerTokenField.Element,
+  McpAddFormPrimitiveBearerTokenField.Props
+>((props, ref) => {
+  const { state, ids, setField } = useAddForm();
+  return (
+    <Primitive.input
+      type="password"
+      {...props}
+      aria-invalid={
+        props["aria-invalid"] ??
+        (state.errorField === "bearerToken" ? true : undefined)
+      }
+      aria-describedby={
+        [
+          props["aria-describedby"],
+          state.errorField === "bearerToken" ? ids.error : null,
+        ]
+          .filter(Boolean)
+          .join(" ") || undefined
+      }
+      ref={ref}
+      value={state.bearerToken}
+      onChange={(e) => setField("bearerToken", e.target.value)}
+    />
+  );
+});
+
+McpAddFormPrimitiveBearerTokenField.displayName =
+  "McpAddFormPrimitive.BearerTokenField";

package/src/primitives/addForm/McpAddFormRoot.test.tsx

@@ -7,6 +7,7 @@ import {
   screen,
   waitFor,
 } from "@testing-library/react";
+import type { ComponentProps } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 const mocks = vi.hoisted(() => ({
@@ -20,12 +21,18 @@ vi.mock("@assistant-ui/store", async (importOriginal) => ({
   }),
 }));
 
+import { McpAddFormPrimitiveAuthFields } from "./McpAddFormAuthFields";
+import { McpAddFormPrimitiveAuthSelect } from "./McpAddFormAuthSelect";
+import { McpAddFormPrimitiveBearerTokenField } from "./McpAddFormBearerTokenField";
 import { McpAddFormPrimitiveError } from "./McpAddFormError";
 import { McpAddFormPrimitiveNameField } from "./McpAddFormNameField";
 import { McpAddFormPrimitiveRoot } from "./McpAddFormRoot";
+import { McpAddFormPrimitiveScopesField } from "./McpAddFormScopesField";
 import { McpAddFormPrimitiveSubmit } from "./McpAddFormSubmit";
 import { McpAddFormPrimitiveUrlField } from "./McpAddFormUrlField";
 
+const CustomInput = (props: ComponentProps<"input">) => <input {...props} />;
+
 describe("McpAddFormPrimitiveRoot", () => {
   beforeEach(() => {
     mocks.addCustomServer.mockReset();
@@ -37,6 +44,64 @@ describe("McpAddFormPrimitiveRoot", () => {
     vi.restoreAllMocks();
   });
 
+  it.each([
+    [
+      "bearer",
+      McpAddFormPrimitiveBearerTokenField,
+      "secret",
+      { type: "bearer", token: "secret" },
+    ],
+    [
+      "oauth",
+      McpAddFormPrimitiveScopesField,
+      "read, write",
+      { type: "oauth", scopes: ["read", "write"] },
+    ],
+  ] as const)(
+    "submits a custom %s input bound through its field part",
+    async (authType, Field, value, auth) => {
+      render(
+        <McpAddFormPrimitiveRoot>
+          <McpAddFormPrimitiveNameField aria-label="Name" />
+          <McpAddFormPrimitiveUrlField aria-label="URL" />
+          <McpAddFormPrimitiveAuthSelect aria-label="Auth" />
+          <McpAddFormPrimitiveAuthFields>
+            {({ authType: current }) =>
+              current === authType ? (
+                <Field asChild>
+                  <CustomInput aria-label="Credential" />
+                </Field>
+              ) : null
+            }
+          </McpAddFormPrimitiveAuthFields>
+          <McpAddFormPrimitiveError />
+          <McpAddFormPrimitiveSubmit>Submit</McpAddFormPrimitiveSubmit>
+        </McpAddFormPrimitiveRoot>,
+      );
+
+      fireEvent.change(screen.getByLabelText("Name"), {
+        target: { value: "Docs" },
+      });
+      fireEvent.change(screen.getByLabelText("URL"), {
+        target: { value: "https://example.com/mcp" },
+      });
+      fireEvent.change(screen.getByLabelText("Auth"), {
+        target: { value: authType },
+      });
+      fireEvent.change(screen.getByLabelText("Credential"), {
+        target: { value },
+      });
+      fireEvent.click(screen.getByRole("button", { name: "Submit" }));
+
+      await waitFor(() => expect(mocks.addCustomServer).toHaveBeenCalledOnce());
+      expect(mocks.addCustomServer).toHaveBeenCalledWith({
+        name: "Docs",
+        url: "https://example.com/mcp",
+        auth,
+      });
+    },
+  );
+
   it.each(["throws", "rejects"] as const)(
     "does not turn a successful add into an error when onSubmitted %s",
     async (mode) => {

package/src/primitives/addForm/McpAddFormScopesField.tsx

@@ -0,0 +1,34 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+} from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAddForm } from "./context";
+
+export namespace McpAddFormPrimitiveScopesField {
+  export type Element = ComponentRef<typeof Primitive.input>;
+  export type Props = Omit<
+    ComponentPropsWithoutRef<typeof Primitive.input>,
+    "value" | "onChange" | "type"
+  >;
+}
+
+export const McpAddFormPrimitiveScopesField = forwardRef<
+  McpAddFormPrimitiveScopesField.Element,
+  McpAddFormPrimitiveScopesField.Props
+>((props, ref) => {
+  const { state, setField } = useAddForm();
+  return (
+    <Primitive.input
+      type="text"
+      placeholder="Scopes (space-separated, optional)"
+      {...props}
+      ref={ref}
+      value={state.scopes}
+      onChange={(e) => setField("scopes", e.target.value)}
+    />
+  );
+});
+
+McpAddFormPrimitiveScopesField.displayName = "McpAddFormPrimitive.ScopesField";

package/src/primitives/addForm.ts

@@ -3,6 +3,8 @@ export { McpAddFormPrimitiveNameField as NameField } from "./addForm/McpAddFormN
 export { McpAddFormPrimitiveUrlField as UrlField } from "./addForm/McpAddFormUrlField";
 export { McpAddFormPrimitiveAuthSelect as AuthSelect } from "./addForm/McpAddFormAuthSelect";
 export { McpAddFormPrimitiveAuthFields as AuthFields } from "./addForm/McpAddFormAuthFields";
+export { McpAddFormPrimitiveBearerTokenField as BearerTokenField } from "./addForm/McpAddFormBearerTokenField";
+export { McpAddFormPrimitiveScopesField as ScopesField } from "./addForm/McpAddFormScopesField";
 export { McpAddFormPrimitiveSubmit as Submit } from "./addForm/McpAddFormSubmit";
 export { McpAddFormPrimitiveCancel as Cancel } from "./addForm/McpAddFormCancel";
 export { McpAddFormPrimitiveError as Error } from "./addForm/McpAddFormError";

package/src/primitives/elicitation/prepareElicitationContent.ts

@@ -72,12 +72,14 @@ export const prepareElicitationContent = (
   const contentWithBooleanDefaults = {
     ...candidateContent,
     ...Object.fromEntries(
-      missingRequiredBooleans.map(({ property }) => [
-        property,
-        typeof properties[property].default === "boolean"
-          ? properties[property].default
-          : false,
-      ]),
+      missingRequiredBooleans.map(({ property }) => {
+        const schema = properties[property];
+        const defaultValue = isRecord(schema) ? schema.default : undefined;
+        return [
+          property,
+          typeof defaultValue === "boolean" ? defaultValue : false,
+        ];
+      }),
     ),
   };
   const validationErrors = validateElicitationContent(

package/src/resources/McpManagerResource.test.ts

@@ -92,6 +92,51 @@ describe("McpManagerResource server ids", () => {
     expect(() => assertUniqueServerIds(["docs", "linear"])).not.toThrow();
   });
 
+  it("keeps the first persisted custom server when ids are duplicated", async () => {
+    const docsServer: MCPCustomServerRecord = {
+      id: "docs",
+      name: "Docs",
+      url: "https://example.com/docs/mcp",
+      auth: { type: "none" },
+      createdAt: 1,
+    };
+    const saveCustomServers = vi.fn(async () => {});
+    const consoleError = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+    const root = mount(
+      [],
+      McpCustomStorage({
+        loadCustomServers: vi.fn(async () => [
+          docsServer,
+          { ...docsServer, name: "Duplicate Docs", createdAt: 2 },
+        ]),
+        saveCustomServers,
+        loadAuthState: vi.fn(async () => null),
+        saveAuthState: vi.fn(async () => {}),
+        clearAuthState: vi.fn(async () => {}),
+      }),
+    );
+
+    try {
+      await vi.waitFor(() =>
+        expect(root.getValue().getState().isHydrated).toBe(true),
+      );
+      expect(root.getValue().getState().customServers).toHaveLength(1);
+      expect(root.getValue().getState().customServers[0]).toMatchObject({
+        id: "docs",
+        name: "Docs",
+      });
+      expect(saveCustomServers).not.toHaveBeenCalled();
+      expect(consoleError).toHaveBeenCalledWith(
+        '[assistant-ui/react-mcp] ignored duplicate custom server id "docs" loaded from storage',
+      );
+    } finally {
+      consoleError.mockRestore();
+      root.unmount();
+    }
+  });
+
   it("passes connector cache configuration to its client", async () => {
     mocks.Client.mockClear();
     const root = mount([
@@ -374,6 +419,46 @@ describe("McpManagerResource storage failures", () => {
 });
 
 describe("McpManagerResource storage ordering", () => {
+  it("preserves a removal made before custom server hydration finishes", async () => {
+    const docsServer: MCPCustomServerRecord = {
+      id: "docs",
+      name: "Docs",
+      url: "https://example.com/docs/mcp",
+      auth: { type: "none" },
+      createdAt: 1,
+    };
+    let resolveLoad!: (records: MCPCustomServerRecord[]) => void;
+    const load = new Promise<MCPCustomServerRecord[]>((resolve) => {
+      resolveLoad = resolve;
+    });
+    const saveCustomServers = vi.fn(async () => {});
+    const root = mount(
+      [],
+      McpCustomStorage({
+        loadCustomServers: vi.fn(() => load),
+        saveCustomServers,
+        loadAuthState: vi.fn(async () => null),
+        saveAuthState: vi.fn(async () => {}),
+        clearAuthState: vi.fn(async () => {}),
+      }),
+    );
+
+    try {
+      await root.getValue().removeServer("docs");
+      resolveLoad([docsServer]);
+
+      await vi.waitFor(() =>
+        expect(root.getValue().getState().isHydrated).toBe(true),
+      );
+      expect(root.getValue().getState().customServers).toHaveLength(0);
+      await vi.waitFor(() =>
+        expect(saveCustomServers).toHaveBeenCalledWith([]),
+      );
+    } finally {
+      root.unmount();
+    }
+  });
+
   it("persists custom server updates in invocation order", async () => {
     let resolveFirstSave: (() => void) | undefined;
     const firstSave = new Promise<void>((resolve) => {

package/src/resources/McpManagerResource.ts

@@ -116,6 +116,20 @@ const holdCustomServerPersistence = (
   return release;
 };
 
+const deduplicateCustomServers = (records: MCPCustomServerRecord[]) => {
+  const seen = new Set<string>();
+  return records.filter((record) => {
+    if (seen.has(record.id)) {
+      console.error(
+        `[assistant-ui/react-mcp] ignored duplicate custom server id "${record.id}" loaded from storage`,
+      );
+      return false;
+    }
+    seen.add(record.id);
+    return true;
+  });
+};
+
 type McpCustomServersResourceProps = {
   storage: MCPStorage;
   scopeKey: string;
@@ -137,6 +151,7 @@ const useMcpCustomServersResource = ({
     "pending",
   );
   const hasPendingMutationRef = useRef(false);
+  const [removedBeforeHydration] = useState(() => new Set<string>());
   const reportedBlockedPersistenceRef = useRef(false);
 
   const hydrate = useEffectEvent(async (signal: { cancelled: boolean }) => {
@@ -151,7 +166,8 @@ const useMcpCustomServersResource = ({
 
     let records: Awaited<ReturnType<typeof storage.loadCustomServers>>;
     try {
-      records = await storage.loadCustomServers();
+      const loadedRecords = await storage.loadCustomServers();
+      records = deduplicateCustomServers(loadedRecords);
     } catch (error) {
       if (!signal.cancelled) {
         reportCustomStorageFailure("load", error);
@@ -164,16 +180,21 @@ const useMcpCustomServersResource = ({
       }
       return;
     }
-
     // Merge rather than replace so any addCustomServer calls that
     // happened before hydration resolved aren't silently overwritten.
     // Persisted order wins; pre-hydration locals append.
     const hadPendingMutation = hasPendingMutationRef.current;
+    const hydratedRecords = records.filter(
+      (record) => !removedBeforeHydration.has(record.id),
+    );
     const mergedRecords = (() => {
       const prev = customServersRef.current;
-      if (prev.length === 0) return records;
-      const persistedIds = new Set(records.map((r) => r.id));
-      return [...records, ...prev.filter((r) => !persistedIds.has(r.id))];
+      if (prev.length === 0) return hydratedRecords;
+      const persistedIds = new Set(hydratedRecords.map((r) => r.id));
+      return [
+        ...hydratedRecords,
+        ...prev.filter((r) => !persistedIds.has(r.id)),
+      ];
     })();
     customServersRef.current = mergedRecords;
     hydrationStateRef.current = "succeeded";
@@ -232,7 +253,22 @@ const useMcpCustomServersResource = ({
     [persistenceQueues, scopeKey, storage],
   );
 
-  return { customServers, isHydrated, updateCustomServers };
+  const removeCustomServer = useCallback(
+    (id: string) => {
+      if (hydrationStateRef.current === "pending") {
+        removedBeforeHydration.add(id);
+      }
+      updateCustomServers((prev) => prev.filter((record) => record.id !== id));
+    },
+    [removedBeforeHydration, updateCustomServers],
+  );
+
+  return {
+    customServers,
+    isHydrated,
+    updateCustomServers,
+    removeCustomServer,
+  };
 };
 
 const McpCustomServersResource = resource(useMcpCustomServersResource);
@@ -252,16 +288,17 @@ const useMcpManagerResource = (
   );
   const storageScopeKey =
     storage.scopeId === undefined ? "unscoped" : `scoped:${storage.scopeId}`;
-  const { customServers, isHydrated, updateCustomServers } = useResource(
-    withKey(
-      storageScopeKey,
-      McpCustomServersResource({
-        storage,
-        scopeKey: storageScopeKey,
-        persistenceQueues,
-      }),
-    ),
-  );
+  const { customServers, isHydrated, updateCustomServers, removeCustomServer } =
+    useResource(
+      withKey(
+        storageScopeKey,
+        McpCustomServersResource({
+          storage,
+          scopeKey: storageScopeKey,
+          persistenceQueues,
+        }),
+      ),
+    );
 
   const serverElements = useMemo(() => {
     assertUniqueServerIds([
@@ -313,9 +350,7 @@ const useMcpManagerResource = (
                 ? { elicitation: s.elicitation }
                 : {}),
               onRemove: async () => {
-                updateCustomServers((prev) =>
-                  prev.filter((record) => record.id !== s.id),
-                );
+                removeCustomServer(s.id);
               },
             },
             () =>
@@ -332,7 +367,7 @@ const useMcpManagerResource = (
     redirectUri,
     autoConnect,
     connectionTimeout,
-    updateCustomServers,
+    removeCustomServer,
     persistenceQueues,
     storageScopeKey,
   ]);
@@ -450,9 +485,7 @@ const useMcpManagerResource = (
         );
         try {
           await clearOAuthProviderAuthState(storage, id);
-          updateCustomServers((prev) =>
-            prev.filter((record) => record.id !== id),
-          );
+          removeCustomServer(id);
         } catch (error) {
           releasePersistence();
           throw error;

package/src/resources/McpServerResource.test.ts

@@ -113,8 +113,8 @@ const requestElicitation = (
   client: any,
   message: string,
   requestedSchema: unknown,
-  context: { signal: AbortSignal } = {
-    signal: new AbortController().signal,
+  context: { mcpReq: { signal: AbortSignal } } = {
+    mcpReq: { signal: new AbortController().signal },
   },
 ) => {
   const handler = client.requestHandlers.get("elicitation/create");
@@ -156,7 +156,6 @@ const mount = (
     cache?: { readonly defaultTtlMs?: number } | undefined;
     elicitation?: boolean | undefined;
     kind?: "connector" | "custom" | undefined;
-    storage?: MCPStorage | undefined;
     onRemove?: (() => Promise<void>) | undefined;
   },
   onMount?: (server: ClientOutput<"mcpServer">) => void,
@@ -292,7 +291,9 @@ describe("McpServerResource automatic authentication", () => {
     });
 
     try {
-      await waitFor(() => storage.loadAuthState.mock.calls.length > 0);
+      await waitFor(
+        () => vi.mocked(storage.loadAuthState).mock.calls.length > 0,
+      );
       await flushMacrotask();
 
       expect(root.getValue().getState()).toMatchObject({
@@ -338,7 +339,9 @@ describe("McpServerResource automatic authentication", () => {
     });
 
     try {
-      await waitFor(() => storage.loadAuthState.mock.calls.length > 0);
+      await waitFor(
+        () => vi.mocked(storage.loadAuthState).mock.calls.length > 0,
+      );
       await flushMacrotask();
 
       expect(root.getValue().getState()).toMatchObject({
@@ -1474,7 +1477,7 @@ describe("McpServerResource elicitation", () => {
           type: "object",
           properties: {},
         },
-        { signal: controller.signal },
+        { mcpReq: { signal: controller.signal } },
       );
       await waitForResourceUpdate(
         () => root.getValue().getState().pendingElicitations.length === 1,

package/src/resources/McpServerResource.ts

@@ -380,7 +380,7 @@ const useMcpServerResourceInstance = (
               };
               elicitationResolversRef.current.set(id, {
                 resolve,
-                signal: context.signal,
+                signal: context.mcpReq.signal,
                 onAbort,
                 requestedSchema,
               });
@@ -395,10 +395,10 @@ const useMcpServerResourceInstance = (
             ]);
             const entry = elicitationResolversRef.current.get(id);
             if (entry) {
-              if (context.signal.aborted) {
+              if (context.mcpReq.signal.aborted) {
                 entry.onAbort();
               } else {
-                context.signal.addEventListener("abort", entry.onAbort, {
+                context.mcpReq.signal.addEventListener("abort", entry.onAbort, {
                   once: true,
                 });
               }
@@ -712,7 +712,7 @@ const useMcpServerResourceInstance = (
     ): readonly { property: string; message: string }[] | undefined => {
       if (response.action === "accept") {
         const entry = elicitationResolversRef.current.get(id);
-        if (!entry) return;
+        if (!entry) return undefined;
 
         if (
           typeof response.content !== "object" ||
@@ -752,10 +752,11 @@ const useMcpServerResourceInstance = (
           content: response.content as ElicitResult["content"],
         };
         resolvePendingElicitation(id, result);
-        return;
+        return undefined;
       }
 
       resolvePendingElicitation(id, { action: response.action });
+      return undefined;
     },
   };
 };