Merge pull request 'add: search tools by name' (#4 ) from tool_filter into main

Reviewed-on: #4
add: search tools by name
2025-05-16 15:26:02 +00:00 · 2025-05-16 16:25:01 +01:00 · 2025-05-16 14:57:48 +00:00 · 2025-05-16 14:57:32 +00:00 · 2025-05-16 15:56:36 +01:00 · 2025-05-16 14:48:48 +00:00
3 changed files with 100 additions and 77 deletions
--- a/README.md
+++ b/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.
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -362,7 +362,64 @@ const Sidebar = ({
              </div>
            </>
          )}
+          {transportType === "sse" && (
+              <div className="space-y-2">
+                <Button
+                    variant="outline"
+                    onClick={() => setShowCustomHeaders(!showCustomHeaders)}
+                    className="flex items-center w-full"
+                    data-testid="custom-headers-button"
+                    aria-expanded={showCustomHeaders}
+                >
+                  {showCustomHeaders ? (
+                      <ChevronDown className="w-4 h-4 mr-2" />
+                  ) : (
+                      <ChevronRight className="w-4 h-4 mr-2" />
+                  )}
+                  Custom Headers
+                </Button>
+                {showCustomHeaders && (
+                    <div className="space-y-2">
+                      {customHeaders.map((header, index) => (
+                          <div key={index} className="space-y-2">
+                            <label className="text-sm font-medium">Header Name</label>
+                            <Input
+                                placeholder="Header Name"
+                                value={header[0]}
+                                onChange={(e) => updateCustomHeader(index, 'key', e.target.value)}
+                                className="font-mono"
+                            />
+                            <label className="text-sm font-medium">Header Value</label>
+                            <Input
+                                placeholder="Header Value"
+                                value={header[1]}
+                                onChange={(e) => updateCustomHeader(index, 'value',  e.target.value)}
+                                className="font-mono"
+                            />
+                            <Button
+                                variant="destructive"
+                                size="sm"
+                                onClick={() => removeCustomHeader(index)}
+                                className="w-full"
+                            >
+                              Remove Header
+                            </Button>
+                          </div>
+                      ))}
+                      <Button
+                          variant="outline"
+                          className="w-full mt-2"
+                          onClick={() => {
+                            setCustomHeaders([ ...customHeaders, ["", ""]]);
+                          }}
+                      >
+                        Add Custom Header
+                      </Button>
+                    </div>
+                )}
+              </div>

+          )}
          {transportType === "stdio" && (
            <div className="space-y-2">
              <Button
@@ -743,61 +800,7 @@ const Sidebar = ({
            )}
          </div>

-          <div className="space-y-2">
-            <Button
-              variant="outline"
-              onClick={() => setShowCustomHeaders(!showCustomHeaders)}
-              className="flex items-center w-full"
-              data-testid="custom-headers-button"
-              aria-expanded={showCustomHeaders}
-            >
-              {showCustomHeaders ? (
-                <ChevronDown className="w-4 h-4 mr-2" />
-              ) : (
-                <ChevronRight className="w-4 h-4 mr-2" />
-              )}
-              Custom Headers
-            </Button>
-            {showCustomHeaders && (
-              <div className="space-y-2">
-                {customHeaders.map((header, index) => (
-                  <div key={index} className="space-y-2">
-                    <label className="text-sm font-medium">Header Name</label>
-                    <Input
-                      placeholder="Header Name"
-                      value={header[0]}
-                      onChange={(e) => updateCustomHeader(index, 'key', e.target.value)}
-                      className="font-mono"
-                    />
-                    <label className="text-sm font-medium">Header Value</label>
-                    <Input
-                      placeholder="Header Value"
-                      value={header[1]}
-                      onChange={(e) => updateCustomHeader(index, 'value',  e.target.value)}
-                      className="font-mono"
-                    />
-                    <Button
-                      variant="destructive"
-                      size="sm"
-                      onClick={() => removeCustomHeader(index)}
-                      className="w-full"
-                    >
-                      Remove Header
-                    </Button>
-                  </div>
-                ))}
-                <Button
-                  variant="outline"
-                  className="w-full mt-2"
-                  onClick={() => {
-                    setCustomHeaders([ ...customHeaders, ["", ""]]);
-                  }}
-                >
-                  Add Custom Header
-                </Button>
-              </div>
-            )}
-          </div>
+
        </div>
      </div>
      <div className="p-4 border-t">
--- a/client/src/components/ToolsTab.tsx
+++ b/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">
Author	SHA1	Message	Date
hzhang	306c2ea2e5	Merge pull request 'add: search tools by name' (#4 ) from tool_filter into main Reviewed-on: #4	2025-05-16 15:26:02 +00:00
hzhang	633708d0b5	add: search tools by name	2025-05-16 16:25:01 +01:00
hzhang	9a307f5d16	Merge pull request 'improve: only show custom headers when transportType is sse' (#3 ) from move_custom_headers_under_sse into main Reviewed-on: #3	2025-05-16 14:57:48 +00:00
hzhang	45641b141d	Merge branch 'main' into move_custom_headers_under_sse	2025-05-16 14:57:32 +00:00
hzhang	0ed0e39c35	improve: only show custom headers when transportType is sse	2025-05-16 15:56:36 +01:00
hzhang	7f0cd8274e	Update README.md	2025-05-16 14:48:48 +00:00
hzhang	a2ddd7c5d4	Update README.md	2025-05-16 14:48:11 +00:00
hzhang	9f9402f343	Merge pull request 'add: support custom headers' (#2 ) from sse_custom_header into main Reviewed-on: #2	2025-05-16 14:35:45 +00:00