+ {[
+ { label: "User Alias", value: userAlias },
+ { label: "User Email", value: userEmail },
+ { label: "User ID", value: userId },
+ ].map(({ label, value }) => (
+
+ );
+
+ if (isDefaultAdmin && !userAlias && !userEmail) {
+ return (
+
+ {label}
+ {value ? (
+
+ {value}
+
+ ) : (
+ -
+ )}
+
+ ))}
+
+
+ );
+
+ if (isDefaultAdmin) {
+ return (
+
+ User ID
+
+ {userId}
+
+
+
+
+ )}
);
}
@@ -566,6 +575,7 @@ const ChatMessages: React.FC
+ {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}
@@ -446,9 +462,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"; }}
+ />
+ )}
;
toolResult?: string;
diff --git a/ui/litellm-dashboard/src/components/chat/useChatHistory.ts b/ui/litellm-dashboard/src/components/chat/useChatHistory.ts
index 1f27a15b39f..b0a42d82dea 100644
--- a/ui/litellm-dashboard/src/components/chat/useChatHistory.ts
+++ b/ui/litellm-dashboard/src/components/chat/useChatHistory.ts
@@ -51,8 +51,9 @@ export function useChatHistory(activeConversationId: string | null): {
staleId: boolean;
createConversation: (model: string) => string;
appendMessage: (conversationId: string, message: Omit) => void;
- updateLastAssistantMessage: (conversationId: string, updates: Partial>) => void;
- truncateAfterMessage: (conversationId: string, messageId: string) => void;
+ updateLastAssistantMessage: (conversationId: string, updates: Partial>) => void;
+ /** Remove the message with `messageId` and all subsequent messages from the conversation. */
+ truncateFromMessage: (conversationId: string, messageId: string) => void;
deleteConversation: (id: string) => void;
renameConversation: (id: string, newTitle: string) => void;
setActiveConversationId: (id: string | null) => void;
@@ -148,7 +149,7 @@ export function useChatHistory(activeConversationId: string | null): {
const updateLastAssistantMessage = useCallback(
(
conversationId: string,
- updates: Partial>,
+ updates: Partial>,
) => {
setConversations((prev) => {
const updated = prev.map((conv) => {
@@ -168,7 +169,7 @@ export function useChatHistory(activeConversationId: string | null): {
[],
);
- const truncateAfterMessage = useCallback(
+ const truncateFromMessage = useCallback(
(conversationId: string, messageId: string) => {
setConversations((prev) => {
const updated = prev.map((conv) => {
@@ -222,7 +223,7 @@ export function useChatHistory(activeConversationId: string | null): {
createConversation,
appendMessage,
updateLastAssistantMessage,
- truncateAfterMessage,
+ truncateFromMessage,
deleteConversation,
renameConversation,
setActiveConversationId,
diff --git a/ui/litellm-dashboard/src/components/key_team_helpers/key_list.tsx b/ui/litellm-dashboard/src/components/key_team_helpers/key_list.tsx
index 4cc3367f71d..a31162cb2f2 100644
--- a/ui/litellm-dashboard/src/components/key_team_helpers/key_list.tsx
+++ b/ui/litellm-dashboard/src/components/key_team_helpers/key_list.tsx
@@ -99,6 +99,7 @@ export interface KeyResponse {
user?: {
user_id: string;
user_email: string;
+ user_alias: string | null;
};
}
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/MCPLogoSelector.tsx b/ui/litellm-dashboard/src/components/mcp_tools/MCPLogoSelector.tsx
new file mode 100644
index 00000000000..be05d74ec24
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/mcp_tools/MCPLogoSelector.tsx
@@ -0,0 +1,123 @@
+import React, { useState } from "react";
+import { Input, Tooltip } from "antd";
+import { InfoCircleOutlined, LinkOutlined } from "@ant-design/icons";
+
+const logos = "/ui/assets/logos/";
+
+const WELL_KNOWN_LOGOS: { name: string; url: string }[] = [
+ { name: "GitHub", url: `${logos}github.svg` },
+ { name: "Slack", url: `${logos}slack.svg` },
+ { name: "Notion", url: `${logos}notion.svg` },
+ { name: "Linear", url: `${logos}linear.svg` },
+ { name: "Jira", url: `${logos}jira.svg` },
+ { name: "Figma", url: `${logos}figma.svg` },
+ { name: "Gmail", url: `${logos}gmail.svg` },
+ { name: "Google Drive", url: `${logos}google_drive.svg` },
+ { name: "Stripe", url: `${logos}stripe.svg` },
+ { name: "Shopify", url: `${logos}shopify.svg` },
+ { name: "Salesforce", url: `${logos}salesforce.svg` },
+ { name: "HubSpot", url: `${logos}hubspot.svg` },
+ { name: "Twilio", url: `${logos}twilio.svg` },
+ { name: "Cloudflare", url: `${logos}cloudflare.svg` },
+ { name: "Sentry", url: `${logos}sentry.svg` },
+ { name: "PostgreSQL", url: `${logos}postgresql.svg` },
+ { name: "Snowflake", url: `${logos}snowflake.svg` },
+ { name: "Zapier", url: `${logos}zapier.svg` },
+ { name: "Google", url: `${logos}google.svg` },
+ { name: "GitLab", url: `${logos}gitlab.svg` },
+];
+
+interface MCPLogoSelectorProps {
+ value?: string;
+ onChange?: (url: string | undefined) => 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