From 764f02310d262faee11c1c8ce40d5f39c0a04779 Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Fri, 29 Nov 2024 16:26:56 -0500
Subject: [PATCH 1/2] link to MCP docs site in readme

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 3f48b1a..c5e6b2e 100644
--- a/README.md
+++ b/README.md
@@ -26,6 +26,8 @@ The inspector runs both a client UI (default port 5173) and an MCP proxy server
 CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector build/index.js
 ```
 
+For more details on ways to use the inspector, see the [Inspector section of the MCP docs site](https://modelcontextprotocol.io/docs/tools/inspector).
+
 ### From this repository
 
 If you're working on the inspector itself:

From cc17ba8d569297414eac28f7e08bb3580ab98bb0 Mon Sep 17 00:00:00 2001
From: Kees Heuperman <cheuperman@gmail.com>
Date: Sun, 1 Dec 2024 09:50:53 +0100
Subject: [PATCH 2/2] feat: Add button to clear loaded items

Add a button to the ListPane component that clears loaded items. This
will allow the user to clear and reload resources, resource templates,
prompts or tools when they expect the available items to have changed.
---
 client/src/App.tsx                     | 16 ++++++++++++++++
 client/src/components/ListPane.tsx     | 10 ++++++++++
 client/src/components/PromptsTab.tsx   |  3 +++
 client/src/components/ResourcesTab.tsx |  6 ++++++
 client/src/components/ToolsTab.tsx     |  5 ++++-
 5 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 81ce70a..0ee234b 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -525,10 +525,18 @@ const App = () => {
                     clearError("resources");
                     listResources();
                   }}
+                  clearResources={() => {
+                    setResources([]);
+                    setNextResourceCursor(undefined);
+                  }}
                   listResourceTemplates={() => {
                     clearError("resources");
                     listResourceTemplates();
                   }}
+                  clearResourceTemplates={() => {
+                    setResourceTemplates([]);
+                    setNextResourceTemplateCursor(undefined);
+                  }}
                   readResource={(uri) => {
                     clearError("resources");
                     readResource(uri);
@@ -549,6 +557,10 @@ const App = () => {
                     clearError("prompts");
                     listPrompts();
                   }}
+                  clearPrompts={() => {
+                    setPrompts([]);
+                    setNextPromptCursor(undefined);
+                  }}
                   getPrompt={(name, args) => {
                     clearError("prompts");
                     getPrompt(name, args);
@@ -568,6 +580,10 @@ const App = () => {
                     clearError("tools");
                     listTools();
                   }}
+                  clearTools={() => {
+                    setTools([]);
+                    setNextToolCursor(undefined);
+                  }}
                   callTool={(name, params) => {
                     clearError("tools");
                     callTool(name, params);
diff --git a/client/src/components/ListPane.tsx b/client/src/components/ListPane.tsx
index 5fca6a4..90693dd 100644
--- a/client/src/components/ListPane.tsx
+++ b/client/src/components/ListPane.tsx
@@ -3,6 +3,7 @@ import { Button } from "./ui/button";
 type ListPaneProps<T> = {
   items: T[];
   listItems: () => void;
+  clearItems: () => void;
   setSelectedItem: (item: T) => void;
   renderItem: (item: T) => React.ReactNode;
   title: string;
@@ -13,6 +14,7 @@ type ListPaneProps<T> = {
 const ListPane = <T extends object>({
   items,
   listItems,
+  clearItems,
   setSelectedItem,
   renderItem,
   title,
@@ -32,6 +34,14 @@ const ListPane = <T extends object>({
       >
         {buttonText}
       </Button>
+      <Button
+        variant="outline"
+        className="w-full mb-4"
+        onClick={clearItems}
+        disabled={items.length === 0}
+      >
+        Clear
+      </Button>
       <div className="space-y-2 overflow-y-auto max-h-96">
         {items.map((item, index) => (
           <div
diff --git a/client/src/components/PromptsTab.tsx b/client/src/components/PromptsTab.tsx
index 12645cf..df8b8a5 100644
--- a/client/src/components/PromptsTab.tsx
+++ b/client/src/components/PromptsTab.tsx
@@ -22,6 +22,7 @@ export type Prompt = {
 const PromptsTab = ({
   prompts,
   listPrompts,
+  clearPrompts,
   getPrompt,
   selectedPrompt,
   setSelectedPrompt,
@@ -31,6 +32,7 @@ const PromptsTab = ({
 }: {
   prompts: Prompt[];
   listPrompts: () => void;
+  clearPrompts: () => void;
   getPrompt: (name: string, args: Record<string, string>) => void;
   selectedPrompt: Prompt | null;
   setSelectedPrompt: (prompt: Prompt) => void;
@@ -55,6 +57,7 @@ const PromptsTab = ({
       <ListPane
         items={prompts}
         listItems={listPrompts}
+        clearItems={clearPrompts}
         setSelectedItem={(prompt) => {
           setSelectedPrompt(prompt);
           setPromptArgs({});
diff --git a/client/src/components/ResourcesTab.tsx b/client/src/components/ResourcesTab.tsx
index b1224f1..e948881 100644
--- a/client/src/components/ResourcesTab.tsx
+++ b/client/src/components/ResourcesTab.tsx
@@ -16,7 +16,9 @@ const ResourcesTab = ({
   resources,
   resourceTemplates,
   listResources,
+  clearResources,
   listResourceTemplates,
+  clearResourceTemplates,
   readResource,
   selectedResource,
   setSelectedResource,
@@ -28,7 +30,9 @@ const ResourcesTab = ({
   resources: Resource[];
   resourceTemplates: ResourceTemplate[];
   listResources: () => void;
+  clearResources: () => void;
   listResourceTemplates: () => void;
+  clearResourceTemplates: () => void;
   readResource: (uri: string) => void;
   selectedResource: Resource | null;
   setSelectedResource: (resource: Resource | null) => void;
@@ -68,6 +72,7 @@ const ResourcesTab = ({
       <ListPane
         items={resources}
         listItems={listResources}
+        clearItems={clearResources}
         setSelectedItem={(resource) => {
           setSelectedResource(resource);
           readResource(resource.uri);
@@ -90,6 +95,7 @@ const ResourcesTab = ({
       <ListPane
         items={resourceTemplates}
         listItems={listResourceTemplates}
+        clearItems={clearResourceTemplates}
         setSelectedItem={(template) => {
           setSelectedTemplate(template);
           setSelectedResource(null);
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 7b85ccc..1113ebc 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -18,6 +18,7 @@ import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js"
 const ToolsTab = ({
   tools,
   listTools,
+  clearTools,
   callTool,
   selectedTool,
   setSelectedTool,
@@ -27,6 +28,7 @@ const ToolsTab = ({
 }: {
   tools: Tool[];
   listTools: () => void;
+  clearTools: () => void;
   callTool: (name: string, params: Record<string, unknown>) => void;
   selectedTool: Tool | null;
   setSelectedTool: (tool: Tool) => void;
@@ -50,7 +52,7 @@ const ToolsTab = ({
             </pre>
             <h4 className="font-semibold mb-2">Errors:</h4>
             {parsedResult.error.errors.map((error, idx) => (
-              <pre 
+              <pre
                 key={idx}
                 className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64"
               >
@@ -108,6 +110,7 @@ const ToolsTab = ({
       <ListPane
         items={tools}
         listItems={listTools}
+        clearItems={clearTools}
         setSelectedItem={setSelectedTool}
         renderItem={(tool) => (
           <>