@mcp-b/react-components 0.5.7 → 0.6.0

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

@@ -0,0 +1,592 @@
+//#region src/utils/mcp-server-catalog.ts
+const DCR_CATEGORY = "DCR MCP servers";
+const MANUAL_CATEGORY = "Manual setup MCP servers";
+/** Remote MCP servers whose OAuth metadata exposes a registration_endpoint. */
+const DCR_MCP_SERVER_CARDS = [
+	{
+		id: "airtable",
+		name: "Airtable",
+		url: "https://mcp.airtable.com/mcp",
+		description: "Work with Airtable bases and records",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/airtable/18BFFF"
+	},
+	{
+		id: "atlassian",
+		name: "Atlassian",
+		url: "https://mcp.atlassian.com/v1/mcp/authv2",
+		description: "Use Jira, Confluence, and Compass",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/atlassian/0052CC"
+	},
+	{
+		id: "canva",
+		name: "Canva",
+		url: "https://mcp.canva.com/mcp",
+		description: "Create and edit Canva designs",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/canva/00C4CC"
+	},
+	{
+		id: "calendly",
+		name: "Calendly",
+		url: "https://mcp.calendly.com",
+		description: "Work with scheduling links and events",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/calendly/006BFF"
+	},
+	{
+		id: "clickup",
+		name: "ClickUp",
+		url: "https://mcp.clickup.com/mcp",
+		description: "Access tasks, docs, and workspace data",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/clickup/7B68EE"
+	},
+	{
+		id: "close",
+		name: "Close",
+		url: "https://mcp.close.com/mcp",
+		description: "Access CRM leads and sales activity",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/close/004DFF"
+	},
+	{
+		id: "cloudflare",
+		name: "Cloudflare",
+		url: "https://mcp.cloudflare.com/mcp",
+		description: "Manage Cloudflare resources",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/cloudflare/F38020"
+	},
+	{
+		id: "datadog",
+		name: "Datadog",
+		url: "https://mcp.datadoghq.com/v1/mcp",
+		description: "Inspect monitoring and observability data",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/datadog/632CA6"
+	},
+	{
+		id: "egnyte",
+		name: "Egnyte",
+		url: "https://mcp-server.egnyte.com/mcp",
+		description: "Search and manage Egnyte files",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/egnyte/00968F"
+	},
+	{
+		id: "figma",
+		name: "Figma",
+		url: "https://mcp.figma.com/mcp",
+		description: "Use design context and canvas tools",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/figma/F24E1E"
+	},
+	{
+		id: "grafana",
+		name: "Grafana",
+		url: "https://mcp.grafana.com/mcp",
+		description: "Inspect observability data",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/grafana/F46800"
+	},
+	{
+		id: "gitlab",
+		name: "GitLab",
+		url: "https://gitlab.com/api/v4/mcp",
+		description: "Work with repositories and GitLab Duo",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/gitlab/FC6D26"
+	},
+	{
+		id: "huggingface",
+		name: "Hugging Face",
+		url: "https://huggingface.co/mcp",
+		description: "Use Hub resources and AI apps",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/huggingface/FFD21E"
+	},
+	{
+		id: "indeed",
+		name: "Indeed",
+		url: "https://mcp.indeed.com/claude/mcp",
+		description: "Use Indeed hiring context",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/indeed/003A9B"
+	},
+	{
+		id: "intercom",
+		name: "Intercom",
+		url: "https://mcp.intercom.com/mcp",
+		description: "Work with customer support data",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/intercom/6AFDEF"
+	},
+	{
+		id: "linear",
+		name: "Linear",
+		url: "https://mcp.linear.app/mcp",
+		description: "Plan and build products",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/linear/5E6AD2"
+	},
+	{
+		id: "miro",
+		name: "Miro",
+		url: "https://mcp.miro.com/mcp",
+		description: "Work with boards and diagrams",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/miro/FFD02F"
+	},
+	{
+		id: "monday",
+		name: "monday.com",
+		url: "https://mcp.monday.com/mcp",
+		description: "Access monday.com workspace data",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/mondaydotcom/FF3D57"
+	},
+	{
+		id: "neon",
+		name: "Neon",
+		url: "https://mcp.neon.tech/mcp",
+		description: "Manage Neon Postgres projects",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/neon/00E599"
+	},
+	{
+		id: "notion",
+		name: "Notion",
+		url: "https://mcp.notion.com/mcp",
+		description: "Work across docs, wikis, and project notes",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/notion/A1A1AA"
+	},
+	{
+		id: "paypal",
+		name: "PayPal",
+		url: "https://mcp.paypal.com/http",
+		description: "Use PayPal merchant tools",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/paypal/003087"
+	},
+	{
+		id: "postman",
+		name: "Postman",
+		url: "https://mcp.postman.com/mcp",
+		description: "Inspect and use API collections",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/postman/FF6C37"
+	},
+	{
+		id: "railway",
+		name: "Railway",
+		url: "https://mcp.railway.com",
+		description: "Manage Railway projects and services",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/railway/8957E5"
+	},
+	{
+		id: "ramp",
+		name: "Ramp",
+		url: "https://ramp-mcp-remote.ramp.com/mcp",
+		description: "Use finance and spend management data",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/ramp/00D26A"
+	},
+	{
+		id: "sentry",
+		name: "Sentry",
+		url: "https://mcp.sentry.dev/mcp",
+		description: "Debug errors and inspect projects",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/sentry/8957E5"
+	},
+	{
+		id: "square",
+		name: "Square",
+		url: "https://mcp.squareup.com/sse",
+		description: "Use Square APIs and merchant data",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/square/3E4348"
+	},
+	{
+		id: "stripe",
+		name: "Stripe",
+		url: "https://mcp.stripe.com",
+		description: "Interact with Stripe APIs and docs",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/stripe/635BFF"
+	},
+	{
+		id: "supabase",
+		name: "Supabase",
+		url: "https://mcp.supabase.com/mcp",
+		description: "Manage Supabase projects",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/supabase/3ECF8E"
+	},
+	{
+		id: "vercel",
+		name: "Vercel",
+		url: "https://mcp.vercel.com",
+		description: "Manage projects and deployments",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/vercel/A1A1AA"
+	},
+	{
+		id: "webflow",
+		name: "Webflow",
+		url: "https://mcp.webflow.com/mcp",
+		description: "Work with Webflow sites and CMS",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/webflow/146EF5"
+	},
+	{
+		id: "wix",
+		name: "Wix",
+		url: "https://mcp.wix.com/mcp",
+		description: "Work with Wix sites and apps",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/wix/A1A1AA"
+	},
+	{
+		id: "zapier",
+		name: "Zapier",
+		url: "https://mcp.zapier.com/api/v1/connect",
+		description: "Connect actions across apps",
+		category: DCR_CATEGORY,
+		icon: "https://cdn.simpleicons.org/zapier/FF4F00"
+	}
+];
+/** High-signal remote MCP servers that require manual setup instead of DCR. */
+const MANUAL_MCP_SERVER_CARDS = [
+	{
+		id: "asana",
+		name: "Asana",
+		url: "https://mcp.asana.com/v2/mcp",
+		description: "Manage tasks, projects, and goals",
+		category: MANUAL_CATEGORY,
+		icon: "https://cdn.simpleicons.org/asana/F06A6A",
+		manualSetup: {
+			description: "Create an Asana MCP app, configure its redirect URL and workspace distribution, then connect with the app client ID and secret.",
+			links: [
+				{
+					label: "Developer console",
+					url: "https://app.asana.com/0/developer-console"
+				},
+				{
+					label: "Setup guide",
+					url: "https://developers.asana.com/docs/integrating-with-asanas-mcp-server"
+				},
+				{
+					label: "Client setup",
+					url: "https://developers.asana.com/docs/connecting-mcp-clients-to-asanas-v2-server"
+				}
+			]
+		}
+	},
+	{
+		id: "gmail",
+		name: "Gmail",
+		url: "https://gmailmcp.googleapis.com/mcp/v1",
+		description: "Read and draft Gmail messages",
+		category: MANUAL_CATEGORY,
+		icon: "https://cdn.simpleicons.org/gmail/EA4335",
+		manualSetup: {
+			description: "Enable Gmail and Gmail MCP APIs, configure OAuth consent, add Gmail read/compose scopes, and create a web OAuth client.",
+			links: [
+				{
+					label: "Setup guide",
+					url: "https://developers.google.com/workspace/gmail/api/guides/configure-mcp-server"
+				},
+				{
+					label: "API reference",
+					url: "https://developers.google.com/workspace/gmail/api/reference/mcp"
+				},
+				{
+					label: "OAuth consent",
+					url: "https://console.cloud.google.com/apis/credentials/consent"
+				},
+				{
+					label: "Credentials",
+					url: "https://console.cloud.google.com/apis/credentials"
+				}
+			]
+		}
+	},
+	{
+		id: "google-calendar",
+		name: "Google Calendar",
+		url: "https://calendarmcp.googleapis.com/mcp/v1",
+		description: "Inspect calendars, events, and availability",
+		category: MANUAL_CATEGORY,
+		icon: "https://cdn.simpleicons.org/googlecalendar/4285F4",
+		manualSetup: {
+			description: "Enable Calendar and Calendar MCP APIs, configure OAuth consent, add calendar read/freebusy scopes, and create a web OAuth client.",
+			links: [
+				{
+					label: "Setup guide",
+					url: "https://developers.google.com/workspace/calendar/api/guides/configure-mcp-server"
+				},
+				{
+					label: "API reference",
+					url: "https://developers.google.com/workspace/calendar/api/v3/reference/mcp"
+				},
+				{
+					label: "OAuth consent",
+					url: "https://console.cloud.google.com/apis/credentials/consent"
+				},
+				{
+					label: "Credentials",
+					url: "https://console.cloud.google.com/apis/credentials"
+				}
+			]
+		}
+	},
+	{
+		id: "google-chat",
+		name: "Google Chat",
+		url: "https://chatmcp.googleapis.com/mcp/v1",
+		description: "Read spaces, memberships, and messages",
+		category: MANUAL_CATEGORY,
+		icon: "https://cdn.simpleicons.org/googlechat/00AC47",
+		manualSetup: {
+			description: "Enable Chat and Chat MCP APIs, configure a Chat app, add Chat read/send scopes, and create a web OAuth client.",
+			links: [
+				{
+					label: "Setup guide",
+					url: "https://developers.google.com/workspace/chat/api/guides/configure-mcp-server"
+				},
+				{
+					label: "API reference",
+					url: "https://developers.google.com/workspace/chat/api/reference/mcp"
+				},
+				{
+					label: "OAuth consent",
+					url: "https://console.cloud.google.com/apis/credentials/consent"
+				},
+				{
+					label: "Credentials",
+					url: "https://console.cloud.google.com/apis/credentials"
+				}
+			]
+		}
+	},
+	{
+		id: "google-drive",
+		name: "Google Drive",
+		url: "https://drivemcp.googleapis.com/mcp/v1",
+		description: "Search and manage Drive files",
+		category: MANUAL_CATEGORY,
+		icon: "https://cdn.simpleicons.org/googledrive/4285F4",
+		manualSetup: {
+			description: "Enable Drive and Drive MCP APIs, configure OAuth consent, add Drive read/file scopes, and create a web OAuth client.",
+			links: [
+				{
+					label: "Setup guide",
+					url: "https://developers.google.com/workspace/drive/api/guides/configure-mcp-server"
+				},
+				{
+					label: "API reference",
+					url: "https://developers.google.com/workspace/drive/api/reference/mcp"
+				},
+				{
+					label: "OAuth consent",
+					url: "https://console.cloud.google.com/apis/credentials/consent"
+				},
+				{
+					label: "Credentials",
+					url: "https://console.cloud.google.com/apis/credentials"
+				}
+			]
+		}
+	},
+	{
+		id: "google-people",
+		name: "Google People API",
+		url: "https://people.googleapis.com/mcp/v1",
+		description: "Read contacts, profiles, and directory data",
+		category: MANUAL_CATEGORY,
+		icon: "https://cdn.simpleicons.org/google/4285F4",
+		manualSetup: {
+			description: "Enable People API, configure OAuth consent, add contacts/profile/directory scopes, and create a web OAuth client.",
+			links: [
+				{
+					label: "Setup guide",
+					url: "https://developers.google.com/people/v1/configure-mcp-server"
+				},
+				{
+					label: "API reference",
+					url: "https://developers.google.com/people/api/mcp"
+				},
+				{
+					label: "OAuth consent",
+					url: "https://console.cloud.google.com/apis/credentials/consent"
+				},
+				{
+					label: "Credentials",
+					url: "https://console.cloud.google.com/apis/credentials"
+				}
+			]
+		}
+	},
+	{
+		id: "google-workspace-search",
+		name: "Google Workspace Universal Search",
+		url: "https://workspacemcp.googleapis.com/mcp/v1",
+		description: "Search Gmail, Drive, Calendar, and Chat",
+		category: MANUAL_CATEGORY,
+		icon: "https://cdn.simpleicons.org/google/4285F4",
+		manualSetup: {
+			description: "Enable the Workspace MCP service plus Gmail, Drive, Calendar, and Chat APIs, then configure OAuth consent and readonly search scopes.",
+			links: [
+				{
+					label: "Setup guide",
+					url: "https://developers.google.com/workspace/guides/universal-search-mcp"
+				},
+				{
+					label: "Supported products",
+					url: "https://docs.cloud.google.com/mcp/supported-products"
+				},
+				{
+					label: "OAuth consent",
+					url: "https://console.cloud.google.com/apis/credentials/consent"
+				},
+				{
+					label: "Credentials",
+					url: "https://console.cloud.google.com/apis/credentials"
+				}
+			]
+		}
+	},
+	{
+		id: "hubspot",
+		name: "HubSpot",
+		url: "https://mcp.hubspot.com",
+		description: "Work with CRM records and activities",
+		category: MANUAL_CATEGORY,
+		icon: "https://cdn.simpleicons.org/hubspot/FF7A59",
+		manualSetup: {
+			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",
+				url: "https://developers.hubspot.com/docs/apps/developer-platform/build-apps/integrate-with-the-remote-hubspot-mcp-server"
+			}, {
+				label: "HubSpot developer apps",
+				url: "https://app.hubspot.com/developer"
+			}]
+		}
+	},
+	{
+		id: "microsoft-enterprise",
+		name: "Microsoft Enterprise",
+		url: "https://mcp.svc.cloud.microsoft/enterprise",
+		description: "Query Microsoft Graph tenant data",
+		category: MANUAL_CATEGORY,
+		icon: "https://cdn.simpleicons.org/microsoft/5E5E5E",
+		manualSetup: {
+			description: "Provision the preview tenant resource, register the client, grant delegated MCP permissions, and connect with Microsoft Entra OAuth.",
+			links: [{
+				label: "Overview",
+				url: "https://learn.microsoft.com/en-us/graph/mcp-server/overview"
+			}, {
+				label: "Get started",
+				url: "https://learn.microsoft.com/en-us/graph/mcp-server/get-started"
+			}]
+		}
+	},
+	{
+		id: "microsoft-release-communications",
+		name: "Microsoft Release Communications",
+		url: "https://www.microsoft.com/releasecommunications/mcp",
+		description: "Check Microsoft 365 roadmap and Azure updates",
+		category: MANUAL_CATEGORY,
+		icon: "https://cdn.simpleicons.org/microsoft/5E5E5E",
+		manualSetup: {
+			description: "No OAuth is required; add the Streamable HTTP endpoint directly to the MCP client.",
+			links: [{
+				label: "Setup guide",
+				url: "https://learn.microsoft.com/en-us/microsoft-365/admin/manage/mrc-mcp?view=o365-worldwide"
+			}]
+		}
+	},
+	{
+		id: "salesforce-sobject-reads",
+		name: "Salesforce SObject Reads",
+		url: "https://api.salesforce.com/platform/mcp/v1/platform/sobject-reads",
+		description: "Read and query Salesforce CRM records",
+		category: MANUAL_CATEGORY,
+		icon: "https://cdn.simpleicons.org/salesforce/00A1E0",
+		manualSetup: {
+			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: [
+				{
+					label: "Client connection",
+					url: "https://developer.salesforce.com/docs/platform/hosted-mcp-servers/guide/client-connection-overview.html"
+				},
+				{
+					label: "External Client App",
+					url: "https://developer.salesforce.com/docs/platform/hosted-mcp-servers/guide/create-external-client-app.html"
+				},
+				{
+					label: "Server reference",
+					url: "https://developer.salesforce.com/docs/platform/hosted-mcp-servers/references/reference/sobject-reads.html"
+				}
+			]
+		}
+	},
+	{
+		id: "slack",
+		name: "Slack",
+		url: "https://mcp.slack.com/mcp",
+		description: "Search channels, send messages, and manage canvases",
+		category: MANUAL_CATEGORY,
+		icon: "https://cdn.simpleicons.org/slack/4A154B",
+		manualSetup: {
+			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: [
+				{
+					label: "Slack apps",
+					url: "https://api.slack.com/apps"
+				},
+				{
+					label: "MCP overview",
+					url: "https://docs.slack.dev/ai/slack-mcp-server/"
+				},
+				{
+					label: "App setup",
+					url: "https://docs.slack.dev/ai/slack-mcp-server/developing/"
+				}
+			]
+		}
+	},
+	{
+		id: "zoom-workspace",
+		name: "Zoom Workspace",
+		url: "https://mcp.zoom.us/mcp/zoom/streamable",
+		description: "Use meetings, recordings, docs, and transcripts",
+		category: MANUAL_CATEGORY,
+		icon: "https://cdn.simpleicons.org/zoom/0B5CFF",
+		manualSetup: {
+			description: "Create a Zoom Marketplace General app, add the MCP product scopes, configure the client redirect URL, and connect with OAuth credentials.",
+			links: [
+				{
+					label: "Setup guide",
+					url: "https://developers.zoom.us/docs/mcp/servers/connect-to-zoom-mcp-servers/"
+				},
+				{
+					label: "Zoom app marketplace",
+					url: "https://marketplace.zoom.us/develop/create"
+				},
+				{
+					label: "MCP registry",
+					url: "https://github.com/zoom/mcp-registry"
+				}
+			]
+		}
+	}
+];
+//#endregion
+export { DCR_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.5.7",
+  "version": "0.6.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": {
@@ -49,7 +49,7 @@
     "anser": "^2.3.5",
     "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.5.7"
+    "@mcp-b/design-tokens": "0.6.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.194",