@assistant-ui/react-mcp 0.1.17 → 0.1.19

package/src/primitives/addForm/McpAddFormRoot.tsx

@@ -4,12 +4,17 @@ import {
   type FormEventHandler,
   forwardRef,
   useCallback,
+  useId,
   useMemo,
   useState,
 } from "react";
 import { Primitive } from "@radix-ui/react-primitive";
 import { useAui } from "@assistant-ui/store";
-import { AddFormContext, type AddFormState } from "./context";
+import {
+  AddFormContext,
+  type AddFormFieldIds,
+  type AddFormState,
+} from "./context";
 import type { MCPAuthConfig } from "../../mcp-scope";
 import { invokeMcpCallback } from "../../utils/invokeMcpCallback";
 
@@ -21,6 +26,7 @@ const INITIAL: AddFormState = {
   scopes: "",
   submitting: false,
   error: null,
+  errorField: null,
 };
 
 function validateUrl(raw: string): { url: string } | { error: string } {
@@ -54,11 +60,30 @@ export const McpAddFormPrimitiveRoot = forwardRef<
   McpAddFormPrimitiveRoot.Props
 >(({ onSubmitted, onCancel, ...props }, ref) => {
   const aui = useAui();
+  const formId = useId();
   const [state, setState] = useState<AddFormState>(INITIAL);
+  const ids = useMemo<AddFormFieldIds>(
+    () => ({
+      bearerToken: `${formId}-bearer-token`,
+      scopes: `${formId}-oauth-scopes`,
+      error: `${formId}-error`,
+    }),
+    [formId],
+  );
 
   const setField = useCallback(
     <K extends keyof AddFormState>(key: K, value: AddFormState[K]) => {
-      setState((prev) => ({ ...prev, [key]: value }));
+      setState((prev) => {
+        const clearsError =
+          prev.errorField === "form" ||
+          prev.errorField === key ||
+          (key === "authType" && prev.errorField === "bearerToken");
+        return {
+          ...prev,
+          [key]: value,
+          ...(clearsError ? { error: null, errorField: null } : {}),
+        };
+      });
     },
     [],
   );
@@ -87,19 +112,36 @@ export const McpAddFormPrimitiveRoot = forwardRef<
   const submit = useCallback(async () => {
     if (state.submitting) return;
     if (!state.name.trim()) {
-      setState((p) => ({ ...p, error: "Name is required" }));
+      setState((p) => ({
+        ...p,
+        error: "Name is required",
+        errorField: "name",
+      }));
       return;
     }
     if (state.authType === "bearer" && !state.bearerToken.trim()) {
-      setState((p) => ({ ...p, error: "Bearer token is required" }));
+      setState((p) => ({
+        ...p,
+        error: "Bearer token is required",
+        errorField: "bearerToken",
+      }));
       return;
     }
     const urlResult = validateUrl(state.url);
     if ("error" in urlResult) {
-      setState((p) => ({ ...p, error: urlResult.error }));
+      setState((p) => ({
+        ...p,
+        error: urlResult.error,
+        errorField: "url",
+      }));
       return;
     }
-    setState((p) => ({ ...p, submitting: true, error: null }));
+    setState((p) => ({
+      ...p,
+      submitting: true,
+      error: null,
+      errorField: null,
+    }));
     try {
       const id = await aui.mcp.addCustomServer({
         name: state.name.trim(),
@@ -113,6 +155,7 @@ export const McpAddFormPrimitiveRoot = forwardRef<
         ...p,
         submitting: false,
         error: err instanceof Error ? err.message : String(err),
+        errorField: "form",
       }));
     }
   }, [aui, buildAuth, onSubmitted, state]);
@@ -123,8 +166,8 @@ export const McpAddFormPrimitiveRoot = forwardRef<
   }, [onCancel]);
 
   const value = useMemo(
-    () => ({ state, setField, reset, submit, cancel }),
-    [state, setField, reset, submit, cancel],
+    () => ({ state, ids, setField, reset, submit, cancel }),
+    [state, ids, setField, reset, submit, cancel],
   );
 
   const onFormSubmit: FormEventHandler<HTMLFormElement> = (e) => {

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/McpAddFormUrlField.tsx

@@ -18,13 +18,24 @@ export const McpAddFormPrimitiveUrlField = forwardRef<
   McpAddFormPrimitiveUrlField.Element,
   McpAddFormPrimitiveUrlField.Props
 >((props, ref) => {
-  const { state, setField } = useAddForm();
+  const { state, ids, setField } = useAddForm();
   return (
     <Primitive.input
       type="url"
       inputMode="url"
       placeholder="https://example.com/mcp"
       {...props}
+      aria-invalid={
+        props["aria-invalid"] ?? (state.errorField === "url" ? true : undefined)
+      }
+      aria-describedby={
+        [
+          props["aria-describedby"],
+          state.errorField === "url" ? ids.error : null,
+        ]
+          .filter(Boolean)
+          .join(" ") || undefined
+      }
       ref={ref}
       value={state.url}
       onChange={(e) => setField("url", e.target.value)}

package/src/primitives/addForm/context.tsx

@@ -3,6 +3,14 @@ import type { MCPAuthConfig } from "../../mcp-scope";
 
 export type AddFormAuthType = MCPAuthConfig["type"];
 
+export type AddFormErrorField = "name" | "url" | "bearerToken" | "form" | null;
+
+export type AddFormFieldIds = {
+  bearerToken: string;
+  scopes: string;
+  error: string;
+};
+
 export type AddFormState = {
   name: string;
   url: string;
@@ -11,10 +19,12 @@ export type AddFormState = {
   scopes: string;
   submitting: boolean;
   error: string | null;
+  errorField: AddFormErrorField;
 };
 
 export type AddFormContextValue = {
   state: AddFormState;
+  ids: AddFormFieldIds;
   setField: <K extends keyof AddFormState>(
     key: K,
     value: AddFormState[K],

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(