+ {detailServer.mcp_info?.logo_url ? (
+ 
{
+ const el = e.target as HTMLImageElement;
+ el.style.display = "none";
+ if (el.nextElementSibling) (el.nextElementSibling as HTMLElement).style.display = "flex";
+ }}
+ />
+ ) : null}
@@ -351,9 +367,26 @@ const MCPAppsPanel: React.FC = ({ accessToken, selectedServers, onChange
onMouseEnter={(e) => { (e.currentTarget as HTMLDivElement).style.background = "#fafafa"; }}
onMouseLeave={(e) => { (e.currentTarget as HTMLDivElement).style.background = "#fff"; }}
>
+ {server.mcp_info?.logo_url ? (
+ 
{
+ const el = e.target as HTMLImageElement;
+ el.style.display = "none";
+ if (el.nextElementSibling) (el.nextElementSibling as HTMLElement).style.display = "flex";
+ }}
+ />
+ ) : null}
{name.charAt(0).toUpperCase()}
diff --git a/ui/litellm-dashboard/src/components/chat/MCPConnectPicker.tsx b/ui/litellm-dashboard/src/components/chat/MCPConnectPicker.tsx
index 234aa8a5281..a52ce181568 100644
--- a/ui/litellm-dashboard/src/components/chat/MCPConnectPicker.tsx
+++ b/ui/litellm-dashboard/src/components/chat/MCPConnectPicker.tsx
@@ -112,6 +112,18 @@ const MCPConnectPicker: React.FC = ({ accessToken, selectedServers, onCha
gap: 12,
}}
>
+ {server.mcp_info?.logo_url && (
+ { (e.target as HTMLImageElement).style.display = "none"; }}
+ />
+ )}
void;
+}
+
+const MCPLogoSelector: React.FC = ({ value, onChange }) => {
+ const [imgErrors, setImgErrors] = useState>(new Set());
+
+ const handleSelect = (url: string) => {
+ onChange?.(value === url ? undefined : url);
+ };
+
+ const handleImgError = (url: string) => {
+ setImgErrors((prev) => new Set(prev).add(url));
+ };
+
+ return (
+ ) => void;
/** Called when key tools change (from registry preset selection). */
onKeyToolsChange?: (tools: OpenAPIKeyTool[]) => void;
+ /** Called when a preset is selected so the parent can set the logo URL from icon_url. */
+ onLogoUrlChange?: (url: string | undefined) => void;
/** Called when the OAuth docs URL changes (e.g. link to create a GitHub OAuth App). */
onOAuthDocsUrlChange?: (url: string | null) => void;
}
@@ -26,6 +28,7 @@ const OpenAPIFormSection: React.FC = ({
accessToken,
onValuesChange,
onKeyToolsChange,
+ onLogoUrlChange,
onOAuthDocsUrlChange,
}) => {
const [selectedPreset, setSelectedPreset] = useState(null);
@@ -33,6 +36,7 @@ const OpenAPIFormSection: React.FC = ({
const handlePresetSelect = (entry: OpenAPIRegistryEntry) => {
setSelectedPreset(entry.name);
onKeyToolsChange?.(entry.key_tools ?? []);
+ onLogoUrlChange?.(entry.icon_url || undefined);
const updates: Record = {
spec_path: entry.spec_url,
};
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx b/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx
index 90ecd4731cf..74945731a24 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx
@@ -11,6 +11,7 @@ import MCPToolConfiguration from "./mcp_tool_configuration";
import StdioConfiguration from "./StdioConfiguration";
import MCPPermissionManagement from "./MCPPermissionManagement";
import OpenAPIFormSection, { OpenAPIKeyTool } from "./OpenAPIFormSection";
+import MCPLogoSelector from "./MCPLogoSelector";
import { isAdminRole } from "@/utils/roles";
import { validateMCPServerUrl, validateMCPServerName } from "./utils";
import NotificationsManager from "../molecules/notifications_manager";
@@ -70,6 +71,7 @@ const CreateMCPServer: React.FC = ({
const [keyTools, setKeyTools] = useState([]);
const [searchValue, setSearchValue] = useState("");
const [oauthAccessToken, setOauthAccessToken] = useState(null);
+ const [logoUrl, setLogoUrl] = useState(undefined);
const [oauthDocsUrl, setOauthDocsUrl] = useState(null);
// Single hook call shared by MCPConnectionStatus and MCPToolConfiguration to avoid duplicate requests.
@@ -101,6 +103,7 @@ const CreateMCPServer: React.FC = ({
allowedTools,
searchValue,
aliasManuallyEdited,
+ logoUrl,
}),
);
} catch (err) {
@@ -202,6 +205,9 @@ const CreateMCPServer: React.FC = ({
if (typeof parsed.aliasManuallyEdited === "boolean") {
setAliasManuallyEdited(parsed.aliasManuallyEdited);
}
+ if (parsed.logoUrl) {
+ setLogoUrl(parsed.logoUrl);
+ }
} catch (err) {
console.error("Failed to restore MCP create state", err);
} finally {
@@ -357,6 +363,7 @@ const CreateMCPServer: React.FC = ({
mcp_info: {
server_name: restValues.server_name || restValues.url,
description: restValues.description,
+ logo_url: logoUrl || undefined,
mcp_server_cost_info: Object.keys(costConfig).length > 0 ? costConfig : null,
},
mcp_access_groups: accessGroups,
@@ -394,6 +401,7 @@ const CreateMCPServer: React.FC = ({
clearTools();
setAllowedTools([]);
setAliasManuallyEdited(false);
+ setLogoUrl(undefined);
setModalVisible(false);
onCreateSuccess(response);
}
@@ -414,6 +422,7 @@ const CreateMCPServer: React.FC = ({
clearTools();
setAllowedTools([]);
setAliasManuallyEdited(false);
+ setLogoUrl(undefined);
setModalVisible(false);
};
@@ -590,6 +599,8 @@ const CreateMCPServer: React.FC = ({
/>
+ GitHub / Source URL}
name="source_url"
@@ -645,6 +656,7 @@ const CreateMCPServer: React.FC = ({
setFormValues((prev) => ({ ...prev, ...updates }))
}
onKeyToolsChange={setKeyTools}
+ onLogoUrlChange={setLogoUrl}
onOAuthDocsUrlChange={setOauthDocsUrl}
/>
)}
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx
index 8130f96856f..551045765cc 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx
@@ -31,6 +31,23 @@ export const mcpServerColumns = (
accessorKey: "server_name",
header: "Name",
enableSorting: true,
+ cell: ({ row }) => {
+ const logoUrl = row.original.mcp_info?.logo_url;
+ const name = row.original.server_name;
+ return (
+ = ({
const [toolNameToDisplayName, setToolNameToDisplayName] = useState>({});
const [toolNameToDescription, setToolNameToDescription] = useState>({});
const [pendingRestoredValues, setPendingRestoredValues] = useState | null>(null);
+ const [logoUrl, setLogoUrl] = useState(mcpServer.mcp_info?.logo_url || undefined);
const authType = Form.useWatch("auth_type", form) as string | undefined;
const transportType = Form.useWatch("transport", form) as string | undefined;
const isStdioTransport = transportType === "stdio";
@@ -538,6 +540,7 @@ const MCPServerEdit: React.FC = ({
mcp_info: {
server_name: mcpInfoServerName,
description: restValues.description,
+ logo_url: logoUrl || undefined,
mcp_server_cost_info: Object.keys(costConfig).length > 0 ? costConfig : null,
},
mcp_access_groups: accessGroups,
@@ -604,6 +607,7 @@ const MCPServerEdit: React.FC = ({
+
+
+ );
+};
+
+export default MCPLogoSelector;
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/OpenAPIFormSection.tsx b/ui/litellm-dashboard/src/components/mcp_tools/OpenAPIFormSection.tsx
index 23aae6cb14f..b25e1dcadd4 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/OpenAPIFormSection.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/OpenAPIFormSection.tsx
@@ -12,6 +12,8 @@ interface OpenAPIFormSectionProps {
onValuesChange: (updates: Record
+ Logo
+
+
+
+
+ {/* Preview */}
+ {value && (
+
+ 
{ (e.target as HTMLImageElement).style.display = "none"; }}
+ />
+
+ )}
+
+ {/* Well-known logo grid */}
+
+
+
+ {value}
+
+ {WELL_KNOWN_LOGOS.map((logo) => {
+ const isSelected = value === logo.url;
+ const hasFailed = imgErrors.has(logo.url);
+ if (hasFailed) return null;
+ return (
+
+
+
+ );
+ })}
+
+
+ {/* Custom URL input */}
+ }
+ placeholder="Or paste a custom logo URL..."
+ value={value && !WELL_KNOWN_LOGOS.some((l) => l.url === value) ? value : ""}
+ onChange={(e) => {
+ const v = e.target.value.trim();
+ onChange?.(v || undefined);
+ }}
+ className="rounded-lg"
+ size="small"
+ />
+
+ {logoUrl ? (
+ 
{ (e.target as HTMLImageElement).style.display = "none"; }}
+ />
+ ) : null}
+ {name}
+
+ );
+ },
},
{
accessorKey: "alias",
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx
index fc55542a0c9..eadf93d8a96 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx
@@ -8,6 +8,7 @@ import MCPServerCostConfig from "./mcp_server_cost_config";
import MCPPermissionManagement from "./MCPPermissionManagement";
import MCPToolConfiguration from "./mcp_tool_configuration";
import StdioConfiguration from "./StdioConfiguration";
+import MCPLogoSelector from "./MCPLogoSelector";
import { validateMCPServerUrl, validateMCPServerName } from "./utils";
import NotificationsManager from "../molecules/notifications_manager";
import { useMcpOAuthFlow } from "@/hooks/useMcpOAuthFlow";
@@ -41,6 +42,7 @@ const MCPServerEdit: React.FC