@assistant-ui/react-mcp 0.1.16 → 0.1.18

package/src/primitives/addForm/McpAddFormAuthFields.tsx

@@ -14,7 +14,7 @@ export namespace McpAddFormPrimitiveAuthFields {
 export const McpAddFormPrimitiveAuthFields: FC<
   McpAddFormPrimitiveAuthFields.Props
 > = ({ children }) => {
-  const { state, setField } = useAddForm();
+  const { state, ids, setField } = useAddForm();
 
   if (children) {
     const Render = children;
@@ -23,25 +23,43 @@ export const McpAddFormPrimitiveAuthFields: FC<
 
   if (state.authType === "bearer") {
     return (
-      <input
-        type="password"
-        placeholder="Bearer token"
-        value={state.bearerToken}
-        onChange={(e) => setField("bearerToken", e.target.value)}
-        data-mcp-auth-field="bearer-token"
-      />
+      <div>
+        <label
+          htmlFor={ids.bearerToken}
+          data-mcp-auth-field-label="bearer-token"
+        >
+          Bearer token
+        </label>
+        <input
+          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>
     );
   }
 
   if (state.authType === "oauth") {
     return (
-      <input
-        type="text"
-        placeholder="Scopes (space-separated, optional)"
-        value={state.scopes}
-        onChange={(e) => setField("scopes", e.target.value)}
-        data-mcp-auth-field="oauth-scopes"
-      />
+      <div>
+        <label htmlFor={ids.scopes} data-mcp-auth-field-label="oauth-scopes">
+          OAuth scopes
+        </label>
+        <input
+          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/McpAddFormError.tsx

@@ -2,6 +2,7 @@ import {
   type ComponentPropsWithoutRef,
   type ComponentRef,
   forwardRef,
+  isValidElement,
 } from "react";
 import { Primitive } from "@radix-ui/react-primitive";
 import { useAddForm } from "./context";
@@ -15,13 +16,26 @@ export const McpAddFormPrimitiveError = forwardRef<
   McpAddFormPrimitiveError.Element,
   McpAddFormPrimitiveError.Props
 >((props, ref) => {
-  const { state } = useAddForm();
+  const { state, ids } = useAddForm();
   if (!state.error) return null;
-  return (
-    <Primitive.div {...props} ref={ref}>
+  const childId =
+    props.asChild && isValidElement<{ id?: string }>(props.children)
+      ? props.children.props.id
+      : undefined;
+  const customId = childId ?? props.id;
+  const needsDescriptionWrapper =
+    customId !== undefined && customId !== ids.error;
+  const error = (
+    <Primitive.div
+      {...props}
+      id={needsDescriptionWrapper ? props.id : ids.error}
+      role={props.role ?? "alert"}
+      ref={ref}
+    >
       {props.children ?? state.error}
     </Primitive.div>
   );
+  return needsDescriptionWrapper ? <div id={ids.error}>{error}</div> : error;
 });
 
 McpAddFormPrimitiveError.displayName = "McpAddFormPrimitive.Error";

package/src/primitives/addForm/McpAddFormNameField.tsx

@@ -18,12 +18,24 @@ export const McpAddFormPrimitiveNameField = forwardRef<
   McpAddFormPrimitiveNameField.Element,
   McpAddFormPrimitiveNameField.Props
 >((props, ref) => {
-  const { state, setField } = useAddForm();
+  const { state, ids, setField } = useAddForm();
   return (
     <Primitive.input
       type="text"
       placeholder="Name"
       {...props}
+      aria-invalid={
+        props["aria-invalid"] ??
+        (state.errorField === "name" ? true : undefined)
+      }
+      aria-describedby={
+        [
+          props["aria-describedby"],
+          state.errorField === "name" ? ids.error : null,
+        ]
+          .filter(Boolean)
+          .join(" ") || undefined
+      }
       ref={ref}
       value={state.name}
       onChange={(e) => setField("name", e.target.value)}

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/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],