@mcp-b/react-components 0.6.4 → 0.7.0

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.7.0",
   "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": {
@@ -42,6 +42,7 @@
     "@base-ui/react": "~1.6.0",
     "@cloudflare/codemode": "^0.4.2",
     "@rrweb/replay": "^2.1.0",
+    "@shadcn/react": "^0.2.0",
     "@streamdown/cjk": "^1.0.3",
     "@streamdown/code": "^1.1.1",
     "@streamdown/math": "^1.0.2",
@@ -49,7 +50,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.7.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.194",