diff --git a/client/src/App.tsx b/client/src/App.tsx
index 5937d738..1427a4f6 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -249,6 +249,7 @@ const App = () => {
const {
connectionStatus,
serverCapabilities,
+ serverImplementation,
mcpClient,
requestHistory,
clearRequestHistory,
@@ -920,6 +921,7 @@ const App = () => {
loggingSupported={!!serverCapabilities?.logging || false}
connectionType={connectionType}
setConnectionType={setConnectionType}
+ serverImplementation={serverImplementation}
/>
{
+ if (!icons || icons.length === 0) {
+ return null;
+ }
+
+ const sizeClasses = {
+ sm: "w-4 h-4",
+ md: "w-6 h-6",
+ lg: "w-8 h-8",
+ };
+
+ const sizeClass = sizeClasses[size];
+
+ return (
+
+ {icons.map((icon, index) => (
+

{
+ // Hide broken images
+ e.currentTarget.style.display = "none";
+ }}
+ />
+ ))}
+
+ );
+};
+
+export default IconDisplay;
diff --git a/client/src/components/PromptsTab.tsx b/client/src/components/PromptsTab.tsx
index 424845d0..3e53df11 100644
--- a/client/src/components/PromptsTab.tsx
+++ b/client/src/components/PromptsTab.tsx
@@ -14,6 +14,7 @@ import { useEffect, useState } from "react";
import ListPane from "./ListPane";
import { useCompletionState } from "@/lib/hooks/useCompletionState";
import JsonView from "./JsonView";
+import IconDisplay from "./IconDisplay";
export type Prompt = {
name: string;
@@ -23,6 +24,7 @@ export type Prompt = {
description?: string;
required?: boolean;
}[];
+ icons?: { src: string; mimeType?: string; sizes?: string[] }[];
};
const PromptsTab = ({
@@ -109,6 +111,7 @@ const PromptsTab = ({
}}
renderItem={(prompt) => (
+
{prompt.name}
{prompt.description}
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index b369a967..13a4f24f 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -14,6 +14,7 @@ import {
RefreshCwOff,
Copy,
CheckCheck,
+ Server,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
@@ -40,6 +41,7 @@ import {
import CustomHeaders from "./CustomHeaders";
import { CustomHeaders as CustomHeadersType } from "@/lib/types/customHeaders";
import { useToast } from "../lib/hooks/useToast";
+import IconDisplay, { WithIcons } from "./IconDisplay";
interface SidebarProps {
connectionStatus: ConnectionStatus;
@@ -71,6 +73,9 @@ interface SidebarProps {
setConfig: (config: InspectorConfig) => void;
connectionType: "direct" | "proxy";
setConnectionType: (type: "direct" | "proxy") => void;
+ serverImplementation?:
+ | (WithIcons & { name?: string; version?: string; websiteUrl?: string })
+ | null;
}
const Sidebar = ({
@@ -102,6 +107,7 @@ const Sidebar = ({
setConfig,
connectionType,
setConnectionType,
+ serverImplementation,
}: SidebarProps) => {
const [theme, setTheme] = useTheme();
const [showEnvVars, setShowEnvVars] = useState(false);
@@ -776,6 +782,45 @@ const Sidebar = ({
+ {connectionStatus === "connected" && serverImplementation && (
+
+
+ {(serverImplementation as WithIcons).icons &&
+ (serverImplementation as WithIcons).icons!.length > 0 ? (
+
+ ) : (
+
+ )}
+ {(serverImplementation as { websiteUrl?: string })
+ .websiteUrl ? (
+
+ {serverImplementation.name || "MCP Server"}
+
+ ) : (
+
+ {serverImplementation.name || "MCP Server"}
+
+ )}
+
+ {serverImplementation.version && (
+
+ Version: {serverImplementation.version}
+
+ )}
+
+ )}
+
{loggingSupported && connectionStatus === "connected" && (