Fetch icons a docker build time and fallback to remote url if the icon is not found locally

Signed-off-by: David Gageot <david.gageot@docker.com>

Author: dgageot

src/extension/Dockerfile

@@ -1,13 +1,29 @@
 # syntax=docker/dockerfile:1
 
+FROM alpine:3.21@sha256:a8560b36e8b8210634f77d9f7f9efd7ffa463e380b75e2e74aff4511df3ef88c AS alpine
+
 FROM --platform=$BUILDPLATFORM node:23-alpine3.21@sha256:86703151a18fcd06258e013073508c4afea8e19cd7ed451554221dd00aea83fc AS client-builder
 WORKDIR /ui
 COPY ui/package.json ui/package-lock.json ./
 RUN --mount=type=cache,target=/root/.npm npm ci
 COPY ui/. .
 RUN --mount=type=cache,target=/root/.npm npm run build
 
-FROM alpine:3.21@sha256:a8560b36e8b8210634f77d9f7f9efd7ffa463e380b75e2e74aff4511df3ef88c
+FROM alpine AS pull-catalog-images
+RUN apk add --no-cache curl yq
+COPY --from=prompts catalog.yaml /
+RUN <<EOT
+    set -eo pipefail
+
+    mkdir -p /icons
+    cat /catalog.yaml | yq -r '.registry[].icon' | while read -r iconUrl; do
+        name=$(echo -n "$iconUrl" | md5sum | cut -d' ' -f1)
+        echo "${iconUrl} -> ${name}"
+        curl -fSl "$iconUrl" -o "/icons/${name}"
+    done
+EOT
+
+FROM alpine
 ARG TARGETARCH
 LABEL org.opencontainers.image.title="Docker MCP Toolkit" \
     org.opencontainers.image.description="Docker MCP Toolkit is a Docker Desktop Extension allowing to connect dockerized MCP servers to MCP clients" \
@@ -22,8 +38,8 @@ LABEL org.opencontainers.image.title="Docker MCP Toolkit" \
     com.docker.extension.changelog="Added MCP catalog"
 
 COPY docker-compose.yaml metadata.json extension-icon.svg /
-COPY ui/static-assets ui/static-assets
 COPY host-binary/dist/windows-${TARGETARCH}/host-binary.exe /windows/host-binary.exe
 COPY host-binary/dist/darwin-${TARGETARCH}/host-binary /darwin/host-binary
 COPY host-binary/dist/linux-${TARGETARCH}/host-binary /linux/host-binary
+COPY --from=pull-catalog-images /icons ui/static-assets
 COPY --from=client-builder /ui/build ui

src/extension/Makefile

@@ -13,15 +13,8 @@ bin:
 cross:
 	cd host-binary && $(MAKE) cross
 
-pull-catalog-images: ## Pull all icons from the catalog into static-assets with base16 filename safe for paths and urls alike
-	cat ../../prompts/catalog.yaml | yq -r '.registry[].icon' | while read -r iconUrl; do \
-		iconName=$$( echo "$$iconUrl" | xxd -p -u | tr -d '\n' ); \
-		iconPath="ui/static-assets/$$iconName.png"; \
-		[ -f "$$iconPath" ] || curl -o "$$iconPath" "$$iconUrl"; \
-	done
-
-build-extension: cross pull-catalog-images ## Build service image to be deployed as a desktop extension
-	docker buildx build --load --tag=$(IMAGE):$(TAG) .
+build-extension: cross ## Build service image to be deployed as a desktop extension
+	docker buildx build --build-context prompts=../../prompts --load --tag=$(IMAGE):$(TAG) .
 
 install-extension: build-extension ## Install the extension
 	echo y | docker extension install $(IMAGE):$(TAG)
@@ -33,7 +26,7 @@ prepare-buildx: ## Create buildx builder for multi-arch build, if not exists
 	docker buildx inspect $(BUILDER) || docker buildx create --name=$(BUILDER) --driver=docker-container --driver-opt=network=host
 
 push-extension: prepare-buildx cross ## Build & Upload extension image to hub. Do not push if tag already exists: make push-extension tag=0.1
-	docker pull $(IMAGE):$(TAG) && echo "Failure: Tag already exists" || docker buildx build --push --builder=$(BUILDER) --platform=linux/amd64,linux/arm64 --build-arg TAG=$(TAG) --tag=$(IMAGE):$(TAG) .
+	docker pull $(IMAGE):$(TAG) && echo "Failure: Tag already exists" || docker buildx build --build-context prompts=../../prompts --push --builder=$(BUILDER) --platform=linux/amd64,linux/arm64 --build-arg TAG=$(TAG) --tag=$(IMAGE):$(TAG) .
 
 help: ## Show this help
 	@echo Please specify a build target. The choices are:

src/extension/package-lock.json

@@ -12,6 +12,7 @@
     "@mui/material": "6.4.5",
     "@tanstack/react-query": "^5.69.0",
     "js-base64": "^3.7.7",
+    "js-md5": "^0.8.3",
     "json-schema-library": "^10.0.0-rc7",
     "lodash-es": "^4.17.21",
     "react": "^18.2.0",

src/extension/ui/package-lock.json

@@ -123,6 +123,15 @@ const ConfigurationModal = ({
     }
   }, [catalogItem.canRegister]);
 
+  const [image, setImage] = useState<string | undefined>(undefined);
+  useEffect(() => {
+    if (catalogItem.icon) {
+      getCatalogIconPath(catalogItem.icon).then((icon) => {
+        setImage(icon);
+      });
+    }
+  }, [catalogItem.icon]);
+
   const toolChipStyle = {
     padding: '2px 8px',
     justifyContent: 'center',
@@ -177,7 +186,7 @@ const ConfigurationModal = ({
             // TODO: Figure out if catalog icon is actually optional, and if so, find a good fallback.
             catalogItem.icon && <Avatar
               variant="square"
-              src={getCatalogIconPath(catalogItem.icon)}
+              src={image}
               alt={catalogItem.name}
               sx={{
                 width: 40,

src/extension/ui/package.json

@@ -21,15 +21,22 @@ export default function Top({ item, onToggleRegister }: TopProps) {
     setToggled(item.registered);
   }, [item.registered]);
 
-  const url = getCatalogIconPath(item.icon || '');
+  const [image, setImage] = useState<string | undefined>(undefined);
+  useEffect(() => {
+    if (item.icon) {
+      getCatalogIconPath(item.icon).then((icon) => {
+        setImage(icon);
+      });
+    }
+  }, [item.icon]);
 
   return (
     <CardHeader
       sx={{ padding: 0 }}
       avatar={
         <Avatar
           variant="square"
-          src={url}
+          src={image}
           alt={item.name}
           sx={{
             width: 24,

src/extension/ui/src/components/tile/Modal.tsx

@@ -1,6 +1,34 @@
-const getCatalogIconPath = (iconUrl: string) => {
-    const iconFilename = [...iconUrl].map(c => c.charCodeAt(0).toString(16).padStart(2, '0')).join('').toUpperCase() + '0A.png';
-    return new URL(`/static-assets/${iconFilename}`, import.meta.url).href;
+import { md5 } from "js-md5";
+
+const getCatalogIconPath = async (iconUrl: string) => {
+    try {
+        var hash = md5.hex(iconUrl);
+        const hrefIcon = new URL(import.meta.url + `/../../static-assets/${hash}`).href
+
+        await checkIfImageExists(hrefIcon);
+        return hrefIcon
+    } catch {
+        return iconUrl
+    }
+}
+
+function checkIfImageExists(url: string) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.src = url;
+
+        if (img.complete) {
+            resolve(true)
+        } else {
+            img.onload = () => {
+                resolve(true)
+            };
+
+            img.onerror = () => {
+                reject(false)
+            };
+        }
+    });
 }
 
 export default getCatalogIconPath;