add: search tools by name

Reviewed-on: #3

README.md

@@ -1,3 +1,9 @@
+# Original Repo: [https://github.com/modelcontextprotocol/inspector](https://github.com/modelcontextprotocol/inspector)
+
+## Modification Log
+- Containerize
+- Support custom headers for sse transport
+
 # MCP Inspector
 
 The MCP inspector is a developer tool for testing and debugging MCP servers.

client/src/components/ToolsTab.tsx

@@ -41,6 +41,7 @@ const ToolsTab = ({
 }) => {
   const [params, setParams] = useState<Record<string, unknown>>({});
   const [isToolRunning, setIsToolRunning] = useState(false);
+  const [filterText, setFilterText] = useState("");
 
   useEffect(() => {
     const params = Object.entries(
@@ -52,6 +53,12 @@ const ToolsTab = ({
     setParams(Object.fromEntries(params));
   }, [selectedTool]);
 
+  const filteredTools = filterText
+    ? tools.filter((tool) =>
+      tool.name.toLowerCase().includes(filterText.toLowerCase())
+    )
+    : tools;
+
   const renderToolResult = () => {
     if (!toolResult) return null;
 
@@ -124,27 +131,34 @@ const ToolsTab = ({
   return (
     <TabsContent value="tools">
       <div className="grid grid-cols-2 gap-4">
-        <ListPane
-          items={tools}
-          listItems={listTools}
-          clearItems={() => {
-            clearTools();
-            setSelectedTool(null);
-          }}
-          setSelectedItem={setSelectedTool}
-          renderItem={(tool) => (
-            <div className="flex flex-col items-start">
-              <span className="flex-1">{tool.name}</span>
-              <span className="text-sm text-gray-500 text-left">
-                {tool.description}
-              </span>
-            </div>
-          )}
-          title="Tools"
-          buttonText={nextCursor ? "List More Tools" : "List Tools"}
-          isButtonDisabled={!nextCursor && tools.length > 0}
-        />
-
+        <div className="space-y-2">
+          <Input
+            placeholder="Filter tools by name..."
+            value={filterText}
+            onChange={(e) => setFilterText(e.target.value)}
+            className="w-full"
+          />
+          <ListPane
+            items={filteredTools}
+            listItems={listTools}
+            clearItems={() => {
+              clearTools();
+              setSelectedTool(null);
+            }}
+            setSelectedItem={setSelectedTool}
+            renderItem={(tool) => (
+              <div className="flex flex-col items-start">
+                <span className="flex-1">{tool.name}</span>
+                <span className="text-sm text-gray-500 text-left">
+                  {tool.description}
+                </span>
+              </div>
+            )}
+            title="Tools"
+            buttonText={nextCursor ? "List More Tools" : "List Tools"}
+            isButtonDisabled={!nextCursor && tools.length > 0}
+          />
+        </div>
         <div className="bg-card rounded-lg shadow">
           <div className="p-4 border-b border-gray-200 dark:border-gray-800">
             <h3 className="font-semibold">
@@ -301,4 +315,4 @@ const ToolsTab = ({
   );
 };
 
-export default ToolsTab;
+export default ToolsTab;