@mcp-b/react-components 0.6.4 → 0.6.5

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/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.4",
+  "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.4"
+    "@mcp-b/design-tokens": "0.6.5"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.194",