connectors: render brand logos in the installed-connector list#241
Merged
Conversation
The /connectors page rendered a 2-letter type badge (REST/GraphQL/MCP/ DB) instead of the source adapter's brand mark — every connector looked generic. Add real logos like the marketplace card and the detail page header. Backend - Persist the source adapterSlug in Connector.config at import time (no DB migration: config is already a Json? column). - Enrich findByOrg + findById responses with a resolved `icon` field via a new resolveAdapterIcon() that prefers config.adapterSlug and falls back to a name match against the catalog. Survives renames for connectors imported after this change; degrades gracefully for legacy rows or hand-rolled connectors. Frontend - Add /logos/connectors/*.svg (102 brand marks: 80 carried over from the marketing site + 22 newly fetched from simpleicons.org under CC0). - New <ConnectorLogo> component on the list page renders the brand SVG with onError fallback to the existing type badge — connectors without a matching SVG keep the previous look. Coverage today is 80/167 catalog adapters with a logo; the rest can be added by dropping an SVG into the folder with the matching icon slug. No code change needed per-connector.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The
/connectorspage on cloud.anythingmcp.com renders a 2-letter type badge (REST,GraphQL,MCP,DB) instead of the brand mark — every imported connector looks generic.This PR brings the real logos (the ones already used on anythingmcp.com/marketplace) into the cloud app so the WordPress card shows the W, the WooCommerce card shows Woo, the Bluesky card shows the butterfly, and so on for every adapter that has an SVG.
Backend
resolveAdapterIcon()helper that maps a Connector row to the source adapter'siconfield. Preference:connector.config.adapterSlug(set at import time → survives renames), with name-match fallback for legacy rows.AdaptersService.importAdapternow writes{ adapterSlug }intoConnector.config— no DB migration (the column is alreadyJson?).ConnectorsService.findByOrg / findByIdreturn{ ...connector, icon: string | null }.Frontend
packages/frontend/public/logos/connectors/(80 from the marketing site + 22 newly fetched from simpleicons.org under CC0).<ConnectorLogo>component on the list page renders the brand SVG (24×24, white card, ring,object-contain) with onError fallback to the existing type badge.Coverage
80 / 167 catalog adapters have a logo today. The remaining 87 fall back to the type badge — same visual as before. Adding more is one drop-in SVG away (
public/logos/connectors/<icon>.svg).Test plan
tsc --noEmitclean (backend + frontend)