@mcp-b/react-components 0.6.3 → 0.6.5

package/dist/components/AgentChat.js

@@ -5,7 +5,7 @@ import { Context, ContextContent, ContextContentBody, ContextContentHeader, Cont
 import { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton } from "./Conversation.js";
 import { Message, MessageAction, MessageActions, MessageAttachment, MessageContent, MessageResponse } from "./Message.js";
 import { MenuGroup, MenuGroupLabel } from "./Menu.js";
-import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
+import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -107,7 +107,7 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 	const [skippedApprovalIds, setSkippedApprovalIds] = React.useState([]);
 	const pendingApprovals = getPendingToolApprovals(messages, { pausedExecutions: Boolean(executionApprovals) }).filter(({ part }) => {
 		if (part.state === "approval-requested" && !onApprovalResponse) return false;
-		const id = getApprovalRequestId(part);
+		const id = getApprovalStateKey(part);
 		return Boolean(id) && !skippedApprovalIds.includes(id);
 	});
 	const approvalsWired = Boolean(onApprovalResponse || executionApprovals);
@@ -117,8 +117,9 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 		if (permissionMode !== "bypass") return;
 		for (const { part } of pendingApprovals) {
 			const id = getApprovalRequestId(part);
-			if (!id || autoApprovedIds.current.has(id)) continue;
-			autoApprovedIds.current.add(id);
+			const key = getApprovalStateKey(part);
+			if (!id || !key || autoApprovedIds.current.has(key)) continue;
+			autoApprovedIds.current.add(key);
 			if (part.state === "approval-requested") onApprovalResponse?.({
 				id,
 				approved: true
@@ -195,7 +196,7 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 					onRespond: onApprovalResponse,
 					executionApprovals,
 					onSkip: () => {
-						const id = getApprovalRequestId(pendingApproval.part);
+						const id = getApprovalStateKey(pendingApproval.part);
 						if (id) setSkippedApprovalIds((previous) => [...previous, id]);
 					}
 				}) : /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/AgentConnection.js

@@ -3,7 +3,7 @@ import { y as LinkIcon } from "../icons-BCNawx-T.js";
 import { Popover } from "./Popover.js";
 import { Button } from "./Button.js";
 import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-BK0sOAbV.js";
-import { DCR_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS } from "../utils/mcp-server-catalog.js";
+import { DCR_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS, getMcpServerIconSrc } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/AgentConnection.tsx
@@ -192,26 +192,29 @@ function McpServerList({ heading, servers }) {
 function McpServerSetup({ setup }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "agent-connect__mcp-setup",
-		children: [/* @__PURE__ */ jsx("p", { children: setup.description }), setup.links.length > 0 ? /* @__PURE__ */ jsx("ul", {
-			className: "agent-connect__mcp-setup-links",
-			role: "list",
-			children: setup.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
-				href: link.url,
-				target: "_blank",
-				rel: "noreferrer",
-				children: link.label
-			}) }, `${link.label}:${link.url}`))
-		}) : null]
+		children: [
+			/* @__PURE__ */ jsx("p", { children: setup.description }),
+			/* @__PURE__ */ jsxs("p", {
+				className: "agent-connect__mcp-setup-auth",
+				children: [/* @__PURE__ */ jsx("span", { children: setup.auth.label }), setup.auth.fields.length > 0 ? /* @__PURE__ */ jsx("span", { children: setup.auth.fields.map((field) => field.label).join(", ") }) : null]
+			}),
+			setup.links.length > 0 ? /* @__PURE__ */ jsx("ul", {
+				className: "agent-connect__mcp-setup-links",
+				role: "list",
+				children: setup.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+					href: link.url,
+					target: "_blank",
+					rel: "noreferrer",
+					children: link.label
+				}) }, `${link.label}:${link.url}`))
+			}) : null
+		]
 	});
 }
 function renderMcpServerIcon(server) {
-	const icon = server.icon;
-	if (typeof icon === "string") return /* @__PURE__ */ jsx(McpServerIconImage, {
-		src: icon,
-		name: server.name
-	});
-	if (icon) return /* @__PURE__ */ jsx(McpServerIconImage, {
-		src: icon.src,
+	const src = getMcpServerIconSrc(server);
+	if (src) return /* @__PURE__ */ jsx(McpServerIconImage, {
+		src,
 		name: server.name
 	});
 	return server.name.slice(0, 1);

package/dist/components/McpServerPicker.js

@@ -1,6 +1,7 @@
 import { A as SpinnerIcon, D as PlusIcon, N as WarningIcon, a as CheckIcon } from "../icons-BCNawx-T.js";
 import { Button } from "./Button.js";
 import { MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRoot, MenuShortcut, MenuTrigger } from "./Menu.js";
+import { getMcpServerIconSrc } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/McpServerPicker.tsx
@@ -65,7 +66,7 @@ function McpServerPickerRow({ server, onConnect }) {
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				className: "mcp-server-picker__icon",
-				children: renderIcon(server.icon, server.name)
+				children: renderIcon(server)
 			}),
 			/* @__PURE__ */ jsxs("span", {
 				className: "mcp-server-picker__copy",
@@ -106,18 +107,15 @@ function getStatusLabel(status) {
 	if (status === "connecting") return "Connecting";
 	return "";
 }
-function renderIcon(icon, name) {
-	if (typeof icon === "string") return /* @__PURE__ */ jsx(IconImage, {
-		src: icon,
-		name
-	});
-	if (icon) return /* @__PURE__ */ jsx(IconImage, {
-		src: icon.src,
-		name
+function renderIcon(server) {
+	const src = getMcpServerIconSrc(server);
+	if (src) return /* @__PURE__ */ jsx(IconImage, {
+		src,
+		name: server.name
 	});
 	return /* @__PURE__ */ jsx("span", {
 		className: "mcp-server-picker__fallback-icon",
-		children: name.slice(0, 1)
+		children: server.name.slice(0, 1)
 	});
 }
 function IconImage({ src, name }) {

package/dist/components/PromptInput.d.ts

@@ -356,6 +356,8 @@ interface ExecutionApprovals {
 }
 /** The id a response must carry: the approval id, or the paused run's executionId. */
 declare function getApprovalRequestId(part: ApprovalToolPart): string | undefined;
+/** Component-local identity: paused executions can ask for multiple approvals. */
+declare function getApprovalStateKey(part: ApprovalToolPart): string | undefined;
 interface PendingToolApproval<MessageT extends UIMessage = UIMessage> {
   message: MessageT;
   messageIndex: number;
@@ -529,4 +531,4 @@ declare const PromptInputCommandItem: typeof ComboboxItem;
 type PromptInputCommandSeparatorProps = React.ComponentPropsWithoutRef<typeof ComboboxSeparator>;
 declare const PromptInputCommandSeparator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 //#endregion
-export { ApprovalToolPart, AttachmentsContext, ExecutionApprovals, PendingToolApproval, PermissionMode, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputActionAddScreenshot, PromptInputActionAddScreenshotProps, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputApproval, PromptInputApprovalProps, PromptInputAttachment, PromptInputAttachmentProps, PromptInputAttachments, PromptInputAttachmentsProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandEmptyProps, PromptInputCommandGroup, PromptInputCommandGroupProps, PromptInputCommandInput, PromptInputCommandInputProps, PromptInputCommandItem, PromptInputCommandItemProps, PromptInputCommandList, PromptInputCommandListProps, PromptInputCommandProps, PromptInputCommandSeparator, PromptInputCommandSeparatorProps, PromptInputControllerProps, PromptInputFilePart, PromptInputFooter, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputMessage, PromptInputPermissionSelector, PromptInputPermissionSelectorProps, PromptInputProps, PromptInputProvider, PromptInputProviderProps, PromptInputReferencedSource, PromptInputSelect, PromptInputSelectContent, PromptInputSelectContentProps, PromptInputSelectItem, PromptInputSelectItemProps, PromptInputSelectProps, PromptInputSelectTrigger, PromptInputSelectTriggerProps, PromptInputSelectValue, PromptInputSelectValueProps, PromptInputStatus, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, PromptInputTooltipConfig, ReferencedSourcesContext, TextInputContext, TooltipSide, getApprovalRequestId, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, usePromptInputReferencedSources, useProviderAttachments };
+export { ApprovalToolPart, AttachmentsContext, ExecutionApprovals, PendingToolApproval, PermissionMode, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputActionAddScreenshot, PromptInputActionAddScreenshotProps, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputApproval, PromptInputApprovalProps, PromptInputAttachment, PromptInputAttachmentProps, PromptInputAttachments, PromptInputAttachmentsProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandEmptyProps, PromptInputCommandGroup, PromptInputCommandGroupProps, PromptInputCommandInput, PromptInputCommandInputProps, PromptInputCommandItem, PromptInputCommandItemProps, PromptInputCommandList, PromptInputCommandListProps, PromptInputCommandProps, PromptInputCommandSeparator, PromptInputCommandSeparatorProps, PromptInputControllerProps, PromptInputFilePart, PromptInputFooter, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputMessage, PromptInputPermissionSelector, PromptInputPermissionSelectorProps, PromptInputProps, PromptInputProvider, PromptInputProviderProps, PromptInputReferencedSource, PromptInputSelect, PromptInputSelectContent, PromptInputSelectContentProps, PromptInputSelectItem, PromptInputSelectItemProps, PromptInputSelectProps, PromptInputSelectTrigger, PromptInputSelectTriggerProps, PromptInputSelectValue, PromptInputSelectValueProps, PromptInputStatus, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, PromptInputTooltipConfig, ReferencedSourcesContext, TextInputContext, TooltipSide, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, usePromptInputReferencedSources, useProviderAttachments };

package/dist/components/PromptInput.js

@@ -667,6 +667,14 @@ function getApprovalRequestId(part) {
 	if (part.state === "approval-requested") return part.approval.id;
 	return getPausedExecution(part)?.executionId;
 }
+/** Component-local identity: paused executions can ask for multiple approvals. */
+function getApprovalStateKey(part) {
+	if (part.state === "approval-requested") return part.approval.id;
+	const paused = getPausedExecution(part);
+	if (!paused) return void 0;
+	const seq = paused.pending[0]?.seq;
+	return seq === void 0 ? paused.executionId : `${paused.executionId}:${seq}`;
+}
 /** Derives pending tool approvals straight from the messages — no app-owned shapes. */
 function getPendingToolApprovals(messages, { pausedExecutions = false } = {}) {
 	const pending = [];
@@ -701,7 +709,7 @@ function PromptInputApproval({ part, onRespond, executionApprovals, onSkip, ques
 	const reasonRef = React.useRef(null);
 	const approval = part.state === "approval-requested" ? part.approval : void 0;
 	const paused = getPausedExecution(part);
-	const approvalId = approval?.id ?? paused?.executionId;
+	const approvalId = getApprovalStateKey(part);
 	React.useEffect(() => {
 		setSelected("approve");
 		setReason("");
@@ -709,19 +717,23 @@ function PromptInputApproval({ part, onRespond, executionApprovals, onSkip, ques
 	}, [approvalId]);
 	if (approval ? !onRespond : !(paused && executionApprovals)) return null;
 	const toolName = getToolName(part);
-	const respond = (approved) => {
+	const respond = async (approved) => {
 		if (busy) return;
 		setBusy(true);
 		const trimmed = reason.trim();
 		const denyReason = !approved && trimmed ? trimmed : void 0;
-		if (approval) onRespond?.({
-			id: approval.id,
-			approved,
-			reason: denyReason
-		});
-		else if (paused) approved ? executionApprovals?.approve(paused.executionId) : executionApprovals?.reject(paused.executionId, denyReason);
+		try {
+			if (approval) await onRespond?.({
+				id: approval.id,
+				approved,
+				reason: denyReason
+			});
+			else if (paused) await (approved ? executionApprovals?.approve(paused.executionId) : executionApprovals?.reject(paused.executionId, denyReason));
+		} finally {
+			setBusy(false);
+		}
 	};
-	const submit = () => respond(selected === "approve");
+	const submit = () => void respond(selected === "approve");
 	const input = "input" in part ? part.input : void 0;
 	const inputEntries = input && typeof input === "object" && !Array.isArray(input) ? Object.entries(input) : void 0;
 	return /* @__PURE__ */ jsxs("div", {
@@ -790,7 +802,7 @@ function PromptInputApproval({ part, onRespond, executionApprovals, onSkip, ques
 					className: "prompt-input__approval-option",
 					"data-selected": selected === "approve" || void 0,
 					disabled: busy,
-					onClick: () => respond(true),
+					onClick: () => void respond(true),
 					onFocus: () => setSelected("approve"),
 					children: [
 						/* @__PURE__ */ jsx("span", {
@@ -1047,4 +1059,4 @@ function createId() {
 	return globalThis.crypto?.randomUUID?.() ?? `prompt-input-${Date.now()}-${Math.random()}`;
 }
 //#endregion
-export { PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputPermissionSelector, PromptInputProvider, PromptInputSelect, PromptInputSelectContent, PromptInputSelectItem, PromptInputSelectTrigger, PromptInputSelectValue, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, usePromptInputReferencedSources, useProviderAttachments };
+export { PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputPermissionSelector, PromptInputProvider, PromptInputSelect, PromptInputSelectContent, PromptInputSelectItem, PromptInputSelectTrigger, PromptInputSelectValue, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, usePromptInputReferencedSources, useProviderAttachments };

package/dist/styles/agent-connection.css

@@ -251,6 +251,17 @@
   overflow-wrap: anywhere;
 }
 
+.agent-connect__mcp-setup-auth {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.agent-connect__mcp-setup-auth span:first-child {
+  color: var(--sigvelo-color-text);
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
 .agent-connect__mcp-setup-links {
   display: flex;
   flex-wrap: wrap;

package/dist/utils/mcp-server-catalog.d.ts

@@ -7,7 +7,21 @@ interface McpServerSetupLink {
   label: string;
   url: string;
 }
+type McpServerSetupAuthFieldName = "bearerToken" | "clientId" | "clientSecret" | "redirectUrl" | "scope";
+interface McpServerSetupAuthField {
+  name: McpServerSetupAuthFieldName;
+  label: string;
+  inputType?: "password" | "text" | "url";
+  placeholder?: string;
+  required?: boolean;
+}
+interface McpServerSetupAuth {
+  type: "bearer" | "manual_oauth_client" | "none";
+  label: string;
+  fields: readonly McpServerSetupAuthField[];
+}
 interface McpServerManualSetup {
+  auth: McpServerSetupAuth;
   description: string;
   links: readonly McpServerSetupLink[];
 }
@@ -22,6 +36,70 @@ interface McpServerCard {
   statusLabel?: string;
   manualSetup?: McpServerManualSetup;
 }
+declare const MCP_SERVER_SETUP_AUTH: {
+  readonly bearer: {
+    readonly type: "bearer";
+    readonly label: "Bearer / API key";
+    readonly fields: readonly [{
+      readonly name: "bearerToken";
+      readonly label: "API key / Bearer token";
+      readonly inputType: "password";
+      readonly placeholder: "Paste token";
+      readonly required: true;
+    }];
+  };
+  readonly manualOAuthClient: {
+    readonly type: "manual_oauth_client";
+    readonly label: "OAuth client ID";
+    readonly fields: readonly [{
+      readonly name: "clientId";
+      readonly label: "OAuth client ID";
+      readonly placeholder: "Client ID";
+      readonly required: true;
+    }, {
+      readonly name: "redirectUrl";
+      readonly label: "Redirect URL";
+      readonly inputType: "url";
+      readonly placeholder: "Registered OAuth callback URL";
+    }, {
+      readonly name: "scope";
+      readonly label: "Scope";
+      readonly placeholder: "Space-separated scopes";
+    }];
+  };
+  readonly manualOAuthClientSecret: {
+    readonly type: "manual_oauth_client";
+    readonly label: "OAuth client ID + secret";
+    readonly fields: readonly [{
+      readonly name: "clientId";
+      readonly label: "OAuth client ID";
+      readonly placeholder: "Client ID";
+      readonly required: true;
+    }, {
+      readonly name: "clientSecret";
+      readonly label: "OAuth client secret";
+      readonly inputType: "password";
+      readonly placeholder: "Client secret";
+      readonly required: true;
+    }, {
+      readonly name: "redirectUrl";
+      readonly label: "Redirect URL";
+      readonly inputType: "url";
+      readonly placeholder: "Registered OAuth callback URL";
+    }, {
+      readonly name: "scope";
+      readonly label: "Scope";
+      readonly placeholder: "Space-separated scopes";
+    }];
+  };
+  readonly none: {
+    readonly type: "none";
+    readonly label: "No auth";
+    readonly fields: readonly [];
+  };
+};
+declare function getMcpServerIconSrc(server: Pick<McpServerCard, "icon" | "url">): string | undefined;
+declare function inferMcpServerFaviconUrl(url: string): string | undefined;
 /** Remote MCP servers whose OAuth metadata exposes a registration_endpoint. */
 declare const DCR_MCP_SERVER_CARDS: readonly [{
   readonly id: "airtable";
@@ -257,6 +335,31 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://cdn.simpleicons.org/asana/F06A6A";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID + secret";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "clientSecret";
+        readonly label: "OAuth client secret";
+        readonly inputType: "password";
+        readonly placeholder: "Client secret";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Create an Asana MCP app, configure its redirect URL and workspace distribution, then connect with the app client ID and secret.";
     readonly links: readonly [{
       readonly label: "Developer console";
@@ -277,6 +380,25 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://cdn.simpleicons.org/gmail/EA4335";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Enable Gmail and Gmail MCP APIs, configure OAuth consent, add Gmail read/compose scopes, and create a web OAuth client.";
     readonly links: readonly [{
       readonly label: "Setup guide";
@@ -300,6 +422,25 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://cdn.simpleicons.org/googlecalendar/4285F4";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Enable Calendar and Calendar MCP APIs, configure OAuth consent, add calendar read/freebusy scopes, and create a web OAuth client.";
     readonly links: readonly [{
       readonly label: "Setup guide";
@@ -323,6 +464,25 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://cdn.simpleicons.org/googlechat/00AC47";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Enable Chat and Chat MCP APIs, configure a Chat app, add Chat read/send scopes, and create a web OAuth client.";
     readonly links: readonly [{
       readonly label: "Setup guide";
@@ -346,6 +506,25 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://cdn.simpleicons.org/googledrive/4285F4";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Enable Drive and Drive MCP APIs, configure OAuth consent, add Drive read/file scopes, and create a web OAuth client.";
     readonly links: readonly [{
       readonly label: "Setup guide";
@@ -369,6 +548,25 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://cdn.simpleicons.org/google/4285F4";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Enable People API, configure OAuth consent, add contacts/profile/directory scopes, and create a web OAuth client.";
     readonly links: readonly [{
       readonly label: "Setup guide";
@@ -392,6 +590,25 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://cdn.simpleicons.org/google/4285F4";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Enable the Workspace MCP service plus Gmail, Drive, Calendar, and Chat APIs, then configure OAuth consent and readonly search scopes.";
     readonly links: readonly [{
       readonly label: "Setup guide";
@@ -407,6 +624,62 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
       readonly url: "https://console.cloud.google.com/apis/credentials";
     }];
   };
+}, {
+  readonly id: "posthog";
+  readonly name: "PostHog";
+  readonly url: "https://mcp.posthog.com/mcp";
+  readonly description: "Analyze product analytics and feature flags";
+  readonly category: "Manual";
+  readonly icon: "https://cdn.simpleicons.org/posthog/000000";
+  readonly manualSetup: {
+    readonly auth: {
+      readonly type: "bearer";
+      readonly label: "Bearer / API key";
+      readonly fields: readonly [{
+        readonly name: "bearerToken";
+        readonly label: "API key / Bearer token";
+        readonly inputType: "password";
+        readonly placeholder: "Paste token";
+        readonly required: true;
+      }];
+    };
+    readonly description: "Create a PostHog personal API key with the MCP Server preset, then connect with that key as a bearer token.";
+    readonly links: readonly [{
+      readonly label: "MCP docs";
+      readonly url: "https://posthog.com/docs/model-context-protocol";
+    }, {
+      readonly label: "API keys";
+      readonly url: "https://app.posthog.com/settings/user-api-keys";
+    }];
+  };
+}, {
+  readonly id: "firecrawl";
+  readonly name: "Firecrawl";
+  readonly url: "https://mcp.firecrawl.dev/v2/mcp";
+  readonly description: "Search, crawl, scrape, and extract web data";
+  readonly category: "Manual";
+  readonly icon: "https://www.firecrawl.dev/favicon.ico";
+  readonly manualSetup: {
+    readonly auth: {
+      readonly type: "bearer";
+      readonly label: "Bearer / API key";
+      readonly fields: readonly [{
+        readonly name: "bearerToken";
+        readonly label: "API key / Bearer token";
+        readonly inputType: "password";
+        readonly placeholder: "Paste token";
+        readonly required: true;
+      }];
+    };
+    readonly description: "Create a Firecrawl API key, then connect the hosted MCP endpoint with Authorization: Bearer.";
+    readonly links: readonly [{
+      readonly label: "MCP server";
+      readonly url: "https://github.com/firecrawl/firecrawl-mcp-server";
+    }, {
+      readonly label: "API auth";
+      readonly url: "https://docs.firecrawl.dev/api-reference/introduction";
+    }];
+  };
 }, {
   readonly id: "hubspot";
   readonly name: "HubSpot";
@@ -415,6 +688,31 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://cdn.simpleicons.org/hubspot/FF7A59";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID + secret";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "clientSecret";
+        readonly label: "OAuth client secret";
+        readonly inputType: "password";
+        readonly placeholder: "Client secret";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Create a HubSpot MCP Auth App, configure the redirect URL, and connect with OAuth credentials from a PKCE-capable client.";
     readonly links: readonly [{
       readonly label: "Setup guide";
@@ -432,6 +730,25 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://www.microsoft.com/favicon.ico";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Provision the preview tenant resource, register the client, grant delegated MCP permissions, and connect with Microsoft Entra OAuth.";
     readonly links: readonly [{
       readonly label: "Overview";
@@ -449,6 +766,11 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://www.microsoft.com/favicon.ico";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "none";
+      readonly label: "No auth";
+      readonly fields: readonly [];
+    };
     readonly description: "No OAuth is required; add the Streamable HTTP endpoint directly to the MCP client.";
     readonly links: readonly [{
       readonly label: "Setup guide";
@@ -463,6 +785,25 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://www.salesforce.com/favicon.ico";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Create a Salesforce External Client App with mcp_api and refresh_token scopes, require PKCE, activate the hosted server, and connect with the consumer key.";
     readonly links: readonly [{
       readonly label: "Client connection";
@@ -483,6 +824,31 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://slack.com/favicon.ico";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID + secret";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "clientSecret";
+        readonly label: "OAuth client secret";
+        readonly inputType: "password";
+        readonly placeholder: "Client secret";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Create or reuse a Slack app, enable MCP access, add user scopes and redirect URLs, then connect with the app client ID and secret.";
     readonly links: readonly [{
       readonly label: "Slack apps";
@@ -503,6 +869,31 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly category: "Manual";
   readonly icon: "https://cdn.simpleicons.org/zoom/0B5CFF";
   readonly manualSetup: {
+    readonly auth: {
+      readonly type: "manual_oauth_client";
+      readonly label: "OAuth client ID + secret";
+      readonly fields: readonly [{
+        readonly name: "clientId";
+        readonly label: "OAuth client ID";
+        readonly placeholder: "Client ID";
+        readonly required: true;
+      }, {
+        readonly name: "clientSecret";
+        readonly label: "OAuth client secret";
+        readonly inputType: "password";
+        readonly placeholder: "Client secret";
+        readonly required: true;
+      }, {
+        readonly name: "redirectUrl";
+        readonly label: "Redirect URL";
+        readonly inputType: "url";
+        readonly placeholder: "Registered OAuth callback URL";
+      }, {
+        readonly name: "scope";
+        readonly label: "Scope";
+        readonly placeholder: "Space-separated scopes";
+      }];
+    };
     readonly description: "Create a Zoom Marketplace General app, add the MCP product scopes, configure the client redirect URL, and connect with OAuth credentials.";
     readonly links: readonly [{
       readonly label: "Setup guide";
@@ -517,4 +908,4 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   };
 }];
 //#endregion
-export { DCR_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS, McpServerCard, McpServerCardIcon, McpServerManualSetup, McpServerPickerStatus, McpServerSetupLink };
+export { DCR_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS, MCP_SERVER_SETUP_AUTH, McpServerCard, McpServerCardIcon, McpServerManualSetup, McpServerPickerStatus, McpServerSetupAuth, McpServerSetupAuthField, McpServerSetupAuthFieldName, McpServerSetupLink, getMcpServerIconSrc, inferMcpServerFaviconUrl };

package/dist/utils/mcp-server-catalog.js

@@ -1,6 +1,91 @@
 //#region src/utils/mcp-server-catalog.ts
 const DCR_CATEGORY = "Auto";
 const MANUAL_CATEGORY = "Manual";
+const MCP_SERVER_SETUP_AUTH = {
+	bearer: {
+		type: "bearer",
+		label: "Bearer / API key",
+		fields: [{
+			name: "bearerToken",
+			label: "API key / Bearer token",
+			inputType: "password",
+			placeholder: "Paste token",
+			required: true
+		}]
+	},
+	manualOAuthClient: {
+		type: "manual_oauth_client",
+		label: "OAuth client ID",
+		fields: [
+			{
+				name: "clientId",
+				label: "OAuth client ID",
+				placeholder: "Client ID",
+				required: true
+			},
+			{
+				name: "redirectUrl",
+				label: "Redirect URL",
+				inputType: "url",
+				placeholder: "Registered OAuth callback URL"
+			},
+			{
+				name: "scope",
+				label: "Scope",
+				placeholder: "Space-separated scopes"
+			}
+		]
+	},
+	manualOAuthClientSecret: {
+		type: "manual_oauth_client",
+		label: "OAuth client ID + secret",
+		fields: [
+			{
+				name: "clientId",
+				label: "OAuth client ID",
+				placeholder: "Client ID",
+				required: true
+			},
+			{
+				name: "clientSecret",
+				label: "OAuth client secret",
+				inputType: "password",
+				placeholder: "Client secret",
+				required: true
+			},
+			{
+				name: "redirectUrl",
+				label: "Redirect URL",
+				inputType: "url",
+				placeholder: "Registered OAuth callback URL"
+			},
+			{
+				name: "scope",
+				label: "Scope",
+				placeholder: "Space-separated scopes"
+			}
+		]
+	},
+	none: {
+		type: "none",
+		label: "No auth",
+		fields: []
+	}
+};
+function getMcpServerIconSrc(server) {
+	if (typeof server.icon === "string") return server.icon;
+	if (server.icon?.src) return server.icon.src;
+	return inferMcpServerFaviconUrl(server.url);
+}
+function inferMcpServerFaviconUrl(url) {
+	try {
+		const parsed = new URL(url);
+		if (parsed.protocol !== "http:" && parsed.protocol !== "https:") return void 0;
+		return new URL("/favicon.ico", parsed).href;
+	} catch {
+		return;
+	}
+}
 /** Remote MCP servers whose OAuth metadata exposes a registration_endpoint. */
 const DCR_MCP_SERVER_CARDS = [
 	{
@@ -270,6 +355,7 @@ const MANUAL_MCP_SERVER_CARDS = [
 		category: MANUAL_CATEGORY,
 		icon: "https://cdn.simpleicons.org/asana/F06A6A",
 		manualSetup: {
+			auth: MCP_SERVER_SETUP_AUTH.manualOAuthClientSecret,
 			description: "Create an Asana MCP app, configure its redirect URL and workspace distribution, then connect with the app client ID and secret.",
 			links: [
 				{
@@ -295,6 +381,7 @@ const MANUAL_MCP_SERVER_CARDS = [
 		category: MANUAL_CATEGORY,
 		icon: "https://cdn.simpleicons.org/gmail/EA4335",
 		manualSetup: {
+			auth: MCP_SERVER_SETUP_AUTH.manualOAuthClient,
 			description: "Enable Gmail and Gmail MCP APIs, configure OAuth consent, add Gmail read/compose scopes, and create a web OAuth client.",
 			links: [
 				{
@@ -324,6 +411,7 @@ const MANUAL_MCP_SERVER_CARDS = [
 		category: MANUAL_CATEGORY,
 		icon: "https://cdn.simpleicons.org/googlecalendar/4285F4",
 		manualSetup: {
+			auth: MCP_SERVER_SETUP_AUTH.manualOAuthClient,
 			description: "Enable Calendar and Calendar MCP APIs, configure OAuth consent, add calendar read/freebusy scopes, and create a web OAuth client.",
 			links: [
 				{
@@ -353,6 +441,7 @@ const MANUAL_MCP_SERVER_CARDS = [
 		category: MANUAL_CATEGORY,
 		icon: "https://cdn.simpleicons.org/googlechat/00AC47",
 		manualSetup: {
+			auth: MCP_SERVER_SETUP_AUTH.manualOAuthClient,
 			description: "Enable Chat and Chat MCP APIs, configure a Chat app, add Chat read/send scopes, and create a web OAuth client.",
 			links: [
 				{
@@ -382,6 +471,7 @@ const MANUAL_MCP_SERVER_CARDS = [
 		category: MANUAL_CATEGORY,
 		icon: "https://cdn.simpleicons.org/googledrive/4285F4",
 		manualSetup: {
+			auth: MCP_SERVER_SETUP_AUTH.manualOAuthClient,
 			description: "Enable Drive and Drive MCP APIs, configure OAuth consent, add Drive read/file scopes, and create a web OAuth client.",
 			links: [
 				{
@@ -411,6 +501,7 @@ const MANUAL_MCP_SERVER_CARDS = [
 		category: MANUAL_CATEGORY,
 		icon: "https://cdn.simpleicons.org/google/4285F4",
 		manualSetup: {
+			auth: MCP_SERVER_SETUP_AUTH.manualOAuthClient,
 			description: "Enable People API, configure OAuth consent, add contacts/profile/directory scopes, and create a web OAuth client.",
 			links: [
 				{
@@ -440,6 +531,7 @@ const MANUAL_MCP_SERVER_CARDS = [
 		category: MANUAL_CATEGORY,
 		icon: "https://cdn.simpleicons.org/google/4285F4",
 		manualSetup: {
+			auth: MCP_SERVER_SETUP_AUTH.manualOAuthClient,
 			description: "Enable the Workspace MCP service plus Gmail, Drive, Calendar, and Chat APIs, then configure OAuth consent and readonly search scopes.",
 			links: [
 				{
@@ -461,6 +553,44 @@ const MANUAL_MCP_SERVER_CARDS = [
 			]
 		}
 	},
+	{
+		id: "posthog",
+		name: "PostHog",
+		url: "https://mcp.posthog.com/mcp",
+		description: "Analyze product analytics and feature flags",
+		category: MANUAL_CATEGORY,
+		icon: "https://cdn.simpleicons.org/posthog/000000",
+		manualSetup: {
+			auth: MCP_SERVER_SETUP_AUTH.bearer,
+			description: "Create a PostHog personal API key with the MCP Server preset, then connect with that key as a bearer token.",
+			links: [{
+				label: "MCP docs",
+				url: "https://posthog.com/docs/model-context-protocol"
+			}, {
+				label: "API keys",
+				url: "https://app.posthog.com/settings/user-api-keys"
+			}]
+		}
+	},
+	{
+		id: "firecrawl",
+		name: "Firecrawl",
+		url: "https://mcp.firecrawl.dev/v2/mcp",
+		description: "Search, crawl, scrape, and extract web data",
+		category: MANUAL_CATEGORY,
+		icon: "https://www.firecrawl.dev/favicon.ico",
+		manualSetup: {
+			auth: MCP_SERVER_SETUP_AUTH.bearer,
+			description: "Create a Firecrawl API key, then connect the hosted MCP endpoint with Authorization: Bearer.",
+			links: [{
+				label: "MCP server",
+				url: "https://github.com/firecrawl/firecrawl-mcp-server"
+			}, {
+				label: "API auth",
+				url: "https://docs.firecrawl.dev/api-reference/introduction"
+			}]
+		}
+	},
 	{
 		id: "hubspot",
 		name: "HubSpot",
@@ -469,6 +599,7 @@ const MANUAL_MCP_SERVER_CARDS = [
 		category: MANUAL_CATEGORY,
 		icon: "https://cdn.simpleicons.org/hubspot/FF7A59",
 		manualSetup: {
+			auth: MCP_SERVER_SETUP_AUTH.manualOAuthClientSecret,
 			description: "Create a HubSpot MCP Auth App, configure the redirect URL, and connect with OAuth credentials from a PKCE-capable client.",
 			links: [{
 				label: "Setup guide",
@@ -487,6 +618,7 @@ const MANUAL_MCP_SERVER_CARDS = [
 		category: MANUAL_CATEGORY,
 		icon: "https://www.microsoft.com/favicon.ico",
 		manualSetup: {
+			auth: MCP_SERVER_SETUP_AUTH.manualOAuthClient,
 			description: "Provision the preview tenant resource, register the client, grant delegated MCP permissions, and connect with Microsoft Entra OAuth.",
 			links: [{
 				label: "Overview",
@@ -505,6 +637,7 @@ const MANUAL_MCP_SERVER_CARDS = [
 		category: MANUAL_CATEGORY,
 		icon: "https://www.microsoft.com/favicon.ico",
 		manualSetup: {
+			auth: MCP_SERVER_SETUP_AUTH.none,
 			description: "No OAuth is required; add the Streamable HTTP endpoint directly to the MCP client.",
 			links: [{
 				label: "Setup guide",
@@ -520,6 +653,7 @@ const MANUAL_MCP_SERVER_CARDS = [
 		category: MANUAL_CATEGORY,
 		icon: "https://www.salesforce.com/favicon.ico",
 		manualSetup: {
+			auth: MCP_SERVER_SETUP_AUTH.manualOAuthClient,
 			description: "Create a Salesforce External Client App with mcp_api and refresh_token scopes, require PKCE, activate the hosted server, and connect with the consumer key.",
 			links: [
 				{
@@ -545,6 +679,7 @@ const MANUAL_MCP_SERVER_CARDS = [
 		category: MANUAL_CATEGORY,
 		icon: "https://slack.com/favicon.ico",
 		manualSetup: {
+			auth: MCP_SERVER_SETUP_AUTH.manualOAuthClientSecret,
 			description: "Create or reuse a Slack app, enable MCP access, add user scopes and redirect URLs, then connect with the app client ID and secret.",
 			links: [
 				{
@@ -570,6 +705,7 @@ const MANUAL_MCP_SERVER_CARDS = [
 		category: MANUAL_CATEGORY,
 		icon: "https://cdn.simpleicons.org/zoom/0B5CFF",
 		manualSetup: {
+			auth: MCP_SERVER_SETUP_AUTH.manualOAuthClientSecret,
 			description: "Create a Zoom Marketplace General app, add the MCP product scopes, configure the client redirect URL, and connect with OAuth credentials.",
 			links: [
 				{
@@ -589,4 +725,4 @@ const MANUAL_MCP_SERVER_CARDS = [
 	}
 ];
 //#endregion
-export { DCR_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS };
+export { DCR_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS, MCP_SERVER_SETUP_AUTH, getMcpServerIconSrc, inferMcpServerFaviconUrl };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -49,7 +49,7 @@
     "anser": "^2.3.5",
     "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.6.3"
+    "@mcp-b/design-tokens": "0.6.5"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.194",