@mcp-b/react-components 0.6.1 → 0.6.2

package/dist/components/AgentConnection.js

@@ -206,21 +206,29 @@ function McpServerSetup({ setup }) {
 }
 function renderMcpServerIcon(server) {
 	const icon = server.icon;
-	if (typeof icon === "string") return /* @__PURE__ */ jsx("img", {
+	if (typeof icon === "string") return /* @__PURE__ */ jsx(McpServerIconImage, {
 		src: icon,
-		alt: "",
-		loading: "lazy",
-		decoding: "async",
-		referrerPolicy: "no-referrer"
+		name: server.name
 	});
-	if (icon) return /* @__PURE__ */ jsx("img", {
+	if (icon) return /* @__PURE__ */ jsx(McpServerIconImage, {
 		src: icon.src,
+		name: server.name
+	});
+	return server.name.slice(0, 1);
+}
+function McpServerIconImage({ src, name }) {
+	const [failed, setFailed] = React.useState(false);
+	if (failed) return name.slice(0, 1);
+	return /* @__PURE__ */ jsx("img", {
+		src,
 		alt: "",
+		width: 16,
+		height: 16,
 		loading: "lazy",
 		decoding: "async",
-		referrerPolicy: "no-referrer"
+		referrerPolicy: "no-referrer",
+		onError: () => setFailed(true)
 	});
-	return server.name.slice(0, 1);
 }
 /**
 * Compact popover trigger for showing AgentConnectionPanel inline.

package/dist/components/McpServerPicker.js

@@ -103,20 +103,34 @@ function getStatusLabel(status) {
 	return "";
 }
 function renderIcon(icon, name) {
-	if (typeof icon === "string") return /* @__PURE__ */ jsx(IconImage, { src: icon });
-	if (icon) return /* @__PURE__ */ jsx(IconImage, { src: icon.src });
+	if (typeof icon === "string") return /* @__PURE__ */ jsx(IconImage, {
+		src: icon,
+		name
+	});
+	if (icon) return /* @__PURE__ */ jsx(IconImage, {
+		src: icon.src,
+		name
+	});
 	return /* @__PURE__ */ jsx("span", {
 		className: "mcp-server-picker__fallback-icon",
 		children: name.slice(0, 1)
 	});
 }
-function IconImage({ src }) {
+function IconImage({ src, name }) {
+	const [failed, setFailed] = React.useState(false);
+	if (failed) return /* @__PURE__ */ jsx("span", {
+		className: "mcp-server-picker__fallback-icon",
+		children: name.slice(0, 1)
+	});
 	return /* @__PURE__ */ jsx("img", {
 		src,
 		alt: "",
+		width: 20,
+		height: 20,
 		loading: "lazy",
 		decoding: "async",
-		referrerPolicy: "no-referrer"
+		referrerPolicy: "no-referrer",
+		onError: () => setFailed(true)
 	});
 }
 function groupServers(servers) {

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

@@ -43,7 +43,7 @@ declare const DCR_MCP_SERVER_CARDS: readonly [{
   readonly url: "https://mcp.canva.com/mcp";
   readonly description: "Create and edit Canva designs";
   readonly category: "DCR MCP servers";
-  readonly icon: "https://cdn.simpleicons.org/canva/00C4CC";
+  readonly icon: "https://www.canva.com/favicon.ico";
 }, {
   readonly id: "calendly";
   readonly name: "Calendly";
@@ -64,7 +64,7 @@ declare const DCR_MCP_SERVER_CARDS: readonly [{
   readonly url: "https://mcp.close.com/mcp";
   readonly description: "Access CRM leads and sales activity";
   readonly category: "DCR MCP servers";
-  readonly icon: "https://cdn.simpleicons.org/close/004DFF";
+  readonly icon: "https://cdn.prod.website-files.com/61717799a852418a278cfa9b/69e787e66659174d6c555923_favicon.png";
 }, {
   readonly id: "cloudflare";
   readonly name: "Cloudflare";
@@ -148,7 +148,7 @@ declare const DCR_MCP_SERVER_CARDS: readonly [{
   readonly url: "https://mcp.monday.com/mcp";
   readonly description: "Access monday.com workspace data";
   readonly category: "DCR MCP servers";
-  readonly icon: "https://cdn.simpleicons.org/mondaydotcom/FF3D57";
+  readonly icon: "https://monday.com/favicon.ico";
 }, {
   readonly id: "neon";
   readonly name: "Neon";
@@ -190,7 +190,7 @@ declare const DCR_MCP_SERVER_CARDS: readonly [{
   readonly url: "https://ramp-mcp-remote.ramp.com/mcp";
   readonly description: "Use finance and spend management data";
   readonly category: "DCR MCP servers";
-  readonly icon: "https://cdn.simpleicons.org/ramp/00D26A";
+  readonly icon: "https://ramp.com/favicon.ico";
 }, {
   readonly id: "sentry";
   readonly name: "Sentry";
@@ -430,7 +430,7 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly url: "https://mcp.svc.cloud.microsoft/enterprise";
   readonly description: "Query Microsoft Graph tenant data";
   readonly category: "Manual setup MCP servers";
-  readonly icon: "https://cdn.simpleicons.org/microsoft/5E5E5E";
+  readonly icon: "https://www.microsoft.com/favicon.ico";
   readonly manualSetup: {
     readonly description: "Provision the preview tenant resource, register the client, grant delegated MCP permissions, and connect with Microsoft Entra OAuth.";
     readonly links: readonly [{
@@ -447,7 +447,7 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly url: "https://www.microsoft.com/releasecommunications/mcp";
   readonly description: "Check Microsoft 365 roadmap and Azure updates";
   readonly category: "Manual setup MCP servers";
-  readonly icon: "https://cdn.simpleicons.org/microsoft/5E5E5E";
+  readonly icon: "https://www.microsoft.com/favicon.ico";
   readonly manualSetup: {
     readonly description: "No OAuth is required; add the Streamable HTTP endpoint directly to the MCP client.";
     readonly links: readonly [{
@@ -461,7 +461,7 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly url: "https://api.salesforce.com/platform/mcp/v1/platform/sobject-reads";
   readonly description: "Read and query Salesforce CRM records";
   readonly category: "Manual setup MCP servers";
-  readonly icon: "https://cdn.simpleicons.org/salesforce/00A1E0";
+  readonly icon: "https://www.salesforce.com/favicon.ico";
   readonly manualSetup: {
     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 [{
@@ -481,7 +481,7 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
   readonly url: "https://mcp.slack.com/mcp";
   readonly description: "Search channels, send messages, and manage canvases";
   readonly category: "Manual setup MCP servers";
-  readonly icon: "https://cdn.simpleicons.org/slack/4A154B";
+  readonly icon: "https://slack.com/favicon.ico";
   readonly manualSetup: {
     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 [{

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

@@ -25,7 +25,7 @@ const DCR_MCP_SERVER_CARDS = [
 		url: "https://mcp.canva.com/mcp",
 		description: "Create and edit Canva designs",
 		category: DCR_CATEGORY,
-		icon: "https://cdn.simpleicons.org/canva/00C4CC"
+		icon: "https://www.canva.com/favicon.ico"
 	},
 	{
 		id: "calendly",
@@ -49,7 +49,7 @@ const DCR_MCP_SERVER_CARDS = [
 		url: "https://mcp.close.com/mcp",
 		description: "Access CRM leads and sales activity",
 		category: DCR_CATEGORY,
-		icon: "https://cdn.simpleicons.org/close/004DFF"
+		icon: "https://cdn.prod.website-files.com/61717799a852418a278cfa9b/69e787e66659174d6c555923_favicon.png"
 	},
 	{
 		id: "cloudflare",
@@ -145,7 +145,7 @@ const DCR_MCP_SERVER_CARDS = [
 		url: "https://mcp.monday.com/mcp",
 		description: "Access monday.com workspace data",
 		category: DCR_CATEGORY,
-		icon: "https://cdn.simpleicons.org/mondaydotcom/FF3D57"
+		icon: "https://monday.com/favicon.ico"
 	},
 	{
 		id: "neon",
@@ -193,7 +193,7 @@ const DCR_MCP_SERVER_CARDS = [
 		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"
+		icon: "https://ramp.com/favicon.ico"
 	},
 	{
 		id: "sentry",
@@ -485,7 +485,7 @@ const MANUAL_MCP_SERVER_CARDS = [
 		url: "https://mcp.svc.cloud.microsoft/enterprise",
 		description: "Query Microsoft Graph tenant data",
 		category: MANUAL_CATEGORY,
-		icon: "https://cdn.simpleicons.org/microsoft/5E5E5E",
+		icon: "https://www.microsoft.com/favicon.ico",
 		manualSetup: {
 			description: "Provision the preview tenant resource, register the client, grant delegated MCP permissions, and connect with Microsoft Entra OAuth.",
 			links: [{
@@ -503,7 +503,7 @@ const MANUAL_MCP_SERVER_CARDS = [
 		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",
+		icon: "https://www.microsoft.com/favicon.ico",
 		manualSetup: {
 			description: "No OAuth is required; add the Streamable HTTP endpoint directly to the MCP client.",
 			links: [{
@@ -518,7 +518,7 @@ const MANUAL_MCP_SERVER_CARDS = [
 		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",
+		icon: "https://www.salesforce.com/favicon.ico",
 		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: [
@@ -543,7 +543,7 @@ const MANUAL_MCP_SERVER_CARDS = [
 		url: "https://mcp.slack.com/mcp",
 		description: "Search channels, send messages, and manage canvases",
 		category: MANUAL_CATEGORY,
-		icon: "https://cdn.simpleicons.org/slack/4A154B",
+		icon: "https://slack.com/favicon.ico",
 		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: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "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.1"
+    "@mcp-b/design-tokens": "0.6.2"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.194",