From d73fb1c30f4fe35873e9d706005a29944853e5dd Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Wed, 4 Feb 2026 12:36:30 +0000
Subject: [PATCH] fix: display tool title field in Inspector UI

Display the MCP tool 'title' field when present in the Inspector UI, with fallback to 'name' when not present. This aligns with the MCP specification where 'title' is the human-friendly display name and 'name' is the programmatic identifier.

Changes:
- Updated tool list rendering to display tool.title || tool.name
- Updated tool details header to display selectedTool.title || selectedTool.name

Fixes #1053

Co-authored-by: Ola Hungerford <olaservo@users.noreply.github.com>
---
 client/src/components/ToolsTab.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 9e1b5d56b..c581e98a6 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -173,7 +173,7 @@ const ToolsTab = ({
                 <IconDisplay icons={(tool as WithIcons).icons} size="sm" />
               </div>
               <div className="flex flex-col flex-1 min-w-0">
-                <span className="truncate">{tool.name}</span>
+                <span className="truncate">{tool.title || tool.name}</span>
                 <span className="text-sm text-gray-500 text-left line-clamp-2">
                   {tool.description}
                 </span>
@@ -196,7 +196,9 @@ const ToolsTab = ({
                 />
               )}
               <h3 className="font-semibold">
-                {selectedTool ? selectedTool.name : "Select a tool"}
+                {selectedTool
+                  ? selectedTool.title || selectedTool.name
+                  : "Select a tool"}
               </h3>
             </div>
           </div>