@assistant-ui/react-mcp 0.0.0

package/src/primitives/addForm/McpAddFormAuthSelect.tsx

@@ -0,0 +1,55 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+} from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAddForm, type AddFormAuthType } from "./context";
+
+const AUTH_TYPES: ReadonlySet<AddFormAuthType> = new Set([
+  "none",
+  "bearer",
+  "oauth",
+]);
+
+function asAuthType(value: string): AddFormAuthType | null {
+  return (AUTH_TYPES as ReadonlySet<string>).has(value)
+    ? (value as AddFormAuthType)
+    : null;
+}
+
+export namespace McpAddFormPrimitiveAuthSelect {
+  export type Element = ComponentRef<typeof Primitive.select>;
+  export type Props = Omit<
+    ComponentPropsWithoutRef<typeof Primitive.select>,
+    "value" | "onChange"
+  >;
+}
+
+export const McpAddFormPrimitiveAuthSelect = forwardRef<
+  McpAddFormPrimitiveAuthSelect.Element,
+  McpAddFormPrimitiveAuthSelect.Props
+>((props, ref) => {
+  const { state, setField } = useAddForm();
+  return (
+    <Primitive.select
+      {...props}
+      ref={ref}
+      value={state.authType}
+      onChange={(e) => {
+        const next = asAuthType(e.target.value);
+        if (next) setField("authType", next);
+      }}
+    >
+      {props.children ?? (
+        <>
+          <option value="oauth">OAuth</option>
+          <option value="bearer">Bearer token</option>
+          <option value="none">None</option>
+        </>
+      )}
+    </Primitive.select>
+  );
+});
+
+McpAddFormPrimitiveAuthSelect.displayName = "McpAddFormPrimitive.AuthSelect";

package/src/primitives/addForm/McpAddFormCancel.tsx

@@ -0,0 +1,33 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+} from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAddForm } from "./context";
+
+export namespace McpAddFormPrimitiveCancel {
+  export type Element = ComponentRef<typeof Primitive.button>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.button>;
+}
+
+export const McpAddFormPrimitiveCancel = forwardRef<
+  McpAddFormPrimitiveCancel.Element,
+  McpAddFormPrimitiveCancel.Props
+>((props, ref) => {
+  const { cancel } = useAddForm();
+  return (
+    <Primitive.button
+      {...props}
+      type="button"
+      ref={ref}
+      onClick={(e) => {
+        props.onClick?.(e);
+        if (e.defaultPrevented) return;
+        cancel();
+      }}
+    />
+  );
+});
+
+McpAddFormPrimitiveCancel.displayName = "McpAddFormPrimitive.Cancel";

package/src/primitives/addForm/McpAddFormError.tsx

@@ -0,0 +1,27 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+} from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAddForm } from "./context";
+
+export namespace McpAddFormPrimitiveError {
+  export type Element = ComponentRef<typeof Primitive.div>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.div>;
+}
+
+export const McpAddFormPrimitiveError = forwardRef<
+  McpAddFormPrimitiveError.Element,
+  McpAddFormPrimitiveError.Props
+>((props, ref) => {
+  const { state } = useAddForm();
+  if (!state.error) return null;
+  return (
+    <Primitive.div {...props} ref={ref}>
+      {props.children ?? state.error}
+    </Primitive.div>
+  );
+});
+
+McpAddFormPrimitiveError.displayName = "McpAddFormPrimitive.Error";

package/src/primitives/addForm/McpAddFormNameField.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 McpAddFormPrimitiveNameField {
+  export type Element = ComponentRef<typeof Primitive.input>;
+  export type Props = Omit<
+    ComponentPropsWithoutRef<typeof Primitive.input>,
+    "value" | "onChange" | "type"
+  >;
+}
+
+export const McpAddFormPrimitiveNameField = forwardRef<
+  McpAddFormPrimitiveNameField.Element,
+  McpAddFormPrimitiveNameField.Props
+>((props, ref) => {
+  const { state, setField } = useAddForm();
+  return (
+    <Primitive.input
+      type="text"
+      placeholder="Name"
+      {...props}
+      ref={ref}
+      value={state.name}
+      onChange={(e) => setField("name", e.target.value)}
+    />
+  );
+});
+
+McpAddFormPrimitiveNameField.displayName = "McpAddFormPrimitive.NameField";

package/src/primitives/addForm/McpAddFormRoot.tsx

@@ -0,0 +1,141 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  type FormEventHandler,
+  forwardRef,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAui } from "@assistant-ui/store";
+import { AddFormContext, type AddFormState } from "./context";
+import type { MCPAuthConfig } from "../../mcp-scope";
+
+const INITIAL: AddFormState = {
+  name: "",
+  url: "",
+  authType: "oauth",
+  bearerToken: "",
+  scopes: "",
+  submitting: false,
+  error: null,
+};
+
+function validateUrl(raw: string): { url: string } | { error: string } {
+  const trimmed = raw.trim();
+  if (!trimmed) return { error: "URL is required" };
+  let parsed: URL;
+  try {
+    parsed = new URL(trimmed);
+  } catch {
+    return { error: "Invalid URL" };
+  }
+  if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+    return { error: "URL must be http(s)" };
+  }
+  return { url: trimmed };
+}
+
+export namespace McpAddFormPrimitiveRoot {
+  export type Element = ComponentRef<typeof Primitive.form>;
+  export type Props = Omit<
+    ComponentPropsWithoutRef<typeof Primitive.form>,
+    "onSubmit"
+  > & {
+    onSubmitted?: (id: string) => void;
+    onCancel?: () => void;
+  };
+}
+
+export const McpAddFormPrimitiveRoot = forwardRef<
+  McpAddFormPrimitiveRoot.Element,
+  McpAddFormPrimitiveRoot.Props
+>(({ onSubmitted, onCancel, ...props }, ref) => {
+  const aui = useAui();
+  const [state, setState] = useState<AddFormState>(INITIAL);
+
+  const setField = useCallback(
+    <K extends keyof AddFormState>(key: K, value: AddFormState[K]) => {
+      setState((prev) => ({ ...prev, [key]: value }));
+    },
+    [],
+  );
+
+  const reset = useCallback(() => setState(INITIAL), []);
+
+  const buildAuth = useCallback((): MCPAuthConfig => {
+    switch (state.authType) {
+      case "none":
+        return { type: "none" };
+      case "bearer":
+        return { type: "bearer", token: state.bearerToken || undefined };
+      case "oauth": {
+        const scopeList = state.scopes
+          .split(/[\s,]+/)
+          .map((s) => s.trim())
+          .filter(Boolean);
+        return {
+          type: "oauth",
+          scopes: scopeList.length > 0 ? scopeList : undefined,
+        };
+      }
+    }
+  }, [state.authType, state.bearerToken, state.scopes]);
+
+  const submit = useCallback(async () => {
+    if (state.submitting) return;
+    if (!state.name.trim()) {
+      setState((p) => ({ ...p, error: "Name is required" }));
+      return;
+    }
+    if (state.authType === "bearer" && !state.bearerToken.trim()) {
+      setState((p) => ({ ...p, error: "Bearer token is required" }));
+      return;
+    }
+    const urlResult = validateUrl(state.url);
+    if ("error" in urlResult) {
+      setState((p) => ({ ...p, error: urlResult.error }));
+      return;
+    }
+    setState((p) => ({ ...p, submitting: true, error: null }));
+    try {
+      const id = await aui.mcp().addCustomServer({
+        name: state.name.trim(),
+        url: urlResult.url,
+        auth: buildAuth(),
+      });
+      setState(INITIAL);
+      onSubmitted?.(id);
+    } catch (err) {
+      setState((p) => ({
+        ...p,
+        submitting: false,
+        error: err instanceof Error ? err.message : String(err),
+      }));
+    }
+  }, [aui, buildAuth, onSubmitted, state]);
+
+  const cancel = useCallback(() => {
+    setState(INITIAL);
+    onCancel?.();
+  }, [onCancel]);
+
+  const value = useMemo(
+    () => ({ state, setField, reset, submit, cancel }),
+    [state, setField, reset, submit, cancel],
+  );
+
+  const onFormSubmit: FormEventHandler<HTMLFormElement> = (e) => {
+    e.preventDefault();
+    void submit();
+  };
+
+  return (
+    <AddFormContext.Provider value={value}>
+      <Primitive.form {...props} ref={ref} onSubmit={onFormSubmit} />
+    </AddFormContext.Provider>
+  );
+});
+
+McpAddFormPrimitiveRoot.displayName = "McpAddFormPrimitive.Root";

package/src/primitives/addForm/McpAddFormSubmit.tsx

@@ -0,0 +1,30 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+} from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAddForm } from "./context";
+
+export namespace McpAddFormPrimitiveSubmit {
+  export type Element = ComponentRef<typeof Primitive.button>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.button>;
+}
+
+export const McpAddFormPrimitiveSubmit = forwardRef<
+  McpAddFormPrimitiveSubmit.Element,
+  McpAddFormPrimitiveSubmit.Props
+>((props, ref) => {
+  const { state } = useAddForm();
+  return (
+    <Primitive.button
+      type="submit"
+      {...props}
+      ref={ref}
+      disabled={props.disabled || state.submitting}
+      data-submitting={state.submitting || undefined}
+    />
+  );
+});
+
+McpAddFormPrimitiveSubmit.displayName = "McpAddFormPrimitive.Submit";

package/src/primitives/addForm/McpAddFormUrlField.tsx

@@ -0,0 +1,35 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+} from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAddForm } from "./context";
+
+export namespace McpAddFormPrimitiveUrlField {
+  export type Element = ComponentRef<typeof Primitive.input>;
+  export type Props = Omit<
+    ComponentPropsWithoutRef<typeof Primitive.input>,
+    "value" | "onChange" | "type"
+  >;
+}
+
+export const McpAddFormPrimitiveUrlField = forwardRef<
+  McpAddFormPrimitiveUrlField.Element,
+  McpAddFormPrimitiveUrlField.Props
+>((props, ref) => {
+  const { state, setField } = useAddForm();
+  return (
+    <Primitive.input
+      type="url"
+      inputMode="url"
+      placeholder="https://example.com/mcp"
+      {...props}
+      ref={ref}
+      value={state.url}
+      onChange={(e) => setField("url", e.target.value)}
+    />
+  );
+});
+
+McpAddFormPrimitiveUrlField.displayName = "McpAddFormPrimitive.UrlField";

package/src/primitives/addForm/context.tsx

@@ -0,0 +1,37 @@
+import { createContext, useContext } from "react";
+import type { MCPAuthConfig } from "../../mcp-scope";
+
+export type AddFormAuthType = MCPAuthConfig["type"];
+
+export type AddFormState = {
+  name: string;
+  url: string;
+  authType: AddFormAuthType;
+  bearerToken: string;
+  scopes: string;
+  submitting: boolean;
+  error: string | null;
+};
+
+export type AddFormContextValue = {
+  state: AddFormState;
+  setField: <K extends keyof AddFormState>(
+    key: K,
+    value: AddFormState[K],
+  ) => void;
+  reset: () => void;
+  submit: () => Promise<void>;
+  cancel: () => void;
+};
+
+export const AddFormContext = createContext<AddFormContextValue | null>(null);
+
+export const useAddForm = (): AddFormContextValue => {
+  const ctx = useContext(AddFormContext);
+  if (!ctx) {
+    throw new Error(
+      "McpAddFormPrimitive.* must be used inside McpAddFormPrimitive.Root",
+    );
+  }
+  return ctx;
+};

package/src/primitives/addForm.ts

@@ -0,0 +1,8 @@
+export { McpAddFormPrimitiveRoot as Root } from "./addForm/McpAddFormRoot";
+export { McpAddFormPrimitiveNameField as NameField } from "./addForm/McpAddFormNameField";
+export { McpAddFormPrimitiveUrlField as UrlField } from "./addForm/McpAddFormUrlField";
+export { McpAddFormPrimitiveAuthSelect as AuthSelect } from "./addForm/McpAddFormAuthSelect";
+export { McpAddFormPrimitiveAuthFields as AuthFields } from "./addForm/McpAddFormAuthFields";
+export { McpAddFormPrimitiveSubmit as Submit } from "./addForm/McpAddFormSubmit";
+export { McpAddFormPrimitiveCancel as Cancel } from "./addForm/McpAddFormCancel";
+export { McpAddFormPrimitiveError as Error } from "./addForm/McpAddFormError";

package/src/primitives/manager/McpManagerAddCustomTrigger.tsx

@@ -0,0 +1,21 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+} from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+
+export namespace McpManagerPrimitiveAddCustomTrigger {
+  export type Element = ComponentRef<typeof Primitive.button>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.button>;
+}
+
+export const McpManagerPrimitiveAddCustomTrigger = forwardRef<
+  McpManagerPrimitiveAddCustomTrigger.Element,
+  McpManagerPrimitiveAddCustomTrigger.Props
+>((props, ref) => {
+  return <Primitive.button {...props} type="button" ref={ref} />;
+});
+
+McpManagerPrimitiveAddCustomTrigger.displayName =
+  "McpManagerPrimitive.AddCustomTrigger";

package/src/primitives/manager/McpManagerConnectors.tsx

@@ -0,0 +1,76 @@
+import { type FC, type ReactNode, memo, useMemo } from "react";
+import { RenderChildrenWithAccessor, useAuiState } from "@assistant-ui/store";
+import { McpConnectorByIndexProvider } from "../../context/McpConnectorByIndexProvider";
+import type { MCPServerState } from "../../mcp-scope";
+
+// ASCII Unit Separator — never appears in MCP connector ids (uuids, urls,
+// app-provided strings).
+const SEP = "\x1f";
+
+export namespace McpManagerPrimitiveConnectors {
+  export type Props = {
+    /**
+     * Render function called once per connector. Receives a lazy `server`
+     * accessor — reading it inside the render function subscribes to that
+     * connector's state.
+     */
+    children: (value: { server: MCPServerState }) => ReactNode;
+  };
+}
+
+const McpManagerPrimitiveConnectorsInner: FC<{
+  children: (value: { server: MCPServerState }) => ReactNode;
+}> = ({ children }) => {
+  // Subscribe to the connector id list, joined to a primitive so identity
+  // is stable when the list hasn't changed. Re-renders on add/remove/reorder
+  // but not on per-item state changes.
+  const idsJoined = useAuiState((s) =>
+    s.mcp.connectors.map((c) => c.id).join(SEP),
+  );
+  const ids = useMemo(
+    () => (idsJoined ? idsJoined.split(SEP) : []),
+    [idsJoined],
+  );
+
+  return useMemo(() => {
+    if (ids.length === 0) return null;
+    return ids.map((id, index) => (
+      <McpConnectorByIndexProvider key={id} index={index}>
+        <RenderChildrenWithAccessor
+          getItemState={(aui) => aui.mcp().connector({ index }).getState()}
+        >
+          {(getItem) =>
+            children({
+              get server() {
+                return getItem();
+              },
+            })
+          }
+        </RenderChildrenWithAccessor>
+      </McpConnectorByIndexProvider>
+    ));
+  }, [ids, children]);
+};
+
+/**
+ * Renders all connectors declared on `McpManagerResource`.
+ *
+ * @example
+ * ```tsx
+ * <McpManagerPrimitive.Connectors>
+ *   {({ server }) => (
+ *     <McpServerPrimitive.Root>
+ *       <McpServerPrimitive.Name />
+ *       {server.connectionState === "error" && <p>{server.lastError?.message}</p>}
+ *     </McpServerPrimitive.Root>
+ *   )}
+ * </McpManagerPrimitive.Connectors>
+ * ```
+ */
+export const McpManagerPrimitiveConnectors: FC<McpManagerPrimitiveConnectors.Props> =
+  memo(
+    McpManagerPrimitiveConnectorsInner,
+    (prev, next) => prev.children === next.children,
+  );
+
+McpManagerPrimitiveConnectors.displayName = "McpManagerPrimitive.Connectors";

package/src/primitives/manager/McpManagerCustomServers.tsx

@@ -0,0 +1,72 @@
+import { type FC, type ReactNode, memo, useMemo } from "react";
+import { RenderChildrenWithAccessor, useAuiState } from "@assistant-ui/store";
+import { McpCustomServerByIndexProvider } from "../../context/McpCustomServerByIndexProvider";
+import type { MCPServerState } from "../../mcp-scope";
+
+const SEP = "\x1f";
+
+export namespace McpManagerPrimitiveCustomServers {
+  export type Props = {
+    /**
+     * Render function called once per custom server. Receives a lazy
+     * `server` accessor — reading it inside the render function subscribes
+     * to that server's state.
+     */
+    children: (value: { server: MCPServerState }) => ReactNode;
+  };
+}
+
+const McpManagerPrimitiveCustomServersInner: FC<{
+  children: (value: { server: MCPServerState }) => ReactNode;
+}> = ({ children }) => {
+  const idsJoined = useAuiState((s) =>
+    s.mcp.customServers.map((c) => c.id).join(SEP),
+  );
+  const ids = useMemo(
+    () => (idsJoined ? idsJoined.split(SEP) : []),
+    [idsJoined],
+  );
+
+  return useMemo(() => {
+    if (ids.length === 0) return null;
+    return ids.map((id, index) => (
+      <McpCustomServerByIndexProvider key={id} index={index}>
+        <RenderChildrenWithAccessor
+          getItemState={(aui) => aui.mcp().customServer({ index }).getState()}
+        >
+          {(getItem) =>
+            children({
+              get server() {
+                return getItem();
+              },
+            })
+          }
+        </RenderChildrenWithAccessor>
+      </McpCustomServerByIndexProvider>
+    ));
+  }, [ids, children]);
+};
+
+/**
+ * Renders all user-added custom servers persisted in storage.
+ *
+ * @example
+ * ```tsx
+ * <McpManagerPrimitive.CustomServers>
+ *   {() => (
+ *     <McpServerPrimitive.Root>
+ *       <McpServerPrimitive.Name />
+ *       <McpServerPrimitive.RemoveButton>Remove</McpServerPrimitive.RemoveButton>
+ *     </McpServerPrimitive.Root>
+ *   )}
+ * </McpManagerPrimitive.CustomServers>
+ * ```
+ */
+export const McpManagerPrimitiveCustomServers: FC<McpManagerPrimitiveCustomServers.Props> =
+  memo(
+    McpManagerPrimitiveCustomServersInner,
+    (prev, next) => prev.children === next.children,
+  );
+
+McpManagerPrimitiveCustomServers.displayName =
+  "McpManagerPrimitive.CustomServers";

package/src/primitives/manager/McpManagerRoot.tsx

@@ -0,0 +1,28 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+} from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAuiState } from "@assistant-ui/store";
+
+export namespace McpManagerPrimitiveRoot {
+  export type Element = ComponentRef<typeof Primitive.div>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.div>;
+}
+
+export const McpManagerPrimitiveRoot = forwardRef<
+  McpManagerPrimitiveRoot.Element,
+  McpManagerPrimitiveRoot.Props
+>((props, ref) => {
+  const isHydrated = useAuiState((s) => s.mcp.isHydrated);
+  return (
+    <Primitive.div
+      {...props}
+      ref={ref}
+      data-mcp-hydrated={isHydrated || undefined}
+    />
+  );
+});
+
+McpManagerPrimitiveRoot.displayName = "McpManagerPrimitive.Root";

package/src/primitives/manager.ts

@@ -0,0 +1,4 @@
+export { McpManagerPrimitiveRoot as Root } from "./manager/McpManagerRoot";
+export { McpManagerPrimitiveConnectors as Connectors } from "./manager/McpManagerConnectors";
+export { McpManagerPrimitiveCustomServers as CustomServers } from "./manager/McpManagerCustomServers";
+export { McpManagerPrimitiveAddCustomTrigger as AddCustomTrigger } from "./manager/McpManagerAddCustomTrigger";

package/src/primitives/server/McpServerConnectButton.tsx

@@ -0,0 +1,39 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+} from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export namespace McpServerPrimitiveConnectButton {
+  export type Element = ComponentRef<typeof Primitive.button>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.button>;
+}
+
+const CONNECTABLE = new Set(["disconnected", "error", "authRequired"]);
+
+export const McpServerPrimitiveConnectButton = forwardRef<
+  McpServerPrimitiveConnectButton.Element,
+  McpServerPrimitiveConnectButton.Props
+>((props, ref) => {
+  const state = useAuiState((s) => s.mcpServer.connectionState);
+  const aui = useAui();
+  if (!CONNECTABLE.has(state)) return null;
+  return (
+    <Primitive.button
+      {...props}
+      type="button"
+      ref={ref}
+      data-state-hint={state === "authRequired" ? "auth-required" : undefined}
+      onClick={(e) => {
+        props.onClick?.(e);
+        if (e.defaultPrevented) return;
+        void aui.mcpServer().connect();
+      }}
+    />
+  );
+});
+
+McpServerPrimitiveConnectButton.displayName =
+  "McpServerPrimitive.ConnectButton";