+
+ )}
);
}
@@ -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}
@@ -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 234aa8a528..a52ce18156 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 1f27a15b39..b0a42d82de 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/mcp_server_management/MCPServerSelector.tsx b/ui/litellm-dashboard/src/components/mcp_server_management/MCPServerSelector.tsx
index d94a80e502..dc4ed25786 100644
--- a/ui/litellm-dashboard/src/components/mcp_server_management/MCPServerSelector.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_server_management/MCPServerSelector.tsx
@@ -13,6 +13,7 @@ interface MCPServerSelectorProps {
accessToken: string;
placeholder?: string;
disabled?: boolean;
+ teamId?: string | null;
}
const MCPServerSelector: React.FC = ({
@@ -22,8 +23,9 @@ const MCPServerSelector: React.FC = ({
accessToken,
placeholder = "Select MCP servers",
disabled = false,
+ teamId,
}) => {
- const { data: mcpServers = [], isLoading: serversLoading } = useMCPServers();
+ const { data: mcpServers = [], isLoading: serversLoading } = useMCPServers(teamId);
const { data: accessGroups = [], isLoading: groupsLoading } = useMCPAccessGroups();
const loading = serversLoading || groupsLoading;
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 0000000000..be05d74ec2
--- /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 90ecd4731c..74945731a2 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 8130f96856..ea5ccf1c84 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
@@ -1,3 +1,4 @@
+import { useState } from "react";
import { ColumnDef } from "@tanstack/react-table";
import { MCPServer } from "./types";
import { Icon } from "@tremor/react";
@@ -6,6 +7,82 @@ import { getMaskedAndFullUrl } from "./utils";
import { Tooltip } from "antd";
import { CheckOutlined } from "@ant-design/icons";
+const HealthStatusBadge: React.FC<{
+ server: MCPServer;
+ isLoadingHealth?: boolean;
+ isRechecking?: boolean;
+ onRecheck?: (serverId: string) => void;
+}> = ({ server, isLoadingHealth, isRechecking, onRecheck }) => {
+ const [isHovered, setIsHovered] = useState(false);
+ const status = server.status || "unknown";
+ const lastCheck = server.last_health_check;
+ const error = server.health_check_error;
+
+ if (isLoadingHealth || isRechecking) {
+ return (
+
+
+ Checking
+
+ );
+ }
+
+ const getStatusColor = (status: string) => {
+ switch (status) {
+ case "healthy":
+ return "text-green-700 bg-green-50 border border-green-200";
+ case "unhealthy":
+ return "text-red-700 bg-red-50 border border-red-200";
+ default:
+ return "text-gray-600 bg-gray-50 border border-gray-200";
+ }
+ };
+
+ const getStatusIcon = (status: string) => {
+ switch (status) {
+ case "healthy":
+ return "✓";
+ case "unhealthy":
+ return "✗";
+ default:
+ return "?";
+ }
+ };
+
+ const isClickable = !!onRecheck;
+
+ const tooltipContent = (
+
+ setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ onClick={isClickable ? () => onRecheck(server.server_id) : undefined}
+ >
+ {isHovered && isClickable ? "↻" : getStatusIcon(status)}
+ {isHovered && isClickable
+ ? "Recheck"
+ : status.charAt(0).toUpperCase() + status.slice(1)}
+
+
+ );
+};
+
export const mcpServerColumns = (
userRole: string,
onView: (serverId: string) => void,
@@ -13,6 +90,8 @@ export const mcpServerColumns = (
onDelete: (serverId: string) => void,
isLoadingHealth?: boolean,
onByokConnect?: (server: MCPServer) => void,
+ onRecheckHealth?: (serverId: string) => void,
+ recheckingServerIds?: Set,
): ColumnDef[] => [
{
accessorKey: "server_id",
@@ -31,6 +110,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 (
+
-
- {getStatusIcon(status)}
- {status.charAt(0).toUpperCase() + status.slice(1)}
-
-
- );
- },
+ cell: ({ row }) => (
+ = ({
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 = ({
+
diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/MCPEventsDisplay.tsx b/ui/litellm-dashboard/src/components/playground/chat_ui/MCPEventsDisplay.tsx
index b3ec75f01d..cd7ecbf266 100644
--- a/ui/litellm-dashboard/src/components/playground/chat_ui/MCPEventsDisplay.tsx
+++ b/ui/litellm-dashboard/src/components/playground/chat_ui/MCPEventsDisplay.tsx
@@ -1,35 +1,10 @@
import React from "react";
import { Typography, Collapse } from "antd";
+import type { MCPEvent } from "../../mcp_tools/types";
const { Text } = Typography;
const { Panel } = Collapse;
-export interface MCPEvent {
- type: string;
- sequence_number?: number;
- output_index?: number;
- item_id?: string;
- item?: {
- id?: string;
- type?: string;
- server_label?: string;
- tools?: Array<{
- name: string;
- description: string;
- annotations?: {
- read_only?: boolean;
- };
- input_schema?: any;
- }>;
- name?: string;
- arguments?: string;
- output?: string;
- };
- delta?: string;
- arguments?: string;
- timestamp?: number;
-}
-
interface MCPEventsDisplayProps {
events: MCPEvent[];
className?: string;
diff --git a/ui/litellm-dashboard/src/components/playground/llm_calls/responses_api.tsx b/ui/litellm-dashboard/src/components/playground/llm_calls/responses_api.tsx
index c69f82a37b..48d0efca6e 100644
--- a/ui/litellm-dashboard/src/components/playground/llm_calls/responses_api.tsx
+++ b/ui/litellm-dashboard/src/components/playground/llm_calls/responses_api.tsx
@@ -3,7 +3,7 @@ import { MessageType } from "../chat_ui/types";
import { TokenUsage } from "../chat_ui/ResponseMetrics";
import { getProxyBaseUrl } from "@/components/networking";
import NotificationManager from "@/components/molecules/notifications_manager";
-import { MCPEvent } from "../chat_ui/MCPEventsDisplay";
+import type { MCPEvent } from "../../mcp_tools/types";
import { MCPServer } from "../../mcp_tools/types";
import {
CodeInterpreterResult,
@@ -98,20 +98,22 @@ export async function makeOpenAIResponsesRequest(
tools.push({
type: "mcp",
server_label: "litellm",
- server_url: "litellm_proxy/mcp",
+ server_url: `${proxyBaseUrl}/mcp`,
require_approval: "never",
});
} else {
// Individual servers selected - create one entry per server
selectedMCPServers.forEach((serverId) => {
const server = mcpServers?.find((s) => s.server_id === serverId);
- const serverName = server?.alias || server?.server_name || serverId;
+ // Use server_name for both routing and labelling. server_name is the
+ // unique registered identifier; aliases can collide across servers.
+ const routeName = server?.server_name || serverId;
const allowedTools = mcpServerToolRestrictions?.[serverId] || [];
tools.push({
type: "mcp",
- server_label: "litellm",
- server_url: `litellm_proxy/mcp/${serverName}`,
+ server_label: routeName, // unique per request — collisions cause silent tool-routing failures
+ server_url: `${proxyBaseUrl}/mcp/${encodeURIComponent(routeName)}`,
require_approval: "never",
...(allowedTools.length > 0 ? { allowed_tools: allowedTools } : {}),
});
@@ -197,8 +199,7 @@ export async function makeOpenAIResponsesRequest(
if (event.type === "response.output_text.delta" && typeof event.delta === "string") {
const delta = event.delta;
console.log("Text delta", delta);
- // skip pure whitespace/newlines
- if (delta.trim().length > 0) {
+ if (delta.length > 0) {
updateTextUI("assistant", delta, selectedModel);
// Calculate time to first token
diff --git a/ui/litellm-dashboard/src/components/view_logs/ConfigInfoMessage.test.tsx b/ui/litellm-dashboard/src/components/view_logs/ConfigInfoMessage.test.tsx
new file mode 100644
index 0000000000..9e28b27cec
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/view_logs/ConfigInfoMessage.test.tsx
@@ -0,0 +1,41 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { ConfigInfoMessage } from "./ConfigInfoMessage";
+
+describe("ConfigInfoMessage", () => {
+ it("should render the info message when show is true", () => {
+ render( {}} />);
+ expect(screen.getByText("open the settings")).toBeInTheDocument();
+ });
+
+ it("should not render the settings button when onOpenSettings is omitted", () => {
+ render(
+
+ );
+};
+
+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 23aae6cb14..b25e1dcadd 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"
+ />
+
+
+ );
+
+ return (
+ Health Status: {status}
+ {lastCheck && Last Check: {new Date(lastCheck).toLocaleString()}
}
+ {error && (
+
+
+ )}
+ {!lastCheck && !error && Error:
+ {error}
+ No health check data available
}
+ {isClickable && Click to recheck
}
+
+ {logoUrl ? (
+ 
{ (e.target as HTMLImageElement).style.display = "none"; }}
+ />
+ ) : null}
+ {name}
+
+ );
+ },
},
{
accessorKey: "alias",
@@ -81,68 +177,14 @@ export const mcpServerColumns = (
{
id: "health_status",
header: "Health Status",
- cell: ({ row }) => {
- const server = row.original;
- const status = server.status || "unknown";
- const lastCheck = server.last_health_check;
- const error = server.health_check_error;
-
- if (isLoadingHealth) {
- return (
-
-
- Checking
-
- );
- }
-
- const getStatusColor = (status: string) => {
- switch (status) {
- case "healthy":
- return "text-green-700 bg-green-50 border border-green-200";
- case "unhealthy":
- return "text-red-700 bg-red-50 border border-red-200";
- default:
- return "text-gray-600 bg-gray-50 border border-gray-200";
- }
- };
-
- const getStatusIcon = (status: string) => {
- switch (status) {
- case "healthy":
- return "✓";
- case "unhealthy":
- return "✗";
- default:
- return "?";
- }
- };
-
- const tooltipContent = (
-
-
- );
-
- return (
- Health Status: {status}
- {lastCheck && Last Check: {new Date(lastCheck).toLocaleString()}
}
- {error && (
-
-
- )}
- {!lastCheck && !error && Error:
- {error}
- No health check data available
}
-