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 01/34] 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 02/34] 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) => (
           <>

From b845444fabf2f893e3014a7673005c2188271393 Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Wed, 4 Dec 2024 09:56:04 -0800
Subject: [PATCH 03/34] update sdk to 1.0.3

---
 client/package.json |  2 +-
 package-lock.json   | 11 +++++------
 server/package.json |  2 +-
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/client/package.json b/client/package.json
index 91bc418..5ed07ee 100644
--- a/client/package.json
+++ b/client/package.json
@@ -21,7 +21,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.0.1",
+    "@modelcontextprotocol/sdk": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.2",
diff --git a/package-lock.json b/package-lock.json
index a6dee35..fb35e2c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,7 +32,7 @@
       "version": "0.2.7",
       "license": "MIT",
       "dependencies": {
-        "@modelcontextprotocol/sdk": "^1.0.1",
+        "@modelcontextprotocol/sdk": "^1.0.3",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-select": "^2.1.2",
@@ -1203,10 +1203,9 @@
       "link": true
     },
     "node_modules/@modelcontextprotocol/sdk": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.0.1.tgz",
-      "integrity": "sha512-slLdFaxQJ9AlRg+hw28iiTtGvShAOgOKXcD0F91nUcRYiOMuS9ZBYjcdNZRXW9G5JQ511GRTdUy1zQVZDpJ+4w==",
-      "license": "MIT",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.0.3.tgz",
+      "integrity": "sha512-2as3cX/VJ0YBHGmdv3GFyTpoM8q2gqE98zh3Vf1NwnsSY0h3mvoO07MUzfygCKkWsFjcZm4otIiqD6Xh7kiSBQ==",
       "dependencies": {
         "content-type": "^1.0.5",
         "raw-body": "^3.0.0",
@@ -6929,7 +6928,7 @@
       "version": "0.2.7",
       "license": "MIT",
       "dependencies": {
-        "@modelcontextprotocol/sdk": "^1.0.1",
+        "@modelcontextprotocol/sdk": "^1.0.3",
         "cors": "^2.8.5",
         "eventsource": "^2.0.2",
         "express": "^4.21.0",
diff --git a/server/package.json b/server/package.json
index 41b0a61..d7864a4 100644
--- a/server/package.json
+++ b/server/package.json
@@ -27,7 +27,7 @@
     "typescript": "^5.6.2"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.0.1",
+    "@modelcontextprotocol/sdk": "^1.0.3",
     "cors": "^2.8.5",
     "eventsource": "^2.0.2",
     "express": "^4.21.0",

From f04b161411eb8071189bd49f77145511e8d83e45 Mon Sep 17 00:00:00 2001
From: = <1936278+evalstate@users.noreply.github.com>
Date: Thu, 5 Dec 2024 08:11:35 +0000
Subject: [PATCH 04/34] Allow setting timeout via "timeout" URL parameter

---
 client/src/App.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 0ee234b..2c84377 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -59,6 +59,7 @@ const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
 
 const params = new URLSearchParams(window.location.search);
 const PROXY_PORT = params.get("proxyPort") ?? "3000";
+const REQUEST_TIMEOUT = parseInt(params.get("timeout") ?? "") || DEFAULT_REQUEST_TIMEOUT_MSEC;
 const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`;
 
 const App = () => {
@@ -243,7 +244,7 @@ const App = () => {
       const abortController = new AbortController();
       const timeoutId = setTimeout(() => {
         abortController.abort("Request timed out");
-      }, DEFAULT_REQUEST_TIMEOUT_MSEC);
+      }, REQUEST_TIMEOUT);
 
       let response;
       try {

From ed5017d73ed108e8f99ec4a16a7f3bb977d7de0e Mon Sep 17 00:00:00 2001
From: evalstate <1936278+evalstate@users.noreply.github.com>
Date: Thu, 5 Dec 2024 15:32:55 +0000
Subject: [PATCH 05/34] Two fixes to the Tools Tab: 1) Tool Parameters were
 stale when switching between Tools causing incorrect messages to be sent. 2)
 Tool List is emptied when "Clear" is selected, so invalid messages can't be
 sent.

---
 client/src/components/ToolsTab.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 1113ebc..55dff83 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -10,7 +10,7 @@ import {
   CallToolResultSchema,
 } from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle, Send } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
 
 import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js";
@@ -31,12 +31,15 @@ const ToolsTab = ({
   clearTools: () => void;
   callTool: (name: string, params: Record<string, unknown>) => void;
   selectedTool: Tool | null;
-  setSelectedTool: (tool: Tool) => void;
+  setSelectedTool: (tool: Tool | null) => void;
   toolResult: CompatibilityCallToolResult | null;
   nextCursor: ListToolsResult["nextCursor"];
   error: string | null;
 }) => {
   const [params, setParams] = useState<Record<string, unknown>>({});
+  useEffect(() => {
+    setParams({});
+  }, [selectedTool]);
 
   const renderToolResult = () => {
     if (!toolResult) return null;
@@ -110,7 +113,10 @@ const ToolsTab = ({
       <ListPane
         items={tools}
         listItems={listTools}
-        clearItems={clearTools}
+        clearItems={() => {
+          clearTools();
+          setSelectedTool(null);
+        }}
         setSelectedItem={setSelectedTool}
         renderItem={(tool) => (
           <>

From 576ff0043a8f2c3e01430ea4e7aeb57e9e571266 Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Thu, 5 Dec 2024 08:01:57 -0800
Subject: [PATCH 06/34] bump version to 0.3.0

---
 client/package.json |  2 +-
 package-lock.json   | 12 ++++++------
 package.json        |  6 +++---
 server/package.json |  2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/client/package.json b/client/package.json
index 5ed07ee..888495c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "description": "Client-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
diff --git a/package-lock.json b/package-lock.json
index fb35e2c..26f07ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,20 +1,20 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@modelcontextprotocol/inspector",
-      "version": "0.2.7",
+      "version": "0.3.0",
       "license": "MIT",
       "workspaces": [
         "client",
         "server"
       ],
       "dependencies": {
-        "@modelcontextprotocol/inspector-client": "0.2.7",
-        "@modelcontextprotocol/inspector-server": "0.2.7",
+        "@modelcontextprotocol/inspector-client": "0.3.0",
+        "@modelcontextprotocol/inspector-server": "0.3.0",
         "concurrently": "^9.0.1",
         "spawn-rx": "^5.1.0",
         "ts-node": "^10.9.2"
@@ -29,7 +29,7 @@
     },
     "client": {
       "name": "@modelcontextprotocol/inspector-client",
-      "version": "0.2.7",
+      "version": "0.3.0",
       "license": "MIT",
       "dependencies": {
         "@modelcontextprotocol/sdk": "^1.0.3",
@@ -6925,7 +6925,7 @@
     },
     "server": {
       "name": "@modelcontextprotocol/inspector-server",
-      "version": "0.2.7",
+      "version": "0.3.0",
       "license": "MIT",
       "dependencies": {
         "@modelcontextprotocol/sdk": "^1.0.3",
diff --git a/package.json b/package.json
index a86624f..9061a7a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "description": "Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -33,8 +33,8 @@
     "publish-all": "npm publish --workspaces --access public && npm publish --access public"
   },
   "dependencies": {
-    "@modelcontextprotocol/inspector-client": "0.2.7",
-    "@modelcontextprotocol/inspector-server": "0.2.7",
+    "@modelcontextprotocol/inspector-client": "0.3.0",
+    "@modelcontextprotocol/inspector-server": "0.3.0",
     "concurrently": "^9.0.1",
     "spawn-rx": "^5.1.0",
     "ts-node": "^10.9.2"
diff --git a/server/package.json b/server/package.json
index d7864a4..c79e7d2 100644
--- a/server/package.json
+++ b/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-server",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "description": "Server-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",

From 9ea77a729cfc9894e3e8d0c5c4fc3f10a0d69c65 Mon Sep 17 00:00:00 2001
From: "devin-ai-integration[bot]"
 <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 6 Dec 2024 19:33:08 +0000
Subject: [PATCH 07/34] chore: add shell-quote package and types

---
 package-lock.json | 20 ++++++++++++++++----
 package.json      |  4 +++-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 26f07ff..1e81bd0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,9 @@
       },
       "devDependencies": {
         "@types/node": "^22.7.5",
-        "prettier": "3.3.3"
+        "@types/shell-quote": "^1.7.5",
+        "prettier": "3.3.3",
+        "shell-quote": "^1.8.2"
       }
     },
     "client": {
@@ -2393,6 +2395,13 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/shell-quote": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@types/shell-quote/-/shell-quote-1.7.5.tgz",
+      "integrity": "sha512-+UE8GAGRPbJVQDdxi16dgadcBfQ+KG2vgZhV1+3A1XmHbmwcdwhCUwIdy+d3pAGrbvgRoVSjeI9vOWyq376Yzw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.5.13",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.13.tgz",
@@ -5688,10 +5697,13 @@
       }
     },
     "node_modules/shell-quote": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
-      "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.2.tgz",
+      "integrity": "sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==",
       "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
diff --git a/package.json b/package.json
index 9061a7a..bdc835a 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,8 @@
   },
   "devDependencies": {
     "@types/node": "^22.7.5",
-    "prettier": "3.3.3"
+    "@types/shell-quote": "^1.7.5",
+    "prettier": "3.3.3",
+    "shell-quote": "^1.8.2"
   }
 }

From cc1ae05f9d2fcbca82f1380d0df15ffd449a4ab7 Mon Sep 17 00:00:00 2001
From: "devin-ai-integration[bot]"
 <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 6 Dec 2024 19:34:03 +0000
Subject: [PATCH 08/34] fix: use shell-quote for proper argument parsing

---
 server/src/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/server/src/index.ts b/server/src/index.ts
index a217f44..940a008 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -3,6 +3,7 @@
 import cors from "cors";
 import EventSource from "eventsource";
 import { parseArgs } from "node:util";
+import { parse as shellParseArgs } from 'shell-quote';
 
 import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
 import {
@@ -38,7 +39,7 @@ const createTransport = async (query: express.Request["query"]) => {
 
   if (transportType === "stdio") {
     const command = query.command as string;
-    const origArgs = (query.args as string).split(/\s+/);
+    const origArgs = shellParseArgs(query.args as string) as string[];
     const env = query.env ? JSON.parse(query.env as string) : undefined;
 
     const { cmd, args } = findActualExecutable(command, origArgs);

From c340e5f1ed69b32abd18ae255c5b677339b82166 Mon Sep 17 00:00:00 2001
From: "devin-ai-integration[bot]"
 <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 6 Dec 2024 19:43:11 +0000
Subject: [PATCH 09/34] chore: move shell-quote to main dependencies

---
 package-lock.json | 4 ++--
 package.json      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1e81bd0..13f4248 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@modelcontextprotocol/inspector-client": "0.3.0",
         "@modelcontextprotocol/inspector-server": "0.3.0",
         "concurrently": "^9.0.1",
+        "shell-quote": "^1.8.2",
         "spawn-rx": "^5.1.0",
         "ts-node": "^10.9.2"
       },
@@ -25,8 +26,7 @@
       "devDependencies": {
         "@types/node": "^22.7.5",
         "@types/shell-quote": "^1.7.5",
-        "prettier": "3.3.3",
-        "shell-quote": "^1.8.2"
+        "prettier": "3.3.3"
       }
     },
     "client": {
diff --git a/package.json b/package.json
index bdc835a..c262588 100644
--- a/package.json
+++ b/package.json
@@ -36,13 +36,13 @@
     "@modelcontextprotocol/inspector-client": "0.3.0",
     "@modelcontextprotocol/inspector-server": "0.3.0",
     "concurrently": "^9.0.1",
+    "shell-quote": "^1.8.2",
     "spawn-rx": "^5.1.0",
     "ts-node": "^10.9.2"
   },
   "devDependencies": {
     "@types/node": "^22.7.5",
     "@types/shell-quote": "^1.7.5",
-    "prettier": "3.3.3",
-    "shell-quote": "^1.8.2"
+    "prettier": "3.3.3"
   }
 }

From bd6586bbad77af75391296cf3bfaed7dc6941c55 Mon Sep 17 00:00:00 2001
From: "devin-ai-integration[bot]"
 <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 6 Dec 2024 19:43:48 +0000
Subject: [PATCH 10/34] style: apply prettier formatting

---
 CODE_OF_CONDUCT.md    | 22 +++++++++++-----------
 SECURITY.md           |  1 +
 client/src/App.tsx    |  3 ++-
 client/src/main.tsx   |  4 ++--
 client/vite.config.ts |  8 ++++----
 server/src/index.ts   |  2 +-
 6 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 05c32c6..7e832b3 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within
diff --git a/SECURITY.md b/SECURITY.md
index 21f8e59..9d54767 100644
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -1,4 +1,5 @@
 # Security Policy
+
 Thank you for helping us keep the inspector secure.
 
 ## Reporting Security Issues
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 2c84377..8a4df79 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -59,7 +59,8 @@ const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
 
 const params = new URLSearchParams(window.location.search);
 const PROXY_PORT = params.get("proxyPort") ?? "3000";
-const REQUEST_TIMEOUT = parseInt(params.get("timeout") ?? "") || DEFAULT_REQUEST_TIMEOUT_MSEC;
+const REQUEST_TIMEOUT =
+  parseInt(params.get("timeout") ?? "") || DEFAULT_REQUEST_TIMEOUT_MSEC;
 const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`;
 
 const App = () => {
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 8ed57a0..450213d 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -1,7 +1,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import App from "./App.tsx";
 import "./index.css";
 
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 3b6c407..dd3bd01 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -14,8 +14,8 @@ export default defineConfig({
     minify: false,
     rollupOptions: {
       output: {
-        manualChunks: undefined
-      }
-    }
-  }
+        manualChunks: undefined,
+      },
+    },
+  },
 });
diff --git a/server/src/index.ts b/server/src/index.ts
index 940a008..b82b17d 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -3,7 +3,7 @@
 import cors from "cors";
 import EventSource from "eventsource";
 import { parseArgs } from "node:util";
-import { parse as shellParseArgs } from 'shell-quote';
+import { parse as shellParseArgs } from "shell-quote";
 
 import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
 import {

From fdc521646fa97d6d70da984e538024c77171848e Mon Sep 17 00:00:00 2001
From: Jeffrey Ling <jeffrey.r.ling@gmail.com>
Date: Fri, 6 Dec 2024 12:48:48 -0700
Subject: [PATCH 11/34] no need to prettier format everything right now

---
 CODE_OF_CONDUCT.md    | 22 +++++++++++-----------
 SECURITY.md           |  1 -
 client/src/App.tsx    |  3 +--
 client/src/main.tsx   |  4 ++--
 client/vite.config.ts |  8 ++++----
 5 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 7e832b3..05c32c6 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-- Demonstrating empathy and kindness toward other people
-- Being respectful of differing opinions, viewpoints, and experiences
-- Giving and gracefully accepting constructive feedback
-- Accepting responsibility and apologizing to those affected by our mistakes,
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-- Focusing on what is best not just for us as individuals, but for the
+* Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-- The use of sexualized language or imagery, and sexual attention or
+* The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-- Trolling, insulting or derogatory comments, and personal or political attacks
-- Public or private harassment
-- Publishing others' private information, such as a physical or email
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
   address, without their explicit permission
-- Other conduct which could reasonably be considered inappropriate in a
+* Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior, harassment of an
+standards, including sustained inappropriate behavior,  harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within
diff --git a/SECURITY.md b/SECURITY.md
index 9d54767..21f8e59 100644
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -1,5 +1,4 @@
 # Security Policy
-
 Thank you for helping us keep the inspector secure.
 
 ## Reporting Security Issues
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 8a4df79..2c84377 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -59,8 +59,7 @@ const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
 
 const params = new URLSearchParams(window.location.search);
 const PROXY_PORT = params.get("proxyPort") ?? "3000";
-const REQUEST_TIMEOUT =
-  parseInt(params.get("timeout") ?? "") || DEFAULT_REQUEST_TIMEOUT_MSEC;
+const REQUEST_TIMEOUT = parseInt(params.get("timeout") ?? "") || DEFAULT_REQUEST_TIMEOUT_MSEC;
 const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`;
 
 const App = () => {
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 450213d..8ed57a0 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -1,7 +1,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { ToastContainer } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 import App from "./App.tsx";
 import "./index.css";
 
diff --git a/client/vite.config.ts b/client/vite.config.ts
index dd3bd01..3b6c407 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -14,8 +14,8 @@ export default defineConfig({
     minify: false,
     rollupOptions: {
       output: {
-        manualChunks: undefined,
-      },
-    },
-  },
+        manualChunks: undefined
+      }
+    }
+  }
 });

From e96b3be15941c36d51fcb5f1c88b430a1eb5fefb Mon Sep 17 00:00:00 2001
From: "devin-ai-integration[bot]"
 <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Sat, 7 Dec 2024 06:15:21 +0000
Subject: [PATCH 12/34] feat: implement capability negotiation for UI tabs

- Add CapabilityContext to manage server capabilities
- Disable tabs when server doesn't support feature
- Show error message in tab content when capability missing
- Implements #85
---
 client/src/App.tsx                     | 287 +++++++++++++------------
 client/src/components/PromptsTab.tsx   | 164 +++++++-------
 client/src/components/ResourcesTab.tsx | 267 ++++++++++++-----------
 client/src/components/ToolsTab.tsx     | 220 ++++++++++---------
 client/src/lib/contexts.ts             |  12 ++
 5 files changed, 509 insertions(+), 441 deletions(-)
 create mode 100644 client/src/lib/contexts.ts

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 2c84377..2f36450 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -55,6 +55,8 @@ import SamplingTab, { PendingRequest } from "./components/SamplingTab";
 import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
 
+import { CapabilityContext, ServerCapabilities } from "@/lib/contexts";
+
 const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
 
 const params = new URLSearchParams(window.location.search);
@@ -66,6 +68,7 @@ const App = () => {
   const [connectionStatus, setConnectionStatus] = useState<
     "disconnected" | "connected" | "error"
   >("disconnected");
+  const [serverCapabilities, setServerCapabilities] = useState<ServerCapabilities | null>(null);
   const [resources, setResources] = useState<Resource[]>([]);
   const [resourceTemplates, setResourceTemplates] = useState<
     ResourceTemplate[]
@@ -217,6 +220,13 @@ const App = () => {
     rootsRef.current = roots;
   }, [roots]);
 
+  useEffect(() => {
+    if (mcpClient) {
+      const capabilities = mcpClient.getServerCapabilities();
+      setServerCapabilities(capabilities ?? null);
+    }
+  }, [mcpClient]);
+
   const pushHistory = (request: object, response?: object) => {
     setRequestHistory((prev) => [
       ...prev,
@@ -444,6 +454,9 @@ const App = () => {
 
       await client.connect(clientTransport);
 
+      const capabilities = client.getServerCapabilities();
+      setServerCapabilities(capabilities ?? null);
+
       client.setRequestHandler(CreateMessageRequestSchema, (request) => {
         return new Promise<CreateMessageResult>((resolve, reject) => {
           setPendingSampleRequests((prev) => [
@@ -485,143 +498,145 @@ const App = () => {
       <div className="flex-1 flex flex-col overflow-hidden">
         <div className="flex-1 overflow-auto">
           {mcpClient ? (
-            <Tabs defaultValue="resources" className="w-full p-4">
-              <TabsList className="mb-4 p-0">
-                <TabsTrigger value="resources">
-                  <Files className="w-4 h-4 mr-2" />
-                  Resources
-                </TabsTrigger>
-                <TabsTrigger value="prompts">
-                  <MessageSquare className="w-4 h-4 mr-2" />
-                  Prompts
-                </TabsTrigger>
-                <TabsTrigger value="tools">
-                  <Hammer className="w-4 h-4 mr-2" />
-                  Tools
-                </TabsTrigger>
-                <TabsTrigger value="ping">
-                  <Bell className="w-4 h-4 mr-2" />
-                  Ping
-                </TabsTrigger>
-                <TabsTrigger value="sampling" className="relative">
-                  <Hash className="w-4 h-4 mr-2" />
-                  Sampling
-                  {pendingSampleRequests.length > 0 && (
-                    <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
-                      {pendingSampleRequests.length}
-                    </span>
-                  )}
-                </TabsTrigger>
-                <TabsTrigger value="roots">
-                  <FolderTree className="w-4 h-4 mr-2" />
-                  Roots
-                </TabsTrigger>
-              </TabsList>
+            <CapabilityContext.Provider value={serverCapabilities}>
+              <Tabs defaultValue="resources" className="w-full p-4">
+                <TabsList className="mb-4 p-0">
+                  <TabsTrigger value="resources" disabled={!serverCapabilities?.resources}>
+                    <Files className="w-4 h-4 mr-2" />
+                    Resources
+                  </TabsTrigger>
+                  <TabsTrigger value="prompts" disabled={!serverCapabilities?.prompts}>
+                    <MessageSquare className="w-4 h-4 mr-2" />
+                    Prompts
+                  </TabsTrigger>
+                  <TabsTrigger value="tools" disabled={!serverCapabilities?.tools}>
+                    <Hammer className="w-4 h-4 mr-2" />
+                    Tools
+                  </TabsTrigger>
+                  <TabsTrigger value="ping">
+                    <Bell className="w-4 h-4 mr-2" />
+                    Ping
+                  </TabsTrigger>
+                  <TabsTrigger value="sampling" className="relative">
+                    <Hash className="w-4 h-4 mr-2" />
+                    Sampling
+                    {pendingSampleRequests.length > 0 && (
+                      <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
+                        {pendingSampleRequests.length}
+                      </span>
+                    )}
+                  </TabsTrigger>
+                  <TabsTrigger value="roots">
+                    <FolderTree className="w-4 h-4 mr-2" />
+                    Roots
+                  </TabsTrigger>
+                </TabsList>
 
-              <div className="w-full">
-                <ResourcesTab
-                  resources={resources}
-                  resourceTemplates={resourceTemplates}
-                  listResources={() => {
-                    clearError("resources");
-                    listResources();
-                  }}
-                  clearResources={() => {
-                    setResources([]);
-                    setNextResourceCursor(undefined);
-                  }}
-                  listResourceTemplates={() => {
-                    clearError("resources");
-                    listResourceTemplates();
-                  }}
-                  clearResourceTemplates={() => {
-                    setResourceTemplates([]);
-                    setNextResourceTemplateCursor(undefined);
-                  }}
-                  readResource={(uri) => {
-                    clearError("resources");
-                    readResource(uri);
-                  }}
-                  selectedResource={selectedResource}
-                  setSelectedResource={(resource) => {
-                    clearError("resources");
-                    setSelectedResource(resource);
-                  }}
-                  resourceContent={resourceContent}
-                  nextCursor={nextResourceCursor}
-                  nextTemplateCursor={nextResourceTemplateCursor}
-                  error={errors.resources}
-                />
-                <PromptsTab
-                  prompts={prompts}
-                  listPrompts={() => {
-                    clearError("prompts");
-                    listPrompts();
-                  }}
-                  clearPrompts={() => {
-                    setPrompts([]);
-                    setNextPromptCursor(undefined);
-                  }}
-                  getPrompt={(name, args) => {
-                    clearError("prompts");
-                    getPrompt(name, args);
-                  }}
-                  selectedPrompt={selectedPrompt}
-                  setSelectedPrompt={(prompt) => {
-                    clearError("prompts");
-                    setSelectedPrompt(prompt);
-                  }}
-                  promptContent={promptContent}
-                  nextCursor={nextPromptCursor}
-                  error={errors.prompts}
-                />
-                <ToolsTab
-                  tools={tools}
-                  listTools={() => {
-                    clearError("tools");
-                    listTools();
-                  }}
-                  clearTools={() => {
-                    setTools([]);
-                    setNextToolCursor(undefined);
-                  }}
-                  callTool={(name, params) => {
-                    clearError("tools");
-                    callTool(name, params);
-                  }}
-                  selectedTool={selectedTool}
-                  setSelectedTool={(tool) => {
-                    clearError("tools");
-                    setSelectedTool(tool);
-                    setToolResult(null);
-                  }}
-                  toolResult={toolResult}
-                  nextCursor={nextToolCursor}
-                  error={errors.tools}
-                />
-                <ConsoleTab />
-                <PingTab
-                  onPingClick={() => {
-                    void makeRequest(
-                      {
-                        method: "ping" as const,
-                      },
-                      EmptyResultSchema,
-                    );
-                  }}
-                />
-                <SamplingTab
-                  pendingRequests={pendingSampleRequests}
-                  onApprove={handleApproveSampling}
-                  onReject={handleRejectSampling}
-                />
-                <RootsTab
-                  roots={roots}
-                  setRoots={setRoots}
-                  onRootsChange={handleRootsChange}
-                />
-              </div>
-            </Tabs>
+                <div className="w-full">
+                  <ResourcesTab
+                    resources={resources}
+                    resourceTemplates={resourceTemplates}
+                    listResources={() => {
+                      clearError("resources");
+                      listResources();
+                    }}
+                    clearResources={() => {
+                      setResources([]);
+                      setNextResourceCursor(undefined);
+                    }}
+                    listResourceTemplates={() => {
+                      clearError("resources");
+                      listResourceTemplates();
+                    }}
+                    clearResourceTemplates={() => {
+                      setResourceTemplates([]);
+                      setNextResourceTemplateCursor(undefined);
+                    }}
+                    readResource={(uri) => {
+                      clearError("resources");
+                      readResource(uri);
+                    }}
+                    selectedResource={selectedResource}
+                    setSelectedResource={(resource) => {
+                      clearError("resources");
+                      setSelectedResource(resource);
+                    }}
+                    resourceContent={resourceContent}
+                    nextCursor={nextResourceCursor}
+                    nextTemplateCursor={nextResourceTemplateCursor}
+                    error={errors.resources}
+                  />
+                  <PromptsTab
+                    prompts={prompts}
+                    listPrompts={() => {
+                      clearError("prompts");
+                      listPrompts();
+                    }}
+                    clearPrompts={() => {
+                      setPrompts([]);
+                      setNextPromptCursor(undefined);
+                    }}
+                    getPrompt={(name, args) => {
+                      clearError("prompts");
+                      getPrompt(name, args);
+                    }}
+                    selectedPrompt={selectedPrompt}
+                    setSelectedPrompt={(prompt) => {
+                      clearError("prompts");
+                      setSelectedPrompt(prompt);
+                    }}
+                    promptContent={promptContent}
+                    nextCursor={nextPromptCursor}
+                    error={errors.prompts}
+                  />
+                  <ToolsTab
+                    tools={tools}
+                    listTools={() => {
+                      clearError("tools");
+                      listTools();
+                    }}
+                    clearTools={() => {
+                      setTools([]);
+                      setNextToolCursor(undefined);
+                    }}
+                    callTool={(name, params) => {
+                      clearError("tools");
+                      callTool(name, params);
+                    }}
+                    selectedTool={selectedTool}
+                    setSelectedTool={(tool) => {
+                      clearError("tools");
+                      setSelectedTool(tool);
+                      setToolResult(null);
+                    }}
+                    toolResult={toolResult}
+                    nextCursor={nextToolCursor}
+                    error={errors.tools}
+                  />
+                  <ConsoleTab />
+                  <PingTab
+                    onPingClick={() => {
+                      void makeRequest(
+                        {
+                          method: "ping" as const,
+                        },
+                        EmptyResultSchema,
+                      );
+                    }}
+                  />
+                  <SamplingTab
+                    pendingRequests={pendingSampleRequests}
+                    onApprove={handleApproveSampling}
+                    onReject={handleRejectSampling}
+                  />
+                  <RootsTab
+                    roots={roots}
+                    setRoots={setRoots}
+                    onRootsChange={handleRootsChange}
+                  />
+                </div>
+              </Tabs>
+            </CapabilityContext.Provider>
           ) : (
             <div className="flex items-center justify-center h-full">
               <p className="text-lg text-gray-500">
diff --git a/client/src/components/PromptsTab.tsx b/client/src/components/PromptsTab.tsx
index df8b8a5..5882e7e 100644
--- a/client/src/components/PromptsTab.tsx
+++ b/client/src/components/PromptsTab.tsx
@@ -6,8 +6,9 @@ import { TabsContent } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import { ListPromptsResult } from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle } from "lucide-react";
-import { useState } from "react";
+import { useState, useContext } from "react";
 import ListPane from "./ListPane";
+import { CapabilityContext } from "@/lib/contexts";
 
 export type Prompt = {
   name: string;
@@ -40,6 +41,7 @@ const PromptsTab = ({
   nextCursor: ListPromptsResult["nextCursor"];
   error: string | null;
 }) => {
+  const capabilities = useContext(CapabilityContext);
   const [promptArgs, setPromptArgs] = useState<Record<string, string>>({});
 
   const handleInputChange = (argName: string, value: string) => {
@@ -54,86 +56,98 @@ const PromptsTab = ({
 
   return (
     <TabsContent value="prompts" className="grid grid-cols-2 gap-4">
-      <ListPane
-        items={prompts}
-        listItems={listPrompts}
-        clearItems={clearPrompts}
-        setSelectedItem={(prompt) => {
-          setSelectedPrompt(prompt);
-          setPromptArgs({});
-        }}
-        renderItem={(prompt) => (
-          <>
-            <span className="flex-1">{prompt.name}</span>
-            <span className="text-sm text-gray-500">{prompt.description}</span>
-          </>
-        )}
-        title="Prompts"
-        buttonText={nextCursor ? "List More Prompts" : "List Prompts"}
-        isButtonDisabled={!nextCursor && prompts.length > 0}
-      />
+      {!capabilities?.prompts ? (
+        <Alert variant="destructive" className="col-span-2">
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>Feature Not Available</AlertTitle>
+          <AlertDescription>
+            The connected server does not support prompts.
+          </AlertDescription>
+        </Alert>
+      ) : (
+        <>
+          <ListPane
+            items={prompts}
+            listItems={listPrompts}
+            clearItems={clearPrompts}
+            setSelectedItem={(prompt) => {
+              setSelectedPrompt(prompt);
+              setPromptArgs({});
+            }}
+            renderItem={(prompt) => (
+              <>
+                <span className="flex-1">{prompt.name}</span>
+                <span className="text-sm text-gray-500">{prompt.description}</span>
+              </>
+            )}
+            title="Prompts"
+            buttonText={nextCursor ? "List More Prompts" : "List Prompts"}
+            isButtonDisabled={!nextCursor && prompts.length > 0}
+          />
 
-      <div className="bg-card rounded-lg shadow">
-        <div className="p-4 border-b border-gray-200">
-          <h3 className="font-semibold">
-            {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
-          </h3>
-        </div>
-        <div className="p-4">
-          {error ? (
-            <Alert variant="destructive">
-              <AlertCircle className="h-4 w-4" />
-              <AlertTitle>Error</AlertTitle>
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          ) : selectedPrompt ? (
-            <div className="space-y-4">
-              {selectedPrompt.description && (
-                <p className="text-sm text-gray-600">
-                  {selectedPrompt.description}
-                </p>
-              )}
-              {selectedPrompt.arguments?.map((arg) => (
-                <div key={arg.name}>
-                  <Label htmlFor={arg.name}>{arg.name}</Label>
-                  <Input
-                    id={arg.name}
-                    placeholder={`Enter ${arg.name}`}
-                    value={promptArgs[arg.name] || ""}
-                    onChange={(e) =>
-                      handleInputChange(arg.name, e.target.value)
-                    }
-                  />
-                  {arg.description && (
-                    <p className="text-xs text-gray-500 mt-1">
-                      {arg.description}
-                      {arg.required && (
-                        <span className="text-xs mt-1 ml-1">(Required)</span>
-                      )}
+          <div className="bg-card rounded-lg shadow">
+            <div className="p-4 border-b border-gray-200">
+              <h3 className="font-semibold">
+                {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
+              </h3>
+            </div>
+            <div className="p-4">
+              {error ? (
+                <Alert variant="destructive">
+                  <AlertCircle className="h-4 w-4" />
+                  <AlertTitle>Error</AlertTitle>
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              ) : selectedPrompt ? (
+                <div className="space-y-4">
+                  {selectedPrompt.description && (
+                    <p className="text-sm text-gray-600">
+                      {selectedPrompt.description}
                     </p>
                   )}
+                  {selectedPrompt.arguments?.map((arg) => (
+                    <div key={arg.name}>
+                      <Label htmlFor={arg.name}>{arg.name}</Label>
+                      <Input
+                        id={arg.name}
+                        placeholder={`Enter ${arg.name}`}
+                        value={promptArgs[arg.name] || ""}
+                        onChange={(e) =>
+                          handleInputChange(arg.name, e.target.value)
+                        }
+                      />
+                      {arg.description && (
+                        <p className="text-xs text-gray-500 mt-1">
+                          {arg.description}
+                          {arg.required && (
+                            <span className="text-xs mt-1 ml-1">(Required)</span>
+                          )}
+                        </p>
+                      )}
+                    </div>
+                  ))}
+                  <Button onClick={handleGetPrompt} className="w-full">
+                    Get Prompt
+                  </Button>
+                  {promptContent && (
+                    <Textarea
+                      value={promptContent}
+                      readOnly
+                      className="h-64 font-mono"
+                    />
+                  )}
                 </div>
-              ))}
-              <Button onClick={handleGetPrompt} className="w-full">
-                Get Prompt
-              </Button>
-              {promptContent && (
-                <Textarea
-                  value={promptContent}
-                  readOnly
-                  className="h-64 font-mono"
-                />
+              ) : (
+                <Alert>
+                  <AlertDescription>
+                    Select a prompt from the list to view and use it
+                  </AlertDescription>
+                </Alert>
               )}
             </div>
-          ) : (
-            <Alert>
-              <AlertDescription>
-                Select a prompt from the list to view and use it
-              </AlertDescription>
-            </Alert>
-          )}
-        </div>
-      </div>
+          </div>
+        </>
+      )}
     </TabsContent>
   );
 };
diff --git a/client/src/components/ResourcesTab.tsx b/client/src/components/ResourcesTab.tsx
index e948881..69e288c 100644
--- a/client/src/components/ResourcesTab.tsx
+++ b/client/src/components/ResourcesTab.tsx
@@ -10,7 +10,8 @@ import {
 } from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle, ChevronRight, FileText, RefreshCw } from "lucide-react";
 import ListPane from "./ListPane";
-import { useState } from "react";
+import { useState, useContext } from "react";
+import { CapabilityContext } from "@/lib/contexts";
 
 const ResourcesTab = ({
   resources,
@@ -41,6 +42,7 @@ const ResourcesTab = ({
   nextTemplateCursor: ListResourceTemplatesResult["nextCursor"];
   error: string | null;
 }) => {
+  const capabilities = useContext(CapabilityContext);
   const [selectedTemplate, setSelectedTemplate] =
     useState<ResourceTemplate | null>(null);
   const [templateValues, setTemplateValues] = useState<Record<string, string>>(
@@ -62,142 +64,153 @@ const ResourcesTab = ({
       const uri = fillTemplate(selectedTemplate.uriTemplate, templateValues);
       readResource(uri);
       setSelectedTemplate(null);
-      // We don't have the full Resource object here, so we create a partial one
       setSelectedResource({ uri, name: uri } as Resource);
     }
   };
 
   return (
     <TabsContent value="resources" className="grid grid-cols-3 gap-4">
-      <ListPane
-        items={resources}
-        listItems={listResources}
-        clearItems={clearResources}
-        setSelectedItem={(resource) => {
-          setSelectedResource(resource);
-          readResource(resource.uri);
-          setSelectedTemplate(null);
-        }}
-        renderItem={(resource) => (
-          <div className="flex items-center w-full">
-            <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
-            <span className="flex-1 truncate" title={resource.uri.toString()}>
-              {resource.name}
-            </span>
-            <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
-          </div>
-        )}
-        title="Resources"
-        buttonText={nextCursor ? "List More Resources" : "List Resources"}
-        isButtonDisabled={!nextCursor && resources.length > 0}
-      />
+      {!capabilities?.resources ? (
+        <Alert variant="destructive" className="col-span-3">
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>Feature Not Available</AlertTitle>
+          <AlertDescription>
+            The connected server does not support resources.
+          </AlertDescription>
+        </Alert>
+      ) : (
+        <>
+          <ListPane
+            items={resources}
+            listItems={listResources}
+            clearItems={clearResources}
+            setSelectedItem={(resource) => {
+              setSelectedResource(resource);
+              readResource(resource.uri);
+              setSelectedTemplate(null);
+            }}
+            renderItem={(resource) => (
+              <div className="flex items-center w-full">
+                <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
+                <span className="flex-1 truncate" title={resource.uri.toString()}>
+                  {resource.name}
+                </span>
+                <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
+              </div>
+            )}
+            title="Resources"
+            buttonText={nextCursor ? "List More Resources" : "List Resources"}
+            isButtonDisabled={!nextCursor && resources.length > 0}
+          />
 
-      <ListPane
-        items={resourceTemplates}
-        listItems={listResourceTemplates}
-        clearItems={clearResourceTemplates}
-        setSelectedItem={(template) => {
-          setSelectedTemplate(template);
-          setSelectedResource(null);
-          setTemplateValues({});
-        }}
-        renderItem={(template) => (
-          <div className="flex items-center w-full">
-            <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
-            <span className="flex-1 truncate" title={template.uriTemplate}>
-              {template.name}
-            </span>
-            <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
-          </div>
-        )}
-        title="Resource Templates"
-        buttonText={
-          nextTemplateCursor ? "List More Templates" : "List Templates"
-        }
-        isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0}
-      />
+          <ListPane
+            items={resourceTemplates}
+            listItems={listResourceTemplates}
+            clearItems={clearResourceTemplates}
+            setSelectedItem={(template) => {
+              setSelectedTemplate(template);
+              setSelectedResource(null);
+              setTemplateValues({});
+            }}
+            renderItem={(template) => (
+              <div className="flex items-center w-full">
+                <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
+                <span className="flex-1 truncate" title={template.uriTemplate}>
+                  {template.name}
+                </span>
+                <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
+              </div>
+            )}
+            title="Resource Templates"
+            buttonText={
+              nextTemplateCursor ? "List More Templates" : "List Templates"
+            }
+            isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0}
+          />
 
-      <div className="bg-card rounded-lg shadow">
-        <div className="p-4 border-b border-gray-200 flex justify-between items-center">
-          <h3
-            className="font-semibold truncate"
-            title={selectedResource?.name || selectedTemplate?.name}
-          >
-            {selectedResource
-              ? selectedResource.name
-              : selectedTemplate
-                ? selectedTemplate.name
-                : "Select a resource or template"}
-          </h3>
-          {selectedResource && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => readResource(selectedResource.uri)}
-            >
-              <RefreshCw className="w-4 h-4 mr-2" />
-              Refresh
-            </Button>
-          )}
-        </div>
-        <div className="p-4">
-          {error ? (
-            <Alert variant="destructive">
-              <AlertCircle className="h-4 w-4" />
-              <AlertTitle>Error</AlertTitle>
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          ) : selectedResource ? (
-            <pre className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 whitespace-pre-wrap break-words text-gray-900 dark:text-gray-100">
-              {resourceContent}
-            </pre>
-          ) : selectedTemplate ? (
-            <div className="space-y-4">
-              <p className="text-sm text-gray-600">
-                {selectedTemplate.description}
-              </p>
-              {selectedTemplate.uriTemplate
-                .match(/{([^}]+)}/g)
-                ?.map((param) => {
-                  const key = param.slice(1, -1);
-                  return (
-                    <div key={key}>
-                      <label
-                        htmlFor={key}
-                        className="block text-sm font-medium text-gray-700"
-                      >
-                        {key}
-                      </label>
-                      <Input
-                        id={key}
-                        value={templateValues[key] || ""}
-                        onChange={(e) =>
-                          setTemplateValues({
-                            ...templateValues,
-                            [key]: e.target.value,
-                          })
-                        }
-                        className="mt-1"
-                      />
-                    </div>
-                  );
-                })}
-              <Button
-                onClick={handleReadTemplateResource}
-                disabled={Object.keys(templateValues).length === 0}
+          <div className="bg-card rounded-lg shadow">
+            <div className="p-4 border-b border-gray-200 flex justify-between items-center">
+              <h3
+                className="font-semibold truncate"
+                title={selectedResource?.name || selectedTemplate?.name}
               >
-                Read Resource
-              </Button>
+                {selectedResource
+                  ? selectedResource.name
+                  : selectedTemplate
+                    ? selectedTemplate.name
+                    : "Select a resource or template"}
+              </h3>
+              {selectedResource && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => readResource(selectedResource.uri)}
+                >
+                  <RefreshCw className="w-4 h-4 mr-2" />
+                  Refresh
+                </Button>
+              )}
             </div>
-          ) : (
-            <Alert>
-              <AlertDescription>
-                Select a resource or template from the list to view its contents
-              </AlertDescription>
-            </Alert>
-          )}
-        </div>
-      </div>
+            <div className="p-4">
+              {error ? (
+                <Alert variant="destructive">
+                  <AlertCircle className="h-4 w-4" />
+                  <AlertTitle>Error</AlertTitle>
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              ) : selectedResource ? (
+                <pre className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 whitespace-pre-wrap break-words text-gray-900 dark:text-gray-100">
+                  {resourceContent}
+                </pre>
+              ) : selectedTemplate ? (
+                <div className="space-y-4">
+                  <p className="text-sm text-gray-600">
+                    {selectedTemplate.description}
+                  </p>
+                  {selectedTemplate.uriTemplate
+                    .match(/{([^}]+)}/g)
+                    ?.map((param) => {
+                      const key = param.slice(1, -1);
+                      return (
+                        <div key={key}>
+                          <label
+                            htmlFor={key}
+                            className="block text-sm font-medium text-gray-700"
+                          >
+                            {key}
+                          </label>
+                          <Input
+                            id={key}
+                            value={templateValues[key] || ""}
+                            onChange={(e) =>
+                              setTemplateValues({
+                                ...templateValues,
+                                [key]: e.target.value,
+                              })
+                            }
+                            className="mt-1"
+                          />
+                        </div>
+                      );
+                    })}
+                  <Button
+                    onClick={handleReadTemplateResource}
+                    disabled={Object.keys(templateValues).length === 0}
+                  >
+                    Read Resource
+                  </Button>
+                </div>
+              ) : (
+                <Alert>
+                  <AlertDescription>
+                    Select a resource or template from the list to view its contents
+                  </AlertDescription>
+                </Alert>
+              )}
+            </div>
+          </div>
+        </>
+      )}
     </TabsContent>
   );
 };
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 55dff83..9fa4b7f 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -10,8 +10,9 @@ import {
   CallToolResultSchema,
 } from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle, Send } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useContext } from "react";
 import ListPane from "./ListPane";
+import { CapabilityContext } from "@/lib/contexts";
 
 import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js";
 
@@ -36,6 +37,7 @@ const ToolsTab = ({
   nextCursor: ListToolsResult["nextCursor"];
   error: string | null;
 }) => {
+  const capabilities = useContext(CapabilityContext);
   const [params, setParams] = useState<Record<string, unknown>>({});
   useEffect(() => {
     setParams({});
@@ -110,110 +112,122 @@ const ToolsTab = ({
 
   return (
     <TabsContent value="tools" className="grid grid-cols-2 gap-4">
-      <ListPane
-        items={tools}
-        listItems={listTools}
-        clearItems={() => {
-          clearTools();
-          setSelectedTool(null);
-        }}
-        setSelectedItem={setSelectedTool}
-        renderItem={(tool) => (
-          <>
-            <span className="flex-1">{tool.name}</span>
-            <span className="text-sm text-gray-500 text-right">
-              {tool.description}
-            </span>
-          </>
-        )}
-        title="Tools"
-        buttonText={nextCursor ? "List More Tools" : "List Tools"}
-        isButtonDisabled={!nextCursor && tools.length > 0}
-      />
+      {!capabilities?.tools ? (
+        <Alert variant="destructive" className="col-span-2">
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>Feature Not Available</AlertTitle>
+          <AlertDescription>
+            The connected server does not support tools.
+          </AlertDescription>
+        </Alert>
+      ) : (
+        <>
+          <ListPane
+            items={tools}
+            listItems={listTools}
+            clearItems={() => {
+              clearTools();
+              setSelectedTool(null);
+            }}
+            setSelectedItem={setSelectedTool}
+            renderItem={(tool) => (
+              <>
+                <span className="flex-1">{tool.name}</span>
+                <span className="text-sm text-gray-500 text-right">
+                  {tool.description}
+                </span>
+              </>
+            )}
+            title="Tools"
+            buttonText={nextCursor ? "List More Tools" : "List Tools"}
+            isButtonDisabled={!nextCursor && tools.length > 0}
+          />
 
-      <div className="bg-card rounded-lg shadow">
-        <div className="p-4 border-b border-gray-200">
-          <h3 className="font-semibold">
-            {selectedTool ? selectedTool.name : "Select a tool"}
-          </h3>
-        </div>
-        <div className="p-4">
-          {error ? (
-            <Alert variant="destructive">
-              <AlertCircle className="h-4 w-4" />
-              <AlertTitle>Error</AlertTitle>
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          ) : selectedTool ? (
-            <div className="space-y-4">
-              <p className="text-sm text-gray-600">
-                {selectedTool.description}
-              </p>
-              {Object.entries(selectedTool.inputSchema.properties ?? []).map(
-                ([key, value]) => (
-                  <div key={key}>
-                    <Label
-                      htmlFor={key}
-                      className="block text-sm font-medium text-gray-700"
-                    >
-                      {key}
-                    </Label>
-                    {
-                      /* @ts-expect-error value type is currently unknown */
-                      value.type === "string" ? (
-                        <Textarea
-                          id={key}
-                          name={key}
-                          // @ts-expect-error value type is currently unknown
-                          placeholder={value.description}
-                          onChange={(e) =>
-                            setParams({
-                              ...params,
-                              [key]: e.target.value,
-                            })
-                          }
-                          className="mt-1"
-                        />
-                      ) : (
-                        <Input
-                          // @ts-expect-error value type is currently unknown
-                          type={value.type === "number" ? "number" : "text"}
-                          id={key}
-                          name={key}
-                          // @ts-expect-error value type is currently unknown
-                          placeholder={value.description}
-                          onChange={(e) =>
-                            setParams({
-                              ...params,
-                              [key]:
-                                // @ts-expect-error value type is currently unknown
-                                value.type === "number"
-                                  ? Number(e.target.value)
-                                  : e.target.value,
-                            })
-                          }
-                          className="mt-1"
-                        />
-                      )
-                    }
-                  </div>
-                ),
-              )}
-              <Button onClick={() => callTool(selectedTool.name, params)}>
-                <Send className="w-4 h-4 mr-2" />
-                Run Tool
-              </Button>
-              {toolResult && renderToolResult()}
+          <div className="bg-card rounded-lg shadow">
+            <div className="p-4 border-b border-gray-200">
+              <h3 className="font-semibold">
+                {selectedTool ? selectedTool.name : "Select a tool"}
+              </h3>
             </div>
-          ) : (
-            <Alert>
-              <AlertDescription>
-                Select a tool from the list to view its details and run it
-              </AlertDescription>
-            </Alert>
-          )}
-        </div>
-      </div>
+            <div className="p-4">
+              {error ? (
+                <Alert variant="destructive">
+                  <AlertCircle className="h-4 w-4" />
+                  <AlertTitle>Error</AlertTitle>
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              ) : selectedTool ? (
+                <div className="space-y-4">
+                  <p className="text-sm text-gray-600">
+                    {selectedTool.description}
+                  </p>
+                  {Object.entries(selectedTool.inputSchema.properties ?? []).map(
+                    ([key, value]) => (
+                      <div key={key}>
+                        <Label
+                          htmlFor={key}
+                          className="block text-sm font-medium text-gray-700"
+                        >
+                          {key}
+                        </Label>
+                        {
+                          /* @ts-expect-error value type is currently unknown */
+                          value.type === "string" ? (
+                            <Textarea
+                              id={key}
+                              name={key}
+                              // @ts-expect-error value type is currently unknown
+                              placeholder={value.description}
+                              onChange={(e) =>
+                                setParams({
+                                  ...params,
+                                  [key]: e.target.value,
+                                })
+                              }
+                              className="mt-1"
+                            />
+                          ) : (
+                            <Input
+                              // @ts-expect-error value type is currently unknown
+                              type={value.type === "number" ? "number" : "text"}
+                              id={key}
+                              name={key}
+                              // @ts-expect-error value type is currently unknown
+                              placeholder={value.description}
+                              onChange={(e) =>
+                                setParams({
+                                  ...params,
+                                  [key]:
+                                    // @ts-expect-error value type is currently unknown
+                                    value.type === "number"
+                                      ? Number(e.target.value)
+                                      : e.target.value,
+                                })
+                              }
+                              className="mt-1"
+                            />
+                          )
+                        }
+                      </div>
+                    ),
+                  )}
+                  <Button onClick={() => callTool(selectedTool.name, params)}>
+                    <Send className="w-4 h-4 mr-2" />
+                    Run Tool
+                  </Button>
+                  {toolResult && renderToolResult()}
+                </div>
+              ) : (
+                <Alert>
+                  <AlertDescription>
+                    Select a tool from the list to view its details and run it
+                  </AlertDescription>
+                </Alert>
+              )}
+            </div>
+          </div>
+        </>
+      )}
     </TabsContent>
   );
 };
diff --git a/client/src/lib/contexts.ts b/client/src/lib/contexts.ts
new file mode 100644
index 0000000..c953dd1
--- /dev/null
+++ b/client/src/lib/contexts.ts
@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+import { ServerCapabilitiesSchema } from "@modelcontextprotocol/sdk/types.js";
+import type { z } from "zod";
+
+export type ServerCapabilities = z.infer<typeof ServerCapabilitiesSchema>;
+
+export const CapabilityContext = createContext<ServerCapabilities | null>(null);
+
+export function useServerCapability(capability: keyof ServerCapabilities): boolean {
+  const capabilities = useContext(CapabilityContext);
+  return !!capabilities?.[capability];
+}

From ce68085e77e50faa58a1aa75a48571aef416c7e4 Mon Sep 17 00:00:00 2001
From: Jens Wallgren <jens-wallgren@hotmail.com>
Date: Sun, 8 Dec 2024 14:14:40 +0100
Subject: [PATCH 13/34] Add dark mode support for the legacy Tool Result
 display

---
 client/src/components/ToolsTab.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 55dff83..085f76a 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -100,7 +100,7 @@ const ToolsTab = ({
       return (
         <>
           <h4 className="font-semibold mb-2">Tool Result (Legacy):</h4>
-          <pre className="bg-gray-50 p-4 rounded text-sm overflow-auto max-h-64">
+          <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64">
             {JSON.stringify(toolResult.toolResult, null, 2)}
           </pre>
         </>

From 2f513df6c150b934876bd752456ab1345b2f7db9 Mon Sep 17 00:00:00 2001
From: Ben Mann <ben@anthropic.com>
Date: Sun, 8 Dec 2024 21:15:34 +0200
Subject: [PATCH 14/34] feat: improve request history and tab persistence
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add failed requests to history with error messages for better debugging
- Persist selected tab in URL hash and restore on page load
- Fix formatting of timeout parameter parsing

🤖 Generated with Claude CLI.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 client/src/App.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 2c84377..4395dcc 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -59,7 +59,8 @@ const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
 
 const params = new URLSearchParams(window.location.search);
 const PROXY_PORT = params.get("proxyPort") ?? "3000";
-const REQUEST_TIMEOUT = parseInt(params.get("timeout") ?? "") || DEFAULT_REQUEST_TIMEOUT_MSEC;
+const REQUEST_TIMEOUT =
+  parseInt(params.get("timeout") ?? "") || DEFAULT_REQUEST_TIMEOUT_MSEC;
 const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`;
 
 const App = () => {
@@ -217,6 +218,12 @@ const App = () => {
     rootsRef.current = roots;
   }, [roots]);
 
+  useEffect(() => {
+    if (!window.location.hash) {
+      window.location.hash = "resources";
+    }
+  }, []);
+
   const pushHistory = (request: object, response?: object) => {
     setRequestHistory((prev) => [
       ...prev,
@@ -251,10 +258,14 @@ const App = () => {
         response = await mcpClient.request(request, schema, {
           signal: abortController.signal,
         });
+        pushHistory(request, response);
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        pushHistory(request, { error: errorMessage });
+        throw error;
       } finally {
         clearTimeout(timeoutId);
       }
-      pushHistory(request, response);
 
       if (tabKey !== undefined) {
         clearError(tabKey);
@@ -485,7 +496,11 @@ const App = () => {
       <div className="flex-1 flex flex-col overflow-hidden">
         <div className="flex-1 overflow-auto">
           {mcpClient ? (
-            <Tabs defaultValue="resources" className="w-full p-4">
+            <Tabs
+              defaultValue={window.location.hash.slice(1) || "resources"}
+              className="w-full p-4"
+              onValueChange={(value) => (window.location.hash = value)}
+            >
               <TabsList className="mb-4 p-0">
                 <TabsTrigger value="resources">
                   <Files className="w-4 h-4 mr-2" />

From d857e1462bbbb1b3cdbe877525f451184bda2bc2 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 9 Dec 2024 10:11:03 +0000
Subject: [PATCH 15/34] refactor: simplify capability handling and remove
 context provider

- Remove redundant useEffect for capability checking
- Remove CapabilityContext provider pattern
- Set default tab to first supported capability
- Add fallback UI for unsupported capabilities
- Delete unused contexts.ts file
---
 client/src/App.tsx         | 325 ++++++++++++++++++++-----------------
 client/src/lib/contexts.ts |  12 --
 2 files changed, 178 insertions(+), 159 deletions(-)
 delete mode 100644 client/src/lib/contexts.ts

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 2f36450..70f3175 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -19,10 +19,11 @@ import {
   Request,
   Resource,
   ResourceTemplate,
-  Result,
   Root,
   ServerNotification,
   Tool,
+  ServerCapabilitiesSchema,
+  Result,
 } from "@modelcontextprotocol/sdk/types.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 
@@ -43,7 +44,7 @@ import {
 } from "lucide-react";
 
 import { toast } from "react-toastify";
-import { ZodType } from "zod";
+import { z, type ZodType } from "zod";
 import "./App.css";
 import ConsoleTab from "./components/ConsoleTab";
 import HistoryAndNotifications from "./components/History";
@@ -55,7 +56,12 @@ import SamplingTab, { PendingRequest } from "./components/SamplingTab";
 import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
 
-import { CapabilityContext, ServerCapabilities } from "@/lib/contexts";
+type ServerCapabilities = z.infer<typeof ServerCapabilitiesSchema>;
+
+type ServerCapabilities = z.infer<typeof ServerCapabilitiesSchema>;
+
+type ServerCapabilities = z.infer<typeof ServerCapabilitiesSchema>;
+
 
 const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
 
@@ -220,12 +226,7 @@ const App = () => {
     rootsRef.current = roots;
   }, [roots]);
 
-  useEffect(() => {
-    if (mcpClient) {
-      const capabilities = mcpClient.getServerCapabilities();
-      setServerCapabilities(capabilities ?? null);
-    }
-  }, [mcpClient]);
+
 
   const pushHistory = (request: object, response?: object) => {
     setRequestHistory((prev) => [
@@ -498,145 +499,175 @@ const App = () => {
       <div className="flex-1 flex flex-col overflow-hidden">
         <div className="flex-1 overflow-auto">
           {mcpClient ? (
-            <CapabilityContext.Provider value={serverCapabilities}>
-              <Tabs defaultValue="resources" className="w-full p-4">
-                <TabsList className="mb-4 p-0">
-                  <TabsTrigger value="resources" disabled={!serverCapabilities?.resources}>
-                    <Files className="w-4 h-4 mr-2" />
-                    Resources
-                  </TabsTrigger>
-                  <TabsTrigger value="prompts" disabled={!serverCapabilities?.prompts}>
-                    <MessageSquare className="w-4 h-4 mr-2" />
-                    Prompts
-                  </TabsTrigger>
-                  <TabsTrigger value="tools" disabled={!serverCapabilities?.tools}>
-                    <Hammer className="w-4 h-4 mr-2" />
-                    Tools
-                  </TabsTrigger>
-                  <TabsTrigger value="ping">
-                    <Bell className="w-4 h-4 mr-2" />
-                    Ping
-                  </TabsTrigger>
-                  <TabsTrigger value="sampling" className="relative">
-                    <Hash className="w-4 h-4 mr-2" />
-                    Sampling
-                    {pendingSampleRequests.length > 0 && (
-                      <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
-                        {pendingSampleRequests.length}
-                      </span>
-                    )}
-                  </TabsTrigger>
-                  <TabsTrigger value="roots">
-                    <FolderTree className="w-4 h-4 mr-2" />
-                    Roots
-                  </TabsTrigger>
-                </TabsList>
+            <Tabs
+              defaultValue={
+                serverCapabilities?.resources ? "resources" :
+                serverCapabilities?.prompts ? "prompts" :
+                serverCapabilities?.tools ? "tools" :
+                "ping"
+              }
+              className="w-full p-4"
+            >
+              <TabsList className="mb-4 p-0">
+                <TabsTrigger value="resources">
+                  <Files className="w-4 h-4 mr-2" />
+                  Resources
+                </TabsTrigger>
+                <TabsTrigger value="prompts">
+                  <MessageSquare className="w-4 h-4 mr-2" />
+                  Prompts
+                </TabsTrigger>
+                <TabsTrigger value="tools">
+                  <Hammer className="w-4 h-4 mr-2" />
+                  Tools
+                </TabsTrigger>
+                <TabsTrigger value="ping">
+                  <Bell className="w-4 h-4 mr-2" />
+                  Ping
+                </TabsTrigger>
+                <TabsTrigger value="sampling" className="relative">
+                  <Hash className="w-4 h-4 mr-2" />
+                  Sampling
+                  {pendingSampleRequests.length > 0 && (
+                    <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
+                      {pendingSampleRequests.length}
+                    </span>
+                  )}
+                </TabsTrigger>
+                <TabsTrigger value="roots">
+                  <FolderTree className="w-4 h-4 mr-2" />
+                  Roots
+                </TabsTrigger>
+              </TabsList>
 
-                <div className="w-full">
-                  <ResourcesTab
-                    resources={resources}
-                    resourceTemplates={resourceTemplates}
-                    listResources={() => {
-                      clearError("resources");
-                      listResources();
-                    }}
-                    clearResources={() => {
-                      setResources([]);
-                      setNextResourceCursor(undefined);
-                    }}
-                    listResourceTemplates={() => {
-                      clearError("resources");
-                      listResourceTemplates();
-                    }}
-                    clearResourceTemplates={() => {
-                      setResourceTemplates([]);
-                      setNextResourceTemplateCursor(undefined);
-                    }}
-                    readResource={(uri) => {
-                      clearError("resources");
-                      readResource(uri);
-                    }}
-                    selectedResource={selectedResource}
-                    setSelectedResource={(resource) => {
-                      clearError("resources");
-                      setSelectedResource(resource);
-                    }}
-                    resourceContent={resourceContent}
-                    nextCursor={nextResourceCursor}
-                    nextTemplateCursor={nextResourceTemplateCursor}
-                    error={errors.resources}
-                  />
-                  <PromptsTab
-                    prompts={prompts}
-                    listPrompts={() => {
-                      clearError("prompts");
-                      listPrompts();
-                    }}
-                    clearPrompts={() => {
-                      setPrompts([]);
-                      setNextPromptCursor(undefined);
-                    }}
-                    getPrompt={(name, args) => {
-                      clearError("prompts");
-                      getPrompt(name, args);
-                    }}
-                    selectedPrompt={selectedPrompt}
-                    setSelectedPrompt={(prompt) => {
-                      clearError("prompts");
-                      setSelectedPrompt(prompt);
-                    }}
-                    promptContent={promptContent}
-                    nextCursor={nextPromptCursor}
-                    error={errors.prompts}
-                  />
-                  <ToolsTab
-                    tools={tools}
-                    listTools={() => {
-                      clearError("tools");
-                      listTools();
-                    }}
-                    clearTools={() => {
-                      setTools([]);
-                      setNextToolCursor(undefined);
-                    }}
-                    callTool={(name, params) => {
-                      clearError("tools");
-                      callTool(name, params);
-                    }}
-                    selectedTool={selectedTool}
-                    setSelectedTool={(tool) => {
-                      clearError("tools");
-                      setSelectedTool(tool);
-                      setToolResult(null);
-                    }}
-                    toolResult={toolResult}
-                    nextCursor={nextToolCursor}
-                    error={errors.tools}
-                  />
-                  <ConsoleTab />
-                  <PingTab
-                    onPingClick={() => {
-                      void makeRequest(
-                        {
-                          method: "ping" as const,
-                        },
-                        EmptyResultSchema,
-                      );
-                    }}
-                  />
-                  <SamplingTab
-                    pendingRequests={pendingSampleRequests}
-                    onApprove={handleApproveSampling}
-                    onReject={handleRejectSampling}
-                  />
-                  <RootsTab
-                    roots={roots}
-                    setRoots={setRoots}
-                    onRootsChange={handleRootsChange}
-                  />
-                </div>
-              </Tabs>
-            </CapabilityContext.Provider>
+              <div className="w-full">
+                {!serverCapabilities?.resources && !serverCapabilities?.prompts && !serverCapabilities?.tools ? (
+                  <div className="flex items-center justify-center p-4">
+                    <p className="text-lg text-gray-500">
+                      The connected server does not support any MCP capabilities
+                    </p>
+                  </div>
+                ) : (
+                  <>
+                    <ResourcesTab
+                      resources={resources}
+                      resourceTemplates={resourceTemplates}
+                      listResources={() => {
+                        clearError("resources");
+                        if (serverCapabilities?.resources) {
+                          listResources();
+                        }
+                      }}
+                      clearResources={() => {
+                        setResources([]);
+                        setNextResourceCursor(undefined);
+                      }}
+                      listResourceTemplates={() => {
+                        clearError("resources");
+                        if (serverCapabilities?.resources) {
+                          listResourceTemplates();
+                        }
+                      }}
+                      clearResourceTemplates={() => {
+                        setResourceTemplates([]);
+                        setNextResourceTemplateCursor(undefined);
+                      }}
+                      readResource={(uri) => {
+                        clearError("resources");
+                        if (serverCapabilities?.resources) {
+                          readResource(uri);
+                        }
+                      }}
+                      selectedResource={selectedResource}
+                      setSelectedResource={(resource) => {
+                        clearError("resources");
+                        setSelectedResource(resource);
+                      }}
+                      resourceContent={resourceContent}
+                      nextCursor={nextResourceCursor}
+                      nextTemplateCursor={nextResourceTemplateCursor}
+                      error={errors.resources}
+                    />
+                    <PromptsTab
+                      prompts={prompts}
+                      listPrompts={() => {
+                        clearError("prompts");
+                        if (serverCapabilities?.prompts) {
+                          listPrompts();
+                        }
+                      }}
+                      clearPrompts={() => {
+                        setPrompts([]);
+                        setNextPromptCursor(undefined);
+                      }}
+                      getPrompt={(name, args) => {
+                        clearError("prompts");
+                        if (serverCapabilities?.prompts) {
+                          getPrompt(name, args);
+                        }
+                      }}
+                      selectedPrompt={selectedPrompt}
+                      setSelectedPrompt={(prompt) => {
+                        clearError("prompts");
+                        setSelectedPrompt(prompt);
+                      }}
+                      promptContent={promptContent}
+                      nextCursor={nextPromptCursor}
+                      error={errors.prompts}
+                    />
+                    <ToolsTab
+                      tools={tools}
+                      listTools={() => {
+                        clearError("tools");
+                        if (serverCapabilities?.tools) {
+                          listTools();
+                        }
+                      }}
+                      clearTools={() => {
+                        setTools([]);
+                        setNextToolCursor(undefined);
+                      }}
+                      callTool={(name, params) => {
+                        clearError("tools");
+                        if (serverCapabilities?.tools) {
+                          callTool(name, params);
+                        }
+                      }}
+                      selectedTool={selectedTool}
+                      setSelectedTool={(tool) => {
+                        clearError("tools");
+                        setSelectedTool(tool);
+                        setToolResult(null);
+                      }}
+                      toolResult={toolResult}
+                      nextCursor={nextToolCursor}
+                      error={errors.tools}
+                    />
+                    <ConsoleTab />
+                    <PingTab
+                      onPingClick={() => {
+                        void makeRequest(
+                          {
+                            method: "ping" as const,
+                          },
+                          EmptyResultSchema,
+                        );
+                      }}
+                    />
+                    <SamplingTab
+                      pendingRequests={pendingSampleRequests}
+                      onApprove={handleApproveSampling}
+                      onReject={handleRejectSampling}
+                    />
+                    <RootsTab
+                      roots={roots}
+                      setRoots={setRoots}
+                      onRootsChange={handleRootsChange}
+                    />
+                  </>
+                )}
+              </div>
+            </Tabs>
           ) : (
             <div className="flex items-center justify-center h-full">
               <p className="text-lg text-gray-500">
diff --git a/client/src/lib/contexts.ts b/client/src/lib/contexts.ts
deleted file mode 100644
index c953dd1..0000000
--- a/client/src/lib/contexts.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { createContext, useContext } from "react";
-import { ServerCapabilitiesSchema } from "@modelcontextprotocol/sdk/types.js";
-import type { z } from "zod";
-
-export type ServerCapabilities = z.infer<typeof ServerCapabilitiesSchema>;
-
-export const CapabilityContext = createContext<ServerCapabilities | null>(null);
-
-export function useServerCapability(capability: keyof ServerCapabilities): boolean {
-  const capabilities = useContext(CapabilityContext);
-  return !!capabilities?.[capability];
-}

From b39c96de7cd9284d7c7fd7ffb55704977a9e513f Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 9 Dec 2024 10:36:56 +0000
Subject: [PATCH 16/34] refactor: revert tab files to main and restore tab
 disabling

---
 client/src/App.tsx                     |  10 +-
 client/src/components/PromptsTab.tsx   | 164 +++++++--------
 client/src/components/ResourcesTab.tsx | 273 ++++++++++++-------------
 client/src/components/ToolsTab.tsx     | 218 +++++++++-----------
 4 files changed, 312 insertions(+), 353 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 70f3175..b016626 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -509,15 +509,15 @@ const App = () => {
               className="w-full p-4"
             >
               <TabsList className="mb-4 p-0">
-                <TabsTrigger value="resources">
+                <TabsTrigger value="resources" disabled={!serverCapabilities?.resources}>
                   <Files className="w-4 h-4 mr-2" />
                   Resources
                 </TabsTrigger>
-                <TabsTrigger value="prompts">
+                <TabsTrigger value="prompts" disabled={!serverCapabilities?.prompts}>
                   <MessageSquare className="w-4 h-4 mr-2" />
                   Prompts
                 </TabsTrigger>
-                <TabsTrigger value="tools">
+                <TabsTrigger value="tools" disabled={!serverCapabilities?.tools}>
                   <Hammer className="w-4 h-4 mr-2" />
                   Tools
                 </TabsTrigger>
@@ -525,7 +525,7 @@ const App = () => {
                   <Bell className="w-4 h-4 mr-2" />
                   Ping
                 </TabsTrigger>
-                <TabsTrigger value="sampling" className="relative">
+                <TabsTrigger value="sampling" className="relative" disabled={!serverCapabilities?.sampling}>
                   <Hash className="w-4 h-4 mr-2" />
                   Sampling
                   {pendingSampleRequests.length > 0 && (
@@ -534,7 +534,7 @@ const App = () => {
                     </span>
                   )}
                 </TabsTrigger>
-                <TabsTrigger value="roots">
+                <TabsTrigger value="roots" disabled={!serverCapabilities?.roots}>
                   <FolderTree className="w-4 h-4 mr-2" />
                   Roots
                 </TabsTrigger>
diff --git a/client/src/components/PromptsTab.tsx b/client/src/components/PromptsTab.tsx
index 5882e7e..df8b8a5 100644
--- a/client/src/components/PromptsTab.tsx
+++ b/client/src/components/PromptsTab.tsx
@@ -6,9 +6,8 @@ import { TabsContent } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import { ListPromptsResult } from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle } from "lucide-react";
-import { useState, useContext } from "react";
+import { useState } from "react";
 import ListPane from "./ListPane";
-import { CapabilityContext } from "@/lib/contexts";
 
 export type Prompt = {
   name: string;
@@ -41,7 +40,6 @@ const PromptsTab = ({
   nextCursor: ListPromptsResult["nextCursor"];
   error: string | null;
 }) => {
-  const capabilities = useContext(CapabilityContext);
   const [promptArgs, setPromptArgs] = useState<Record<string, string>>({});
 
   const handleInputChange = (argName: string, value: string) => {
@@ -56,98 +54,86 @@ const PromptsTab = ({
 
   return (
     <TabsContent value="prompts" className="grid grid-cols-2 gap-4">
-      {!capabilities?.prompts ? (
-        <Alert variant="destructive" className="col-span-2">
-          <AlertCircle className="h-4 w-4" />
-          <AlertTitle>Feature Not Available</AlertTitle>
-          <AlertDescription>
-            The connected server does not support prompts.
-          </AlertDescription>
-        </Alert>
-      ) : (
-        <>
-          <ListPane
-            items={prompts}
-            listItems={listPrompts}
-            clearItems={clearPrompts}
-            setSelectedItem={(prompt) => {
-              setSelectedPrompt(prompt);
-              setPromptArgs({});
-            }}
-            renderItem={(prompt) => (
-              <>
-                <span className="flex-1">{prompt.name}</span>
-                <span className="text-sm text-gray-500">{prompt.description}</span>
-              </>
-            )}
-            title="Prompts"
-            buttonText={nextCursor ? "List More Prompts" : "List Prompts"}
-            isButtonDisabled={!nextCursor && prompts.length > 0}
-          />
+      <ListPane
+        items={prompts}
+        listItems={listPrompts}
+        clearItems={clearPrompts}
+        setSelectedItem={(prompt) => {
+          setSelectedPrompt(prompt);
+          setPromptArgs({});
+        }}
+        renderItem={(prompt) => (
+          <>
+            <span className="flex-1">{prompt.name}</span>
+            <span className="text-sm text-gray-500">{prompt.description}</span>
+          </>
+        )}
+        title="Prompts"
+        buttonText={nextCursor ? "List More Prompts" : "List Prompts"}
+        isButtonDisabled={!nextCursor && prompts.length > 0}
+      />
 
-          <div className="bg-card rounded-lg shadow">
-            <div className="p-4 border-b border-gray-200">
-              <h3 className="font-semibold">
-                {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
-              </h3>
-            </div>
-            <div className="p-4">
-              {error ? (
-                <Alert variant="destructive">
-                  <AlertCircle className="h-4 w-4" />
-                  <AlertTitle>Error</AlertTitle>
-                  <AlertDescription>{error}</AlertDescription>
-                </Alert>
-              ) : selectedPrompt ? (
-                <div className="space-y-4">
-                  {selectedPrompt.description && (
-                    <p className="text-sm text-gray-600">
-                      {selectedPrompt.description}
+      <div className="bg-card rounded-lg shadow">
+        <div className="p-4 border-b border-gray-200">
+          <h3 className="font-semibold">
+            {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
+          </h3>
+        </div>
+        <div className="p-4">
+          {error ? (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>Error</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          ) : selectedPrompt ? (
+            <div className="space-y-4">
+              {selectedPrompt.description && (
+                <p className="text-sm text-gray-600">
+                  {selectedPrompt.description}
+                </p>
+              )}
+              {selectedPrompt.arguments?.map((arg) => (
+                <div key={arg.name}>
+                  <Label htmlFor={arg.name}>{arg.name}</Label>
+                  <Input
+                    id={arg.name}
+                    placeholder={`Enter ${arg.name}`}
+                    value={promptArgs[arg.name] || ""}
+                    onChange={(e) =>
+                      handleInputChange(arg.name, e.target.value)
+                    }
+                  />
+                  {arg.description && (
+                    <p className="text-xs text-gray-500 mt-1">
+                      {arg.description}
+                      {arg.required && (
+                        <span className="text-xs mt-1 ml-1">(Required)</span>
+                      )}
                     </p>
                   )}
-                  {selectedPrompt.arguments?.map((arg) => (
-                    <div key={arg.name}>
-                      <Label htmlFor={arg.name}>{arg.name}</Label>
-                      <Input
-                        id={arg.name}
-                        placeholder={`Enter ${arg.name}`}
-                        value={promptArgs[arg.name] || ""}
-                        onChange={(e) =>
-                          handleInputChange(arg.name, e.target.value)
-                        }
-                      />
-                      {arg.description && (
-                        <p className="text-xs text-gray-500 mt-1">
-                          {arg.description}
-                          {arg.required && (
-                            <span className="text-xs mt-1 ml-1">(Required)</span>
-                          )}
-                        </p>
-                      )}
-                    </div>
-                  ))}
-                  <Button onClick={handleGetPrompt} className="w-full">
-                    Get Prompt
-                  </Button>
-                  {promptContent && (
-                    <Textarea
-                      value={promptContent}
-                      readOnly
-                      className="h-64 font-mono"
-                    />
-                  )}
                 </div>
-              ) : (
-                <Alert>
-                  <AlertDescription>
-                    Select a prompt from the list to view and use it
-                  </AlertDescription>
-                </Alert>
+              ))}
+              <Button onClick={handleGetPrompt} className="w-full">
+                Get Prompt
+              </Button>
+              {promptContent && (
+                <Textarea
+                  value={promptContent}
+                  readOnly
+                  className="h-64 font-mono"
+                />
               )}
             </div>
-          </div>
-        </>
-      )}
+          ) : (
+            <Alert>
+              <AlertDescription>
+                Select a prompt from the list to view and use it
+              </AlertDescription>
+            </Alert>
+          )}
+        </div>
+      </div>
     </TabsContent>
   );
 };
diff --git a/client/src/components/ResourcesTab.tsx b/client/src/components/ResourcesTab.tsx
index 69e288c..e948881 100644
--- a/client/src/components/ResourcesTab.tsx
+++ b/client/src/components/ResourcesTab.tsx
@@ -10,8 +10,7 @@ import {
 } from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle, ChevronRight, FileText, RefreshCw } from "lucide-react";
 import ListPane from "./ListPane";
-import { useState, useContext } from "react";
-import { CapabilityContext } from "@/lib/contexts";
+import { useState } from "react";
 
 const ResourcesTab = ({
   resources,
@@ -42,7 +41,6 @@ const ResourcesTab = ({
   nextTemplateCursor: ListResourceTemplatesResult["nextCursor"];
   error: string | null;
 }) => {
-  const capabilities = useContext(CapabilityContext);
   const [selectedTemplate, setSelectedTemplate] =
     useState<ResourceTemplate | null>(null);
   const [templateValues, setTemplateValues] = useState<Record<string, string>>(
@@ -64,153 +62,142 @@ const ResourcesTab = ({
       const uri = fillTemplate(selectedTemplate.uriTemplate, templateValues);
       readResource(uri);
       setSelectedTemplate(null);
+      // We don't have the full Resource object here, so we create a partial one
       setSelectedResource({ uri, name: uri } as Resource);
     }
   };
 
   return (
     <TabsContent value="resources" className="grid grid-cols-3 gap-4">
-      {!capabilities?.resources ? (
-        <Alert variant="destructive" className="col-span-3">
-          <AlertCircle className="h-4 w-4" />
-          <AlertTitle>Feature Not Available</AlertTitle>
-          <AlertDescription>
-            The connected server does not support resources.
-          </AlertDescription>
-        </Alert>
-      ) : (
-        <>
-          <ListPane
-            items={resources}
-            listItems={listResources}
-            clearItems={clearResources}
-            setSelectedItem={(resource) => {
-              setSelectedResource(resource);
-              readResource(resource.uri);
-              setSelectedTemplate(null);
-            }}
-            renderItem={(resource) => (
-              <div className="flex items-center w-full">
-                <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
-                <span className="flex-1 truncate" title={resource.uri.toString()}>
-                  {resource.name}
-                </span>
-                <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
-              </div>
-            )}
-            title="Resources"
-            buttonText={nextCursor ? "List More Resources" : "List Resources"}
-            isButtonDisabled={!nextCursor && resources.length > 0}
-          />
-
-          <ListPane
-            items={resourceTemplates}
-            listItems={listResourceTemplates}
-            clearItems={clearResourceTemplates}
-            setSelectedItem={(template) => {
-              setSelectedTemplate(template);
-              setSelectedResource(null);
-              setTemplateValues({});
-            }}
-            renderItem={(template) => (
-              <div className="flex items-center w-full">
-                <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
-                <span className="flex-1 truncate" title={template.uriTemplate}>
-                  {template.name}
-                </span>
-                <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
-              </div>
-            )}
-            title="Resource Templates"
-            buttonText={
-              nextTemplateCursor ? "List More Templates" : "List Templates"
-            }
-            isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0}
-          />
-
-          <div className="bg-card rounded-lg shadow">
-            <div className="p-4 border-b border-gray-200 flex justify-between items-center">
-              <h3
-                className="font-semibold truncate"
-                title={selectedResource?.name || selectedTemplate?.name}
-              >
-                {selectedResource
-                  ? selectedResource.name
-                  : selectedTemplate
-                    ? selectedTemplate.name
-                    : "Select a resource or template"}
-              </h3>
-              {selectedResource && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => readResource(selectedResource.uri)}
-                >
-                  <RefreshCw className="w-4 h-4 mr-2" />
-                  Refresh
-                </Button>
-              )}
-            </div>
-            <div className="p-4">
-              {error ? (
-                <Alert variant="destructive">
-                  <AlertCircle className="h-4 w-4" />
-                  <AlertTitle>Error</AlertTitle>
-                  <AlertDescription>{error}</AlertDescription>
-                </Alert>
-              ) : selectedResource ? (
-                <pre className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 whitespace-pre-wrap break-words text-gray-900 dark:text-gray-100">
-                  {resourceContent}
-                </pre>
-              ) : selectedTemplate ? (
-                <div className="space-y-4">
-                  <p className="text-sm text-gray-600">
-                    {selectedTemplate.description}
-                  </p>
-                  {selectedTemplate.uriTemplate
-                    .match(/{([^}]+)}/g)
-                    ?.map((param) => {
-                      const key = param.slice(1, -1);
-                      return (
-                        <div key={key}>
-                          <label
-                            htmlFor={key}
-                            className="block text-sm font-medium text-gray-700"
-                          >
-                            {key}
-                          </label>
-                          <Input
-                            id={key}
-                            value={templateValues[key] || ""}
-                            onChange={(e) =>
-                              setTemplateValues({
-                                ...templateValues,
-                                [key]: e.target.value,
-                              })
-                            }
-                            className="mt-1"
-                          />
-                        </div>
-                      );
-                    })}
-                  <Button
-                    onClick={handleReadTemplateResource}
-                    disabled={Object.keys(templateValues).length === 0}
-                  >
-                    Read Resource
-                  </Button>
-                </div>
-              ) : (
-                <Alert>
-                  <AlertDescription>
-                    Select a resource or template from the list to view its contents
-                  </AlertDescription>
-                </Alert>
-              )}
-            </div>
+      <ListPane
+        items={resources}
+        listItems={listResources}
+        clearItems={clearResources}
+        setSelectedItem={(resource) => {
+          setSelectedResource(resource);
+          readResource(resource.uri);
+          setSelectedTemplate(null);
+        }}
+        renderItem={(resource) => (
+          <div className="flex items-center w-full">
+            <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
+            <span className="flex-1 truncate" title={resource.uri.toString()}>
+              {resource.name}
+            </span>
+            <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
           </div>
-        </>
-      )}
+        )}
+        title="Resources"
+        buttonText={nextCursor ? "List More Resources" : "List Resources"}
+        isButtonDisabled={!nextCursor && resources.length > 0}
+      />
+
+      <ListPane
+        items={resourceTemplates}
+        listItems={listResourceTemplates}
+        clearItems={clearResourceTemplates}
+        setSelectedItem={(template) => {
+          setSelectedTemplate(template);
+          setSelectedResource(null);
+          setTemplateValues({});
+        }}
+        renderItem={(template) => (
+          <div className="flex items-center w-full">
+            <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
+            <span className="flex-1 truncate" title={template.uriTemplate}>
+              {template.name}
+            </span>
+            <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
+          </div>
+        )}
+        title="Resource Templates"
+        buttonText={
+          nextTemplateCursor ? "List More Templates" : "List Templates"
+        }
+        isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0}
+      />
+
+      <div className="bg-card rounded-lg shadow">
+        <div className="p-4 border-b border-gray-200 flex justify-between items-center">
+          <h3
+            className="font-semibold truncate"
+            title={selectedResource?.name || selectedTemplate?.name}
+          >
+            {selectedResource
+              ? selectedResource.name
+              : selectedTemplate
+                ? selectedTemplate.name
+                : "Select a resource or template"}
+          </h3>
+          {selectedResource && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => readResource(selectedResource.uri)}
+            >
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Refresh
+            </Button>
+          )}
+        </div>
+        <div className="p-4">
+          {error ? (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>Error</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          ) : selectedResource ? (
+            <pre className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 whitespace-pre-wrap break-words text-gray-900 dark:text-gray-100">
+              {resourceContent}
+            </pre>
+          ) : selectedTemplate ? (
+            <div className="space-y-4">
+              <p className="text-sm text-gray-600">
+                {selectedTemplate.description}
+              </p>
+              {selectedTemplate.uriTemplate
+                .match(/{([^}]+)}/g)
+                ?.map((param) => {
+                  const key = param.slice(1, -1);
+                  return (
+                    <div key={key}>
+                      <label
+                        htmlFor={key}
+                        className="block text-sm font-medium text-gray-700"
+                      >
+                        {key}
+                      </label>
+                      <Input
+                        id={key}
+                        value={templateValues[key] || ""}
+                        onChange={(e) =>
+                          setTemplateValues({
+                            ...templateValues,
+                            [key]: e.target.value,
+                          })
+                        }
+                        className="mt-1"
+                      />
+                    </div>
+                  );
+                })}
+              <Button
+                onClick={handleReadTemplateResource}
+                disabled={Object.keys(templateValues).length === 0}
+              >
+                Read Resource
+              </Button>
+            </div>
+          ) : (
+            <Alert>
+              <AlertDescription>
+                Select a resource or template from the list to view its contents
+              </AlertDescription>
+            </Alert>
+          )}
+        </div>
+      </div>
     </TabsContent>
   );
 };
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 9fa4b7f..55dff83 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -10,9 +10,8 @@ import {
   CallToolResultSchema,
 } from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle, Send } from "lucide-react";
-import { useEffect, useState, useContext } from "react";
+import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
-import { CapabilityContext } from "@/lib/contexts";
 
 import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js";
 
@@ -37,7 +36,6 @@ const ToolsTab = ({
   nextCursor: ListToolsResult["nextCursor"];
   error: string | null;
 }) => {
-  const capabilities = useContext(CapabilityContext);
   const [params, setParams] = useState<Record<string, unknown>>({});
   useEffect(() => {
     setParams({});
@@ -112,122 +110,110 @@ const ToolsTab = ({
 
   return (
     <TabsContent value="tools" className="grid grid-cols-2 gap-4">
-      {!capabilities?.tools ? (
-        <Alert variant="destructive" className="col-span-2">
-          <AlertCircle className="h-4 w-4" />
-          <AlertTitle>Feature Not Available</AlertTitle>
-          <AlertDescription>
-            The connected server does not support tools.
-          </AlertDescription>
-        </Alert>
-      ) : (
-        <>
-          <ListPane
-            items={tools}
-            listItems={listTools}
-            clearItems={() => {
-              clearTools();
-              setSelectedTool(null);
-            }}
-            setSelectedItem={setSelectedTool}
-            renderItem={(tool) => (
-              <>
-                <span className="flex-1">{tool.name}</span>
-                <span className="text-sm text-gray-500 text-right">
-                  {tool.description}
-                </span>
-              </>
-            )}
-            title="Tools"
-            buttonText={nextCursor ? "List More Tools" : "List Tools"}
-            isButtonDisabled={!nextCursor && tools.length > 0}
-          />
+      <ListPane
+        items={tools}
+        listItems={listTools}
+        clearItems={() => {
+          clearTools();
+          setSelectedTool(null);
+        }}
+        setSelectedItem={setSelectedTool}
+        renderItem={(tool) => (
+          <>
+            <span className="flex-1">{tool.name}</span>
+            <span className="text-sm text-gray-500 text-right">
+              {tool.description}
+            </span>
+          </>
+        )}
+        title="Tools"
+        buttonText={nextCursor ? "List More Tools" : "List Tools"}
+        isButtonDisabled={!nextCursor && tools.length > 0}
+      />
 
-          <div className="bg-card rounded-lg shadow">
-            <div className="p-4 border-b border-gray-200">
-              <h3 className="font-semibold">
-                {selectedTool ? selectedTool.name : "Select a tool"}
-              </h3>
-            </div>
-            <div className="p-4">
-              {error ? (
-                <Alert variant="destructive">
-                  <AlertCircle className="h-4 w-4" />
-                  <AlertTitle>Error</AlertTitle>
-                  <AlertDescription>{error}</AlertDescription>
-                </Alert>
-              ) : selectedTool ? (
-                <div className="space-y-4">
-                  <p className="text-sm text-gray-600">
-                    {selectedTool.description}
-                  </p>
-                  {Object.entries(selectedTool.inputSchema.properties ?? []).map(
-                    ([key, value]) => (
-                      <div key={key}>
-                        <Label
-                          htmlFor={key}
-                          className="block text-sm font-medium text-gray-700"
-                        >
-                          {key}
-                        </Label>
-                        {
-                          /* @ts-expect-error value type is currently unknown */
-                          value.type === "string" ? (
-                            <Textarea
-                              id={key}
-                              name={key}
-                              // @ts-expect-error value type is currently unknown
-                              placeholder={value.description}
-                              onChange={(e) =>
-                                setParams({
-                                  ...params,
-                                  [key]: e.target.value,
-                                })
-                              }
-                              className="mt-1"
-                            />
-                          ) : (
-                            <Input
-                              // @ts-expect-error value type is currently unknown
-                              type={value.type === "number" ? "number" : "text"}
-                              id={key}
-                              name={key}
-                              // @ts-expect-error value type is currently unknown
-                              placeholder={value.description}
-                              onChange={(e) =>
-                                setParams({
-                                  ...params,
-                                  [key]:
-                                    // @ts-expect-error value type is currently unknown
-                                    value.type === "number"
-                                      ? Number(e.target.value)
-                                      : e.target.value,
-                                })
-                              }
-                              className="mt-1"
-                            />
-                          )
-                        }
-                      </div>
-                    ),
-                  )}
-                  <Button onClick={() => callTool(selectedTool.name, params)}>
-                    <Send className="w-4 h-4 mr-2" />
-                    Run Tool
-                  </Button>
-                  {toolResult && renderToolResult()}
-                </div>
-              ) : (
-                <Alert>
-                  <AlertDescription>
-                    Select a tool from the list to view its details and run it
-                  </AlertDescription>
-                </Alert>
+      <div className="bg-card rounded-lg shadow">
+        <div className="p-4 border-b border-gray-200">
+          <h3 className="font-semibold">
+            {selectedTool ? selectedTool.name : "Select a tool"}
+          </h3>
+        </div>
+        <div className="p-4">
+          {error ? (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>Error</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          ) : selectedTool ? (
+            <div className="space-y-4">
+              <p className="text-sm text-gray-600">
+                {selectedTool.description}
+              </p>
+              {Object.entries(selectedTool.inputSchema.properties ?? []).map(
+                ([key, value]) => (
+                  <div key={key}>
+                    <Label
+                      htmlFor={key}
+                      className="block text-sm font-medium text-gray-700"
+                    >
+                      {key}
+                    </Label>
+                    {
+                      /* @ts-expect-error value type is currently unknown */
+                      value.type === "string" ? (
+                        <Textarea
+                          id={key}
+                          name={key}
+                          // @ts-expect-error value type is currently unknown
+                          placeholder={value.description}
+                          onChange={(e) =>
+                            setParams({
+                              ...params,
+                              [key]: e.target.value,
+                            })
+                          }
+                          className="mt-1"
+                        />
+                      ) : (
+                        <Input
+                          // @ts-expect-error value type is currently unknown
+                          type={value.type === "number" ? "number" : "text"}
+                          id={key}
+                          name={key}
+                          // @ts-expect-error value type is currently unknown
+                          placeholder={value.description}
+                          onChange={(e) =>
+                            setParams({
+                              ...params,
+                              [key]:
+                                // @ts-expect-error value type is currently unknown
+                                value.type === "number"
+                                  ? Number(e.target.value)
+                                  : e.target.value,
+                            })
+                          }
+                          className="mt-1"
+                        />
+                      )
+                    }
+                  </div>
+                ),
               )}
+              <Button onClick={() => callTool(selectedTool.name, params)}>
+                <Send className="w-4 h-4 mr-2" />
+                Run Tool
+              </Button>
+              {toolResult && renderToolResult()}
             </div>
-          </div>
-        </>
-      )}
+          ) : (
+            <Alert>
+              <AlertDescription>
+                Select a tool from the list to view its details and run it
+              </AlertDescription>
+            </Alert>
+          )}
+        </div>
+      </div>
     </TabsContent>
   );
 };

From 27bd503240efc9b07425d259cdf92a17b712fdb1 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 9 Dec 2024 10:37:56 +0000
Subject: [PATCH 17/34] fix: remove duplicate ServerCapabilities type
 declarations

---
 client/src/App.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index b016626..fb4e603 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -58,9 +58,7 @@ import ToolsTab from "./components/ToolsTab";
 
 type ServerCapabilities = z.infer<typeof ServerCapabilitiesSchema>;
 
-type ServerCapabilities = z.infer<typeof ServerCapabilitiesSchema>;
-
-type ServerCapabilities = z.infer<typeof ServerCapabilitiesSchema>;
+// PLACEHOLDER: imports and other type definitions
 
 
 const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;

From 1ddc63b3304fefb6cc50a7008aaa9a14af461b00 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 9 Dec 2024 11:07:42 +0000
Subject: [PATCH 18/34] refactor: remove disabled state from Sampling and Roots
 tabs

---
 client/src/App.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index fb4e603..867633b 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -523,7 +523,7 @@ const App = () => {
                   <Bell className="w-4 h-4 mr-2" />
                   Ping
                 </TabsTrigger>
-                <TabsTrigger value="sampling" className="relative" disabled={!serverCapabilities?.sampling}>
+                <TabsTrigger value="sampling" className="relative">
                   <Hash className="w-4 h-4 mr-2" />
                   Sampling
                   {pendingSampleRequests.length > 0 && (
@@ -532,7 +532,7 @@ const App = () => {
                     </span>
                   )}
                 </TabsTrigger>
-                <TabsTrigger value="roots" disabled={!serverCapabilities?.roots}>
+                <TabsTrigger value="roots">
                   <FolderTree className="w-4 h-4 mr-2" />
                   Roots
                 </TabsTrigger>

From 024f06c1b7daf4f178b54ef8e6c954e9571d1f55 Mon Sep 17 00:00:00 2001
From: Jeffrey Ling <jeffrey.r.ling@gmail.com>
Date: Mon, 9 Dec 2024 04:29:30 -0700
Subject: [PATCH 19/34] cleanup diffs

---
 client/src/App.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 867633b..03b11cc 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -58,9 +58,6 @@ import ToolsTab from "./components/ToolsTab";
 
 type ServerCapabilities = z.infer<typeof ServerCapabilitiesSchema>;
 
-// PLACEHOLDER: imports and other type definitions
-
-
 const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
 
 const params = new URLSearchParams(window.location.search);
@@ -224,8 +221,6 @@ const App = () => {
     rootsRef.current = roots;
   }, [roots]);
 
-
-
   const pushHistory = (request: object, response?: object) => {
     setRequestHistory((prev) => [
       ...prev,

From 26f0cb3c8bc18945b566063d8489b4e60fb61ade Mon Sep 17 00:00:00 2001
From: Jeffrey Ling <jeffrey.r.ling@gmail.com>
Date: Mon, 9 Dec 2024 04:43:48 -0700
Subject: [PATCH 20/34] merge conflict

---
 client/src/App.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 0617c79..2990cb5 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -505,7 +505,8 @@ const App = () => {
           {mcpClient ? (
             <Tabs
               defaultValue={
-                window.location.hash.slice(1) ||
+                Object.keys(serverCapabilities ?? {}).includes(window.location.hash.slice(1)) ?
+                window.location.hash.slice(1) :
                 serverCapabilities?.resources ? "resources" :
                 serverCapabilities?.prompts ? "prompts" :
                 serverCapabilities?.tools ? "tools" :

From 7878e1764a55a4d78e428272b3b15382b6b0591c Mon Sep 17 00:00:00 2001
From: Jeffrey Ling <jeffrey.r.ling@gmail.com>
Date: Mon, 9 Dec 2024 04:52:15 -0700
Subject: [PATCH 21/34] address comment

---
 client/src/App.tsx | 28 +++++++---------------------
 1 file changed, 7 insertions(+), 21 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 2990cb5..f64276a 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -561,9 +561,7 @@ const App = () => {
                       resourceTemplates={resourceTemplates}
                       listResources={() => {
                         clearError("resources");
-                        if (serverCapabilities?.resources) {
-                          listResources();
-                        }
+                        listResources();
                       }}
                       clearResources={() => {
                         setResources([]);
@@ -571,9 +569,7 @@ const App = () => {
                       }}
                       listResourceTemplates={() => {
                         clearError("resources");
-                        if (serverCapabilities?.resources) {
-                          listResourceTemplates();
-                        }
+                        listResourceTemplates();
                       }}
                       clearResourceTemplates={() => {
                         setResourceTemplates([]);
@@ -581,9 +577,7 @@ const App = () => {
                       }}
                       readResource={(uri) => {
                         clearError("resources");
-                        if (serverCapabilities?.resources) {
-                          readResource(uri);
-                        }
+                        readResource(uri);
                       }}
                       selectedResource={selectedResource}
                       setSelectedResource={(resource) => {
@@ -599,9 +593,7 @@ const App = () => {
                       prompts={prompts}
                       listPrompts={() => {
                         clearError("prompts");
-                        if (serverCapabilities?.prompts) {
-                          listPrompts();
-                        }
+                        listPrompts();
                       }}
                       clearPrompts={() => {
                         setPrompts([]);
@@ -609,9 +601,7 @@ const App = () => {
                       }}
                       getPrompt={(name, args) => {
                         clearError("prompts");
-                        if (serverCapabilities?.prompts) {
-                          getPrompt(name, args);
-                        }
+                        getPrompt(name, args);
                       }}
                       selectedPrompt={selectedPrompt}
                       setSelectedPrompt={(prompt) => {
@@ -626,9 +616,7 @@ const App = () => {
                       tools={tools}
                       listTools={() => {
                         clearError("tools");
-                        if (serverCapabilities?.tools) {
-                          listTools();
-                        }
+                        listTools();
                       }}
                       clearTools={() => {
                         setTools([]);
@@ -636,9 +624,7 @@ const App = () => {
                       }}
                       callTool={(name, params) => {
                         clearError("tools");
-                        if (serverCapabilities?.tools) {
-                          callTool(name, params);
-                        }
+                        callTool(name, params);
                       }}
                       selectedTool={selectedTool}
                       setSelectedTool={(tool) => {

From 1f4d35f8a34f1793e76e33cb7f2e80c0d8f021e0 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 13 Dec 2024 11:21:35 +0000
Subject: [PATCH 22/34] fix: properly handle object type parameters in tools

- Add special handling for object type parameters
- Parse JSON input for object parameters
- Maintain raw input if JSON parsing fails
- Fixes #110

Co-Authored-By: ashwin@anthropic.com <ashwin@anthropic.com>
---
 client/src/components/ToolsTab.tsx | 53 ++++++++++++++++++++++++------
 1 file changed, 43 insertions(+), 10 deletions(-)

diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 085f76a..43b0668 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -159,13 +159,15 @@ const ToolsTab = ({
                       {key}
                     </Label>
                     {
-                      /* @ts-expect-error value type is currently unknown */
+                      // @ts-expect-error Tool schema types are not fully typed
                       value.type === "string" ? (
                         <Textarea
                           id={key}
                           name={key}
-                          // @ts-expect-error value type is currently unknown
-                          placeholder={value.description}
+                          placeholder={
+                            // @ts-expect-error Tool schema types are not fully typed
+                            value.description
+                          }
                           onChange={(e) =>
                             setParams({
                               ...params,
@@ -174,19 +176,50 @@ const ToolsTab = ({
                           }
                           className="mt-1"
                         />
-                      ) : (
-                        <Input
-                          // @ts-expect-error value type is currently unknown
-                          type={value.type === "number" ? "number" : "text"}
+                      ) :
+                      // @ts-expect-error Tool schema types are not fully typed
+                      value.type === "object" ? (
+                        <Textarea
                           id={key}
                           name={key}
-                          // @ts-expect-error value type is currently unknown
-                          placeholder={value.description}
+                          placeholder={
+                            // @ts-expect-error Tool schema types are not fully typed
+                            value.description
+                          }
+                          onChange={(e) => {
+                            try {
+                              const parsed = JSON.parse(e.target.value);
+                              setParams({
+                                ...params,
+                                [key]: parsed,
+                              });
+                            } catch (err) {
+                              // If invalid JSON, store as string - will be validated on submit
+                              setParams({
+                                ...params,
+                                [key]: e.target.value,
+                              });
+                            }
+                          }}
+                          className="mt-1"
+                        />
+                      ) : (
+                        <Input
+                          type={
+                            // @ts-expect-error Tool schema types are not fully typed
+                            value.type === "number" ? "number" : "text"
+                          }
+                          id={key}
+                          name={key}
+                          placeholder={
+                            // @ts-expect-error Tool schema types are not fully typed
+                            value.description
+                          }
                           onChange={(e) =>
                             setParams({
                               ...params,
                               [key]:
-                                // @ts-expect-error value type is currently unknown
+                                // @ts-expect-error Tool schema types are not fully typed
                                 value.type === "number"
                                   ? Number(e.target.value)
                                   : e.target.value,

From 14bda1f03043e013d2ce66853b5140473c40eb2f Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 13 Dec 2024 12:12:33 +0000
Subject: [PATCH 23/34] chore: revert unrelated changes to TypeScript comments
 and formatting

- Reverted @ts-expect-error messages back to original text
- Removed unnecessary line breaks in placeholder and type properties
- Kept object parameter handling functionality intact

Co-Authored-By: ashwin@anthropic.com <ashwin@anthropic.com>
---
 client/src/components/ToolsTab.tsx | 30 +++++++++++-------------------
 1 file changed, 11 insertions(+), 19 deletions(-)

diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 43b0668..77a97e7 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -159,15 +159,13 @@ const ToolsTab = ({
                       {key}
                     </Label>
                     {
-                      // @ts-expect-error Tool schema types are not fully typed
+                      /* @ts-expect-error value type is currently unknown */
                       value.type === "string" ? (
                         <Textarea
                           id={key}
                           name={key}
-                          placeholder={
-                            // @ts-expect-error Tool schema types are not fully typed
-                            value.description
-                          }
+                          // @ts-expect-error value type is currently unknown
+                          placeholder={value.description}
                           onChange={(e) =>
                             setParams({
                               ...params,
@@ -177,15 +175,13 @@ const ToolsTab = ({
                           className="mt-1"
                         />
                       ) :
-                      // @ts-expect-error Tool schema types are not fully typed
+                      /* @ts-expect-error value type is currently unknown */
                       value.type === "object" ? (
                         <Textarea
                           id={key}
                           name={key}
-                          placeholder={
-                            // @ts-expect-error Tool schema types are not fully typed
-                            value.description
-                          }
+                          // @ts-expect-error value type is currently unknown
+                          placeholder={value.description}
                           onChange={(e) => {
                             try {
                               const parsed = JSON.parse(e.target.value);
@@ -205,21 +201,17 @@ const ToolsTab = ({
                         />
                       ) : (
                         <Input
-                          type={
-                            // @ts-expect-error Tool schema types are not fully typed
-                            value.type === "number" ? "number" : "text"
-                          }
+                          // @ts-expect-error value type is currently unknown
+                          type={value.type === "number" ? "number" : "text"}
                           id={key}
                           name={key}
-                          placeholder={
-                            // @ts-expect-error Tool schema types are not fully typed
-                            value.description
-                          }
+                          // @ts-expect-error value type is currently unknown
+                          placeholder={value.description}
                           onChange={(e) =>
                             setParams({
                               ...params,
                               [key]:
-                                // @ts-expect-error Tool schema types are not fully typed
+                                // @ts-expect-error value type is currently unknown
                                 value.type === "number"
                                   ? Number(e.target.value)
                                   : e.target.value,

From 54e9957ec5e39ff422a0a37182c3fb335c51bb4a Mon Sep 17 00:00:00 2001
From: David Soria Parra <davidsp@anthropic.com>
Date: Wed, 18 Dec 2024 11:39:24 +0000
Subject: [PATCH 24/34] feat: add help and debug links to sidebar

---
 README.md                         |  2 +-
 client/src/components/Sidebar.tsx | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index c5e6b2e..b02f1b1 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@ 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).
+For more details on ways to use the inspector, see the [Inspector section of the MCP docs site](https://modelcontextprotocol.io/docs/tools/inspector). For help with debugging, see the [Debugging guide](https://modelcontextprotocol.io/docs/tools/debugging).
 
 ### From this repository
 
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 266f98e..17a4174 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Play, ChevronDown, ChevronRight } from "lucide-react";
+import { Play, ChevronDown, ChevronRight, CircleHelp, Bug } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -220,7 +220,7 @@ const Sidebar = ({
         </div>
       </div>
       <div className="p-4 border-t">
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center justify-between">
           <Select
             value={theme}
             onValueChange={(value: string) =>
@@ -236,6 +236,19 @@ const Sidebar = ({
               <SelectItem value="dark">Dark</SelectItem>
             </SelectContent>
           </Select>
+
+          <div className="flex items-center space-x-2">
+            <a href="https://modelcontextprotocol.io/docs/tools/inspector" target="_blank" rel="noopener noreferrer">
+              <Button variant="ghost" title="Inspector Documentation">
+                <CircleHelp className="w-4 h-4 text-gray-800" />
+              </Button>
+            </a>
+            <a href="https://modelcontextprotocol.io/docs/tools/debugging" target="_blank" rel="noopener noreferrer">
+              <Button variant="ghost" title="Debugging Guide">
+                <Bug className="w-4 h-4 text-gray-800" />
+              </Button>
+            </a>
+          </div>
         </div>
       </div>
     </div>

From dc49d46baa04dbfb9e14285f38353583bf8d4328 Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Wed, 18 Dec 2024 12:35:23 -0800
Subject: [PATCH 25/34] refactor: extract draggable pane and connection logic
 into hooks

- Create useDraggablePane hook for history pane drag behavior
- Create useConnection hook for MCP client connection and requests
- Update App.tsx to use both hooks
---
 client/src/App.tsx                       | 280 +++++------------------
 client/src/lib/hooks/useConnection.ts    | 188 +++++++++++++++
 client/src/lib/hooks/useDraggablePane.ts |  44 ++++
 3 files changed, 292 insertions(+), 220 deletions(-)
 create mode 100644 client/src/lib/hooks/useConnection.ts
 create mode 100644 client/src/lib/hooks/useDraggablePane.ts

diff --git a/client/src/App.tsx b/client/src/App.tsx
index f64276a..c225c30 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,37 +1,26 @@
-import { Client } from "@modelcontextprotocol/sdk/client/index.js";
-import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+import { useDraggablePane } from "./lib/hooks/useDraggablePane";
+import { useConnection } from "./lib/hooks/useConnection";
 import {
-  ClientNotification,
   ClientRequest,
   CompatibilityCallToolResult,
   CompatibilityCallToolResultSchema,
-  CreateMessageRequestSchema,
   CreateMessageResult,
   EmptyResultSchema,
   GetPromptResultSchema,
   ListPromptsResultSchema,
   ListResourcesResultSchema,
   ListResourceTemplatesResultSchema,
-  ListRootsRequestSchema,
-  ListToolsResultSchema,
-  ProgressNotificationSchema,
   ReadResourceResultSchema,
-  Request,
+  ListToolsResultSchema,
   Resource,
   ResourceTemplate,
   Root,
   ServerNotification,
-  Tool,
-  ServerCapabilitiesSchema,
-  Result,
+  Tool
 } from "@modelcontextprotocol/sdk/types.js";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
-import {
-  Notification,
-  StdErrNotification,
-  StdErrNotificationSchema,
-} from "./lib/notificationTypes";
+import { StdErrNotification } from "./lib/notificationTypes";
 
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
@@ -43,8 +32,7 @@ import {
   MessageSquare,
 } from "lucide-react";
 
-import { toast } from "react-toastify";
-import { z, type ZodType } from "zod";
+import { z } from "zod";
 import "./App.css";
 import ConsoleTab from "./components/ConsoleTab";
 import HistoryAndNotifications from "./components/History";
@@ -56,21 +44,11 @@ import SamplingTab, { PendingRequest } from "./components/SamplingTab";
 import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
 
-type ServerCapabilities = z.infer<typeof ServerCapabilitiesSchema>;
-
-const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
-
 const params = new URLSearchParams(window.location.search);
 const PROXY_PORT = params.get("proxyPort") ?? "3000";
-const REQUEST_TIMEOUT =
-  parseInt(params.get("timeout") ?? "") || DEFAULT_REQUEST_TIMEOUT_MSEC;
 const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`;
 
 const App = () => {
-  const [connectionStatus, setConnectionStatus] = useState<
-    "disconnected" | "connected" | "error"
-  >("disconnected");
-  const [serverCapabilities, setServerCapabilities] = useState<ServerCapabilities | null>(null);
   const [resources, setResources] = useState<Resource[]>([]);
   const [resourceTemplates, setResourceTemplates] = useState<
     ResourceTemplate[]
@@ -95,10 +73,6 @@ const App = () => {
 
   const [sseUrl, setSseUrl] = useState<string>("http://localhost:3001/sse");
   const [transportType, setTransportType] = useState<"stdio" | "sse">("stdio");
-  const [requestHistory, setRequestHistory] = useState<
-    { request: string; response?: string }[]
-  >([]);
-  const [mcpClient, setMcpClient] = useState<Client | null>(null);
   const [notifications, setNotifications] = useState<ServerNotification[]>([]);
   const [stdErrNotifications, setStdErrNotifications] = useState<
     StdErrNotification[]
@@ -149,49 +123,64 @@ const App = () => {
   >();
   const [nextToolCursor, setNextToolCursor] = useState<string | undefined>();
   const progressTokenRef = useRef(0);
-  const [historyPaneHeight, setHistoryPaneHeight] = useState<number>(300);
-  const [isDragging, setIsDragging] = useState(false);
-  const dragStartY = useRef<number>(0);
-  const dragStartHeight = useRef<number>(0);
 
-  const handleDragStart = useCallback(
-    (e: React.MouseEvent) => {
-      setIsDragging(true);
-      dragStartY.current = e.clientY;
-      dragStartHeight.current = historyPaneHeight;
-      document.body.style.userSelect = "none";
+  const {
+    height: historyPaneHeight,
+    handleDragStart
+  } = useDraggablePane(300);
+
+  const {
+    connectionStatus,
+    serverCapabilities,
+    mcpClient,
+    requestHistory,
+    makeRequest: makeConnectionRequest,
+    sendNotification,
+    connect: connectMcpServer
+  } = useConnection({
+    transportType,
+    command,
+    args,
+    sseUrl,
+    env,
+    proxyServerUrl: PROXY_SERVER_URL,
+    onNotification: (notification) => {
+      setNotifications(prev => [...prev, notification as ServerNotification]);
     },
-    [historyPaneHeight],
-  );
-
-  const handleDragMove = useCallback(
-    (e: MouseEvent) => {
-      if (!isDragging) return;
-      const deltaY = dragStartY.current - e.clientY;
-      const newHeight = Math.max(
-        100,
-        Math.min(800, dragStartHeight.current + deltaY),
-      );
-      setHistoryPaneHeight(newHeight);
+    onStdErrNotification: (notification) => {
+      setStdErrNotifications(prev => [...prev, notification as StdErrNotification]);
     },
-    [isDragging],
-  );
+    onPendingRequest: (request, resolve, reject) => {
+      setPendingSampleRequests(prev => [
+        ...prev,
+        { id: nextRequestId.current++, request, resolve, reject }
+      ]);
+    },
+    getRoots: () => rootsRef.current
+  });
 
-  const handleDragEnd = useCallback(() => {
-    setIsDragging(false);
-    document.body.style.userSelect = "";
-  }, []);
-
-  useEffect(() => {
-    if (isDragging) {
-      window.addEventListener("mousemove", handleDragMove);
-      window.addEventListener("mouseup", handleDragEnd);
-      return () => {
-        window.removeEventListener("mousemove", handleDragMove);
-        window.removeEventListener("mouseup", handleDragEnd);
-      };
+  const makeRequest = async <T extends z.ZodType>(
+    request: ClientRequest,
+    schema: T,
+    tabKey?: keyof typeof errors,
+  ) => {
+    try {
+      const response = await makeConnectionRequest(request, schema);
+      if (tabKey !== undefined) {
+        clearError(tabKey);
+      }
+      return response;
+    } catch (e) {
+      const errorString = (e as Error).message ?? String(e);
+      if (tabKey !== undefined) {
+        setErrors((prev) => ({
+          ...prev,
+          [tabKey]: errorString,
+        }));
+      }
+      throw e;
     }
-  }, [isDragging, handleDragMove, handleDragEnd]);
+  };
 
   useEffect(() => {
     localStorage.setItem("lastCommand", command);
@@ -228,83 +217,10 @@ const App = () => {
     }
   }, []);
 
-  const pushHistory = (request: object, response?: object) => {
-    setRequestHistory((prev) => [
-      ...prev,
-      {
-        request: JSON.stringify(request),
-        response: response !== undefined ? JSON.stringify(response) : undefined,
-      },
-    ]);
-  };
-
   const clearError = (tabKey: keyof typeof errors) => {
     setErrors((prev) => ({ ...prev, [tabKey]: null }));
   };
 
-  const makeRequest = async <T extends ZodType<object>>(
-    request: ClientRequest,
-    schema: T,
-    tabKey?: keyof typeof errors,
-  ) => {
-    if (!mcpClient) {
-      throw new Error("MCP client not connected");
-    }
-
-    try {
-      const abortController = new AbortController();
-      const timeoutId = setTimeout(() => {
-        abortController.abort("Request timed out");
-      }, REQUEST_TIMEOUT);
-
-      let response;
-      try {
-        response = await mcpClient.request(request, schema, {
-          signal: abortController.signal,
-        });
-        pushHistory(request, response);
-      } catch (error) {
-        const errorMessage = error instanceof Error ? error.message : String(error);
-        pushHistory(request, { error: errorMessage });
-        throw error;
-      } finally {
-        clearTimeout(timeoutId);
-      }
-
-      if (tabKey !== undefined) {
-        clearError(tabKey);
-      }
-
-      return response;
-    } catch (e: unknown) {
-      const errorString = (e as Error).message ?? String(e);
-      if (tabKey === undefined) {
-        toast.error(errorString);
-      } else {
-        setErrors((prev) => ({
-          ...prev,
-          [tabKey]: errorString,
-        }));
-      }
-
-      throw e;
-    }
-  };
-
-  const sendNotification = async (notification: ClientNotification) => {
-    if (!mcpClient) {
-      throw new Error("MCP client not connected");
-    }
-
-    try {
-      await mcpClient.notification(notification);
-      pushHistory(notification);
-    } catch (e: unknown) {
-      toast.error((e as Error).message ?? String(e));
-      throw e;
-    }
-  };
-
   const listResources = async () => {
     const response = await makeRequest(
       {
@@ -407,82 +323,6 @@ const App = () => {
     await sendNotification({ method: "notifications/roots/list_changed" });
   };
 
-  const connectMcpServer = async () => {
-    try {
-      const client = new Client<Request, Notification, Result>(
-        {
-          name: "mcp-inspector",
-          version: "0.0.1",
-        },
-        {
-          capabilities: {
-            // Support all client capabilities since we're an inspector tool
-            sampling: {},
-            roots: {
-              listChanged: true,
-            },
-          },
-        },
-      );
-
-      const backendUrl = new URL(`${PROXY_SERVER_URL}/sse`);
-
-      backendUrl.searchParams.append("transportType", transportType);
-      if (transportType === "stdio") {
-        backendUrl.searchParams.append("command", command);
-        backendUrl.searchParams.append("args", args);
-        backendUrl.searchParams.append("env", JSON.stringify(env));
-      } else {
-        backendUrl.searchParams.append("url", sseUrl);
-      }
-
-      const clientTransport = new SSEClientTransport(backendUrl);
-      client.setNotificationHandler(
-        ProgressNotificationSchema,
-        (notification) => {
-          setNotifications((prevNotifications) => [
-            ...prevNotifications,
-            notification,
-          ]);
-        },
-      );
-
-      client.setNotificationHandler(
-        StdErrNotificationSchema,
-        (notification) => {
-          setStdErrNotifications((prevErrorNotifications) => [
-            ...prevErrorNotifications,
-            notification,
-          ]);
-        },
-      );
-
-      await client.connect(clientTransport);
-
-      const capabilities = client.getServerCapabilities();
-      setServerCapabilities(capabilities ?? null);
-
-      client.setRequestHandler(CreateMessageRequestSchema, (request) => {
-        return new Promise<CreateMessageResult>((resolve, reject) => {
-          setPendingSampleRequests((prev) => [
-            ...prev,
-            { id: nextRequestId.current++, request, resolve, reject },
-          ]);
-        });
-      });
-
-      client.setRequestHandler(ListRootsRequestSchema, async () => {
-        return { roots: rootsRef.current };
-      });
-
-      setMcpClient(client);
-      setConnectionStatus("connected");
-    } catch (e) {
-      console.error(e);
-      setConnectionStatus("error");
-    }
-  };
-
   return (
     <div className="flex h-screen bg-background">
       <Sidebar
diff --git a/client/src/lib/hooks/useConnection.ts b/client/src/lib/hooks/useConnection.ts
new file mode 100644
index 0000000..87b7f60
--- /dev/null
+++ b/client/src/lib/hooks/useConnection.ts
@@ -0,0 +1,188 @@
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+import {
+  ClientNotification,
+  ClientRequest,
+  CreateMessageRequestSchema,
+  ListRootsRequestSchema,
+  ProgressNotificationSchema,
+  Request,
+  Result,
+  ServerCapabilities,
+} from "@modelcontextprotocol/sdk/types.js";
+import { useState } from "react";
+import { toast } from "react-toastify";
+import { Notification, StdErrNotificationSchema } from "../notificationTypes";
+import { z } from "zod";
+
+const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
+
+interface UseConnectionOptions {
+  transportType: "stdio" | "sse";
+  command: string;
+  args: string;
+  sseUrl: string;
+  env: Record<string, string>;
+  proxyServerUrl: string;
+  requestTimeout?: number;
+  onNotification?: (notification: Notification) => void;
+  onStdErrNotification?: (notification: Notification) => void;
+  onPendingRequest?: (request: any, resolve: any, reject: any) => void;
+  getRoots?: () => any[];
+}
+
+export function useConnection({
+  transportType,
+  command,
+  args,
+  sseUrl,
+  env,
+  proxyServerUrl,
+  requestTimeout = DEFAULT_REQUEST_TIMEOUT_MSEC,
+  onNotification,
+  onStdErrNotification,
+  onPendingRequest,
+  getRoots,
+}: UseConnectionOptions) {
+  const [connectionStatus, setConnectionStatus] = useState<"disconnected" | "connected" | "error">("disconnected");
+  const [serverCapabilities, setServerCapabilities] = useState<ServerCapabilities | null>(null);
+  const [mcpClient, setMcpClient] = useState<Client | null>(null);
+  const [requestHistory, setRequestHistory] = useState<{ request: string; response?: string }[]>([]);
+
+  const pushHistory = (request: object, response?: object) => {
+    setRequestHistory((prev) => [
+      ...prev,
+      {
+        request: JSON.stringify(request),
+        response: response !== undefined ? JSON.stringify(response) : undefined,
+      },
+    ]);
+  };
+
+  const makeRequest = async <T extends z.ZodType>(
+    request: ClientRequest,
+    schema: T
+  ) => {
+    if (!mcpClient) {
+      throw new Error("MCP client not connected");
+    }
+
+    try {
+      const abortController = new AbortController();
+      const timeoutId = setTimeout(() => {
+        abortController.abort("Request timed out");
+      }, requestTimeout);
+
+      let response;
+      try {
+        response = await mcpClient.request(request, schema, {
+          signal: abortController.signal,
+        });
+        pushHistory(request, response);
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        pushHistory(request, { error: errorMessage });
+        throw error;
+      } finally {
+        clearTimeout(timeoutId);
+      }
+
+
+      return response;
+    } catch (e: unknown) {
+      const errorString = (e as Error).message ?? String(e);
+      toast.error(errorString);
+
+      throw e;
+    }
+  };
+
+  const sendNotification = async (notification: ClientNotification) => {
+    if (!mcpClient) {
+      throw new Error("MCP client not connected");
+    }
+
+    try {
+      await mcpClient.notification(notification);
+      pushHistory(notification);
+    } catch (e: unknown) {
+      toast.error((e as Error).message ?? String(e));
+      throw e;
+    }
+  };
+
+  const connect = async () => {
+    try {
+      const client = new Client<Request, Notification, Result>(
+        {
+          name: "mcp-inspector",
+          version: "0.0.1",
+        },
+        {
+          capabilities: {
+            sampling: {},
+            roots: {
+              listChanged: true,
+            },
+          },
+        },
+      );
+
+      const backendUrl = new URL(`${proxyServerUrl}/sse`);
+
+      backendUrl.searchParams.append("transportType", transportType);
+      if (transportType === "stdio") {
+        backendUrl.searchParams.append("command", command);
+        backendUrl.searchParams.append("args", args);
+        backendUrl.searchParams.append("env", JSON.stringify(env));
+      } else {
+        backendUrl.searchParams.append("url", sseUrl);
+      }
+
+      const clientTransport = new SSEClientTransport(backendUrl);
+      
+      if (onNotification) {
+        client.setNotificationHandler(ProgressNotificationSchema, onNotification);
+      }
+
+      if (onStdErrNotification) {
+        client.setNotificationHandler(StdErrNotificationSchema, onStdErrNotification);
+      }
+
+      await client.connect(clientTransport);
+
+      const capabilities = client.getServerCapabilities();
+      setServerCapabilities(capabilities ?? null);
+
+      if (onPendingRequest) {
+        client.setRequestHandler(CreateMessageRequestSchema, (request) => {
+          return new Promise((resolve, reject) => {
+            onPendingRequest(request, resolve, reject);
+          });
+        });
+      }
+
+      if (getRoots) {
+        client.setRequestHandler(ListRootsRequestSchema, async () => {
+          return { roots: getRoots() };
+        });
+      }
+
+      setMcpClient(client);
+      setConnectionStatus("connected");
+    } catch (e) {
+      console.error(e);
+      setConnectionStatus("error");
+    }
+  };
+
+  return {
+    connectionStatus,
+    serverCapabilities,
+    mcpClient,
+    requestHistory,
+    makeRequest,
+    sendNotification,
+    connect
+  };
+}
\ No newline at end of file
diff --git a/client/src/lib/hooks/useDraggablePane.ts b/client/src/lib/hooks/useDraggablePane.ts
new file mode 100644
index 0000000..46b8fc3
--- /dev/null
+++ b/client/src/lib/hooks/useDraggablePane.ts
@@ -0,0 +1,44 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function useDraggablePane(initialHeight: number) {
+  const [height, setHeight] = useState(initialHeight);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartY = useRef<number>(0);
+  const dragStartHeight = useRef<number>(0);
+
+  const handleDragStart = useCallback((e: React.MouseEvent) => {
+    setIsDragging(true);
+    dragStartY.current = e.clientY;
+    dragStartHeight.current = height;
+    document.body.style.userSelect = "none";
+  }, [height]);
+
+  const handleDragMove = useCallback((e: MouseEvent) => {
+    if (!isDragging) return;
+    const deltaY = dragStartY.current - e.clientY;
+    const newHeight = Math.max(100, Math.min(800, dragStartHeight.current + deltaY));
+    setHeight(newHeight);
+  }, [isDragging]);
+
+  const handleDragEnd = useCallback(() => {
+    setIsDragging(false);
+    document.body.style.userSelect = "";
+  }, []);
+
+  useEffect(() => {
+    if (isDragging) {
+      window.addEventListener("mousemove", handleDragMove);
+      window.addEventListener("mouseup", handleDragEnd);
+      return () => {
+        window.removeEventListener("mousemove", handleDragMove);
+        window.removeEventListener("mouseup", handleDragEnd);
+      };
+    }
+  }, [isDragging, handleDragMove, handleDragEnd]);
+
+  return {
+    height,
+    isDragging,
+    handleDragStart
+  };
+}
\ No newline at end of file

From 53226dd391d32ae14f72ee87a556913df19db061 Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Thu, 19 Dec 2024 12:12:11 -0800
Subject: [PATCH 26/34] feat: add GitHub link to sidebar for bug reports and
 contributions

---
 client/src/components/Sidebar.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 17a4174..0bcc1a2 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Play, ChevronDown, ChevronRight, CircleHelp, Bug } from "lucide-react";
+import { Play, ChevronDown, ChevronRight, CircleHelp, Bug, Github } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -248,6 +248,11 @@ const Sidebar = ({
                 <Bug className="w-4 h-4 text-gray-800" />
               </Button>
             </a>
+            <a href="https://github.com/modelcontextprotocol/inspector" target="_blank" rel="noopener noreferrer">
+              <Button variant="ghost" title="Report bugs or contribute on GitHub">
+                <Github className="w-4 h-4 text-gray-800" />
+              </Button>
+            </a>
           </div>
         </div>
       </div>

From ffc29663c820fbb74fc03f7b3d4e5f2e41b4ca6b Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Thu, 19 Dec 2024 13:17:04 -0800
Subject: [PATCH 27/34] fix: reduce theme selector width to 100px to prevent
 crowding with icon buttons

---
 client/src/components/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 0bcc1a2..2eb6fdf 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -227,7 +227,7 @@ const Sidebar = ({
               setTheme(value as "system" | "light" | "dark")
             }
           >
-            <SelectTrigger className="w-[120px]" id="theme-select">
+            <SelectTrigger className="w-[100px]" id="theme-select">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>

From dfb36e179215560e52f101768118ecdb418265e6 Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Thu, 19 Dec 2024 12:14:20 -0800
Subject: [PATCH 28/34] feat: use monospace font for all input fields in
 sidebar

Makes command, arguments, URL and environment variables easier to read and edit.
---
 client/src/components/Sidebar.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 17a4174..0463cac 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -86,6 +86,7 @@ const Sidebar = ({
                   placeholder="Command"
                   value={command}
                   onChange={(e) => setCommand(e.target.value)}
+                  className="font-mono"
                 />
               </div>
               <div className="space-y-2">
@@ -94,6 +95,7 @@ const Sidebar = ({
                   placeholder="Arguments (space-separated)"
                   value={args}
                   onChange={(e) => setArgs(e.target.value)}
+                  className="font-mono"
                 />
               </div>
             </>
@@ -104,6 +106,7 @@ const Sidebar = ({
                 placeholder="URL"
                 value={sseUrl}
                 onChange={(e) => setSseUrl(e.target.value)}
+                className="font-mono"
               />
             </div>
           )}
@@ -135,6 +138,7 @@ const Sidebar = ({
                             newEnv[e.target.value] = value;
                             setEnv(newEnv);
                           }}
+                          className="font-mono"
                         />
                         <Input
                           placeholder="Value"
@@ -144,6 +148,7 @@ const Sidebar = ({
                             newEnv[key] = e.target.value;
                             setEnv(newEnv);
                           }}
+                          className="font-mono"
                         />
                       </div>
                       <Button

From d973f58bef6584a9070676be88a4ca2925272389 Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Thu, 9 Jan 2025 11:01:28 -0800
Subject: [PATCH 29/34] run prettier check in CI

---
 .github/workflows/main.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 2665e9d..572e79e 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -14,6 +14,9 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: Check formatting
+        run: npx prettier --check .
+
       - uses: actions/setup-node@v4
         with:
           node-version: 18

From 715936d747ae798f61eb402e4f319b6af23743f6 Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Thu, 9 Jan 2025 11:01:35 -0800
Subject: [PATCH 30/34] run prettier

---
 .prettierignore                          |  2 +
 client/src/App.tsx                       | 62 +++++++++++++++---------
 client/src/components/Sidebar.tsx        | 32 ++++++++++--
 client/src/components/ToolsTab.tsx       |  3 +-
 client/src/lib/hooks/useConnection.ts    | 33 ++++++++-----
 client/src/lib/hooks/useDraggablePane.ts | 37 ++++++++------
 client/src/main.tsx                      |  4 +-
 client/vite.config.ts                    |  8 +--
 8 files changed, 120 insertions(+), 61 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index b7c83c0..c8824c9 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,2 +1,4 @@
 packages
 server/build
+CODE_OF_CONDUCT.md
+SECURITY.md
diff --git a/client/src/App.tsx b/client/src/App.tsx
index c225c30..f3791b2 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -16,7 +16,7 @@ import {
   ResourceTemplate,
   Root,
   ServerNotification,
-  Tool
+  Tool,
 } from "@modelcontextprotocol/sdk/types.js";
 import { useEffect, useRef, useState } from "react";
 
@@ -124,10 +124,7 @@ const App = () => {
   const [nextToolCursor, setNextToolCursor] = useState<string | undefined>();
   const progressTokenRef = useRef(0);
 
-  const {
-    height: historyPaneHeight,
-    handleDragStart
-  } = useDraggablePane(300);
+  const { height: historyPaneHeight, handleDragStart } = useDraggablePane(300);
 
   const {
     connectionStatus,
@@ -136,7 +133,7 @@ const App = () => {
     requestHistory,
     makeRequest: makeConnectionRequest,
     sendNotification,
-    connect: connectMcpServer
+    connect: connectMcpServer,
   } = useConnection({
     transportType,
     command,
@@ -145,18 +142,21 @@ const App = () => {
     env,
     proxyServerUrl: PROXY_SERVER_URL,
     onNotification: (notification) => {
-      setNotifications(prev => [...prev, notification as ServerNotification]);
+      setNotifications((prev) => [...prev, notification as ServerNotification]);
     },
     onStdErrNotification: (notification) => {
-      setStdErrNotifications(prev => [...prev, notification as StdErrNotification]);
-    },
-    onPendingRequest: (request, resolve, reject) => {
-      setPendingSampleRequests(prev => [
+      setStdErrNotifications((prev) => [
         ...prev,
-        { id: nextRequestId.current++, request, resolve, reject }
+        notification as StdErrNotification,
       ]);
     },
-    getRoots: () => rootsRef.current
+    onPendingRequest: (request, resolve, reject) => {
+      setPendingSampleRequests((prev) => [
+        ...prev,
+        { id: nextRequestId.current++, request, resolve, reject },
+      ]);
+    },
+    getRoots: () => rootsRef.current,
   });
 
   const makeRequest = async <T extends z.ZodType>(
@@ -345,26 +345,40 @@ const App = () => {
           {mcpClient ? (
             <Tabs
               defaultValue={
-                Object.keys(serverCapabilities ?? {}).includes(window.location.hash.slice(1)) ?
-                window.location.hash.slice(1) :
-                serverCapabilities?.resources ? "resources" :
-                serverCapabilities?.prompts ? "prompts" :
-                serverCapabilities?.tools ? "tools" :
-                "ping"
+                Object.keys(serverCapabilities ?? {}).includes(
+                  window.location.hash.slice(1),
+                )
+                  ? window.location.hash.slice(1)
+                  : serverCapabilities?.resources
+                    ? "resources"
+                    : serverCapabilities?.prompts
+                      ? "prompts"
+                      : serverCapabilities?.tools
+                        ? "tools"
+                        : "ping"
               }
               className="w-full p-4"
               onValueChange={(value) => (window.location.hash = value)}
             >
               <TabsList className="mb-4 p-0">
-                <TabsTrigger value="resources" disabled={!serverCapabilities?.resources}>
+                <TabsTrigger
+                  value="resources"
+                  disabled={!serverCapabilities?.resources}
+                >
                   <Files className="w-4 h-4 mr-2" />
                   Resources
                 </TabsTrigger>
-                <TabsTrigger value="prompts" disabled={!serverCapabilities?.prompts}>
+                <TabsTrigger
+                  value="prompts"
+                  disabled={!serverCapabilities?.prompts}
+                >
                   <MessageSquare className="w-4 h-4 mr-2" />
                   Prompts
                 </TabsTrigger>
-                <TabsTrigger value="tools" disabled={!serverCapabilities?.tools}>
+                <TabsTrigger
+                  value="tools"
+                  disabled={!serverCapabilities?.tools}
+                >
                   <Hammer className="w-4 h-4 mr-2" />
                   Tools
                 </TabsTrigger>
@@ -388,7 +402,9 @@ const App = () => {
               </TabsList>
 
               <div className="w-full">
-                {!serverCapabilities?.resources && !serverCapabilities?.prompts && !serverCapabilities?.tools ? (
+                {!serverCapabilities?.resources &&
+                !serverCapabilities?.prompts &&
+                !serverCapabilities?.tools ? (
                   <div className="flex items-center justify-center p-4">
                     <p className="text-lg text-gray-500">
                       The connected server does not support any MCP capabilities
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index c716bd2..17cd59d 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -1,5 +1,12 @@
 import { useState } from "react";
-import { Play, ChevronDown, ChevronRight, CircleHelp, Bug, Github } from "lucide-react";
+import {
+  Play,
+  ChevronDown,
+  ChevronRight,
+  CircleHelp,
+  Bug,
+  Github,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -243,18 +250,33 @@ const Sidebar = ({
           </Select>
 
           <div className="flex items-center space-x-2">
-            <a href="https://modelcontextprotocol.io/docs/tools/inspector" target="_blank" rel="noopener noreferrer">
+            <a
+              href="https://modelcontextprotocol.io/docs/tools/inspector"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               <Button variant="ghost" title="Inspector Documentation">
                 <CircleHelp className="w-4 h-4 text-gray-800" />
               </Button>
             </a>
-            <a href="https://modelcontextprotocol.io/docs/tools/debugging" target="_blank" rel="noopener noreferrer">
+            <a
+              href="https://modelcontextprotocol.io/docs/tools/debugging"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               <Button variant="ghost" title="Debugging Guide">
                 <Bug className="w-4 h-4 text-gray-800" />
               </Button>
             </a>
-            <a href="https://github.com/modelcontextprotocol/inspector" target="_blank" rel="noopener noreferrer">
-              <Button variant="ghost" title="Report bugs or contribute on GitHub">
+            <a
+              href="https://github.com/modelcontextprotocol/inspector"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button
+                variant="ghost"
+                title="Report bugs or contribute on GitHub"
+              >
                 <Github className="w-4 h-4 text-gray-800" />
               </Button>
             </a>
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 77a97e7..6b64c01 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -174,8 +174,7 @@ const ToolsTab = ({
                           }
                           className="mt-1"
                         />
-                      ) :
-                      /* @ts-expect-error value type is currently unknown */
+                      ) : /* @ts-expect-error value type is currently unknown */
                       value.type === "object" ? (
                         <Textarea
                           id={key}
diff --git a/client/src/lib/hooks/useConnection.ts b/client/src/lib/hooks/useConnection.ts
index 87b7f60..ef937d1 100644
--- a/client/src/lib/hooks/useConnection.ts
+++ b/client/src/lib/hooks/useConnection.ts
@@ -44,10 +44,15 @@ export function useConnection({
   onPendingRequest,
   getRoots,
 }: UseConnectionOptions) {
-  const [connectionStatus, setConnectionStatus] = useState<"disconnected" | "connected" | "error">("disconnected");
-  const [serverCapabilities, setServerCapabilities] = useState<ServerCapabilities | null>(null);
+  const [connectionStatus, setConnectionStatus] = useState<
+    "disconnected" | "connected" | "error"
+  >("disconnected");
+  const [serverCapabilities, setServerCapabilities] =
+    useState<ServerCapabilities | null>(null);
   const [mcpClient, setMcpClient] = useState<Client | null>(null);
-  const [requestHistory, setRequestHistory] = useState<{ request: string; response?: string }[]>([]);
+  const [requestHistory, setRequestHistory] = useState<
+    { request: string; response?: string }[]
+  >([]);
 
   const pushHistory = (request: object, response?: object) => {
     setRequestHistory((prev) => [
@@ -61,7 +66,7 @@ export function useConnection({
 
   const makeRequest = async <T extends z.ZodType>(
     request: ClientRequest,
-    schema: T
+    schema: T,
   ) => {
     if (!mcpClient) {
       throw new Error("MCP client not connected");
@@ -80,14 +85,14 @@ export function useConnection({
         });
         pushHistory(request, response);
       } catch (error) {
-        const errorMessage = error instanceof Error ? error.message : String(error);
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
         pushHistory(request, { error: errorMessage });
         throw error;
       } finally {
         clearTimeout(timeoutId);
       }
 
-
       return response;
     } catch (e: unknown) {
       const errorString = (e as Error).message ?? String(e);
@@ -140,13 +145,19 @@ export function useConnection({
       }
 
       const clientTransport = new SSEClientTransport(backendUrl);
-      
+
       if (onNotification) {
-        client.setNotificationHandler(ProgressNotificationSchema, onNotification);
+        client.setNotificationHandler(
+          ProgressNotificationSchema,
+          onNotification,
+        );
       }
 
       if (onStdErrNotification) {
-        client.setNotificationHandler(StdErrNotificationSchema, onStdErrNotification);
+        client.setNotificationHandler(
+          StdErrNotificationSchema,
+          onStdErrNotification,
+        );
       }
 
       await client.connect(clientTransport);
@@ -183,6 +194,6 @@ export function useConnection({
     requestHistory,
     makeRequest,
     sendNotification,
-    connect
+    connect,
   };
-}
\ No newline at end of file
+}
diff --git a/client/src/lib/hooks/useDraggablePane.ts b/client/src/lib/hooks/useDraggablePane.ts
index 46b8fc3..5c0e357 100644
--- a/client/src/lib/hooks/useDraggablePane.ts
+++ b/client/src/lib/hooks/useDraggablePane.ts
@@ -6,19 +6,28 @@ export function useDraggablePane(initialHeight: number) {
   const dragStartY = useRef<number>(0);
   const dragStartHeight = useRef<number>(0);
 
-  const handleDragStart = useCallback((e: React.MouseEvent) => {
-    setIsDragging(true);
-    dragStartY.current = e.clientY;
-    dragStartHeight.current = height;
-    document.body.style.userSelect = "none";
-  }, [height]);
+  const handleDragStart = useCallback(
+    (e: React.MouseEvent) => {
+      setIsDragging(true);
+      dragStartY.current = e.clientY;
+      dragStartHeight.current = height;
+      document.body.style.userSelect = "none";
+    },
+    [height],
+  );
 
-  const handleDragMove = useCallback((e: MouseEvent) => {
-    if (!isDragging) return;
-    const deltaY = dragStartY.current - e.clientY;
-    const newHeight = Math.max(100, Math.min(800, dragStartHeight.current + deltaY));
-    setHeight(newHeight);
-  }, [isDragging]);
+  const handleDragMove = useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging) return;
+      const deltaY = dragStartY.current - e.clientY;
+      const newHeight = Math.max(
+        100,
+        Math.min(800, dragStartHeight.current + deltaY),
+      );
+      setHeight(newHeight);
+    },
+    [isDragging],
+  );
 
   const handleDragEnd = useCallback(() => {
     setIsDragging(false);
@@ -39,6 +48,6 @@ export function useDraggablePane(initialHeight: number) {
   return {
     height,
     isDragging,
-    handleDragStart
+    handleDragStart,
   };
-}
\ No newline at end of file
+}
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 8ed57a0..450213d 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -1,7 +1,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import App from "./App.tsx";
 import "./index.css";
 
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 3b6c407..dd3bd01 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -14,8 +14,8 @@ export default defineConfig({
     minify: false,
     rollupOptions: {
       output: {
-        manualChunks: undefined
-      }
-    }
-  }
+        manualChunks: undefined,
+      },
+    },
+  },
 });

From a976aefb39817fb4cbbac1891525d8420e419a60 Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Fri, 13 Dec 2024 16:34:42 +0000
Subject: [PATCH 31/34] allow passing env vars to server from command line

---
 README.md                         | 13 +++++--
 bin/cli.js                        | 26 +++++++++++--
 client/src/components/Sidebar.tsx | 61 ++++++++++++++++++++++++-------
 server/src/index.ts               | 14 ++++---
 4 files changed, 88 insertions(+), 26 deletions(-)

diff --git a/README.md b/README.md
index b02f1b1..98b4a61 100644
--- a/README.md
+++ b/README.md
@@ -14,10 +14,17 @@ To inspect an MCP server implementation, there's no need to clone this repo. Ins
 npx @modelcontextprotocol/inspector build/index.js
 ```
 
-You can also pass arguments along which will get passed as arguments to your MCP server:
+You can pass both arguments and environment variables to your MCP server. Arguments are passed directly to your server, while environment variables can be set using the `-e` flag:
 
-```
-npx @modelcontextprotocol/inspector build/index.js arg1 arg2 ...
+```bash
+# Pass arguments only
+npx @modelcontextprotocol/inspector build/index.js arg1 arg2
+
+# Pass environment variables only
+npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=value2 build/index.js
+
+# Pass both environment variables and arguments
+npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=value2 build/index.js arg1 arg2
 ```
 
 The inspector runs both a client UI (default port 5173) and an MCP proxy server (default port 3000). Open the client UI in your browser to use the inspector. You can customize the ports if needed:
diff --git a/bin/cli.js b/bin/cli.js
index 2dcc613..9695138 100755
--- a/bin/cli.js
+++ b/bin/cli.js
@@ -11,8 +11,24 @@ function delay(ms) {
 }
 
 async function main() {
-  // Get command line arguments
-  const [, , command, ...mcpServerArgs] = process.argv;
+  // Parse command line arguments
+  const args = process.argv.slice(2);
+  const envVars = {};
+  const mcpServerArgs = [];
+  let command = null;
+
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === "-e" && i + 1 < args.length) {
+      const [key, value] = args[++i].split("=");
+      if (key && value) {
+        envVars[key] = value;
+      }
+    } else if (!command) {
+      command = args[i];
+    } else {
+      mcpServerArgs.push(args[i]);
+    }
+  }
 
   const inspectorServerPath = resolve(
     __dirname,
@@ -52,7 +68,11 @@ async function main() {
       ...(mcpServerArgs ? [`--args=${mcpServerArgs.join(" ")}`] : []),
     ],
     {
-      env: { ...process.env, PORT: SERVER_PORT },
+      env: {
+        ...process.env,
+        PORT: SERVER_PORT,
+        MCP_ENV_VARS: JSON.stringify(envVars),
+      },
       signal: abort.signal,
       echoOutput: true,
     },
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 17cd59d..bdd817f 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -6,6 +6,8 @@ import {
   CircleHelp,
   Bug,
   Github,
+  Eye,
+  EyeOff,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -54,6 +56,7 @@ const Sidebar = ({
 }: SidebarProps) => {
   const [theme, setTheme] = useTheme();
   const [showEnvVars, setShowEnvVars] = useState(false);
+  const [shownEnvVars, setShownEnvVars] = useState<Record<string, boolean>>({});
 
   return (
     <div className="w-80 bg-card border-r border-border flex flex-col h-full">
@@ -134,20 +137,40 @@ const Sidebar = ({
               {showEnvVars && (
                 <div className="space-y-2">
                   {Object.entries(env).map(([key, value], idx) => (
-                    <div key={idx} className="grid grid-cols-[1fr,auto] gap-2">
-                      <div className="space-y-1">
+                    <div key={idx} className="space-y-2 pb-4">
+                      <div className="flex gap-2">
                         <Input
                           placeholder="Key"
                           value={key}
                           onChange={(e) => {
+                            const newKey = e.target.value;
                             const newEnv = { ...env };
                             delete newEnv[key];
-                            newEnv[e.target.value] = value;
+                            newEnv[newKey] = value;
                             setEnv(newEnv);
+                            setShownEnvVars((prev) => {
+                              const { [key]: shown, ...rest } = prev;
+                              return shown ? { ...rest, [newKey]: true } : rest;
+                            });
                           }}
                           className="font-mono"
                         />
+                        <Button
+                          variant="destructive"
+                          size="icon"
+                          className="h-9 w-9 p-0 shrink-0"
+                          onClick={() => {
+                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                            const { [key]: _removed, ...rest } = env;
+                            setEnv(rest);
+                          }}
+                        >
+                          ×
+                        </Button>
+                      </div>
+                      <div className="flex gap-2">
                         <Input
+                          type={shownEnvVars[key] ? "text" : "password"}
                           placeholder="Value"
                           value={value}
                           onChange={(e) => {
@@ -157,25 +180,35 @@ const Sidebar = ({
                           }}
                           className="font-mono"
                         />
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          className="h-9 w-9 p-0 shrink-0"
+                          onClick={() => {
+                            setShownEnvVars((prev) => ({
+                              ...prev,
+                              [key]: !prev[key],
+                            }));
+                          }}
+                        >
+                          {shownEnvVars[key] ? (
+                            <Eye className="h-4 w-4" />
+                          ) : (
+                            <EyeOff className="h-4 w-4" />
+                          )}
+                        </Button>
                       </div>
-                      <Button
-                        variant="destructive"
-                        onClick={() => {
-                          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                          const { [key]: removed, ...rest } = env;
-                          setEnv(rest);
-                        }}
-                      >
-                        Remove
-                      </Button>
                     </div>
                   ))}
                   <Button
                     variant="outline"
+                    className="w-full mt-2"
                     onClick={() => {
+                      const key = "";
                       const newEnv = { ...env };
-                      newEnv[""] = "";
+                      newEnv[key] = "";
                       setEnv(newEnv);
+                      setShownEnvVars({});
                     }}
                   >
                     Add Environment Variable
diff --git a/server/src/index.ts b/server/src/index.ts
index b82b17d..9662009 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -15,6 +15,11 @@ import express from "express";
 import mcpProxy from "./mcpProxy.js";
 import { findActualExecutable } from "spawn-rx";
 
+const defaultEnvironment = {
+  ...getDefaultEnvironment(),
+  ...(process.env.MCP_ENV_VARS ? JSON.parse(process.env.MCP_ENV_VARS) : {}),
+};
+
 // Polyfill EventSource for an SSE client in Node.js
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 (global as any).EventSource = EventSource;
@@ -40,13 +45,12 @@ const createTransport = async (query: express.Request["query"]) => {
   if (transportType === "stdio") {
     const command = query.command as string;
     const origArgs = shellParseArgs(query.args as string) as string[];
-    const env = query.env ? JSON.parse(query.env as string) : undefined;
+    const queryEnv = query.env ? JSON.parse(query.env as string) : {};
+    const env = { ...process.env, ...defaultEnvironment, ...queryEnv };
 
     const { cmd, args } = findActualExecutable(command, origArgs);
 
-    console.log(
-      `Stdio transport: command=${cmd}, args=${args}, env=${JSON.stringify(env)}`,
-    );
+    console.log(`Stdio transport: command=${cmd}, args=${args}`);
 
     const transport = new StdioClientTransport({
       command: cmd,
@@ -136,8 +140,6 @@ app.post("/message", async (req, res) => {
 
 app.get("/config", (req, res) => {
   try {
-    const defaultEnvironment = getDefaultEnvironment();
-
     res.json({
       defaultEnvironment,
       defaultCommand: values.env,

From 052de8690d7d230a870de8cf9ee71a5af25ec005 Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Fri, 10 Jan 2025 07:50:45 -0800
Subject: [PATCH 32/34] respond to PR feedback

---
 README.md                         |  7 +++++--
 bin/cli.js                        | 14 ++++++++++---
 client/src/components/Sidebar.tsx | 35 ++++++++++++++++++++-----------
 3 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 98b4a61..98b5704 100644
--- a/README.md
+++ b/README.md
@@ -21,10 +21,13 @@ You can pass both arguments and environment variables to your MCP server. Argume
 npx @modelcontextprotocol/inspector build/index.js arg1 arg2
 
 # Pass environment variables only
-npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=value2 build/index.js
+npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 build/index.js
 
 # Pass both environment variables and arguments
-npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=value2 build/index.js arg1 arg2
+npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 build/index.js arg1 arg2
+
+# Use -- to separate inspector flags from server arguments
+npx @modelcontextprotocol/inspector -e KEY=$VALUE -- build/index.js -e server-flag
 ```
 
 The inspector runs both a client UI (default port 5173) and an MCP proxy server (default port 3000). Open the client UI in your browser to use the inspector. You can customize the ports if needed:
diff --git a/bin/cli.js b/bin/cli.js
index 9695138..94348fb 100755
--- a/bin/cli.js
+++ b/bin/cli.js
@@ -16,17 +16,25 @@ async function main() {
   const envVars = {};
   const mcpServerArgs = [];
   let command = null;
+  let parsingFlags = true;
 
   for (let i = 0; i < args.length; i++) {
-    if (args[i] === "-e" && i + 1 < args.length) {
+    const arg = args[i];
+
+    if (parsingFlags && arg === "--") {
+      parsingFlags = false;
+      continue;
+    }
+
+    if (parsingFlags && arg === "-e" && i + 1 < args.length) {
       const [key, value] = args[++i].split("=");
       if (key && value) {
         envVars[key] = value;
       }
     } else if (!command) {
-      command = args[i];
+      command = arg;
     } else {
-      mcpServerArgs.push(args[i]);
+      mcpServerArgs.push(arg);
     }
   }
 
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index bdd817f..f70335e 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -56,7 +56,7 @@ const Sidebar = ({
 }: SidebarProps) => {
   const [theme, setTheme] = useTheme();
   const [showEnvVars, setShowEnvVars] = useState(false);
-  const [shownEnvVars, setShownEnvVars] = useState<Record<string, boolean>>({});
+  const [shownEnvVars, setShownEnvVars] = useState<Set<string>>(new Set());
 
   return (
     <div className="w-80 bg-card border-r border-border flex flex-col h-full">
@@ -149,8 +149,12 @@ const Sidebar = ({
                             newEnv[newKey] = value;
                             setEnv(newEnv);
                             setShownEnvVars((prev) => {
-                              const { [key]: shown, ...rest } = prev;
-                              return shown ? { ...rest, [newKey]: true } : rest;
+                              const next = new Set(prev);
+                              if (next.has(key)) {
+                                next.delete(key);
+                                next.add(newKey);
+                              }
+                              return next;
                             });
                           }}
                           className="font-mono"
@@ -170,7 +174,7 @@ const Sidebar = ({
                       </div>
                       <div className="flex gap-2">
                         <Input
-                          type={shownEnvVars[key] ? "text" : "password"}
+                          type={shownEnvVars.has(key) ? "text" : "password"}
                           placeholder="Value"
                           value={value}
                           onChange={(e) => {
@@ -185,16 +189,24 @@ const Sidebar = ({
                           size="icon"
                           className="h-9 w-9 p-0 shrink-0"
                           onClick={() => {
-                            setShownEnvVars((prev) => ({
-                              ...prev,
-                              [key]: !prev[key],
-                            }));
+                            setShownEnvVars((prev) => {
+                              const next = new Set(prev);
+                              if (next.has(key)) {
+                                next.delete(key);
+                              } else {
+                                next.add(key);
+                              }
+                              return next;
+                            });
                           }}
+                          aria-label={shownEnvVars.has(key) ? "Hide value" : "Show value"}
+                          aria-pressed={shownEnvVars.has(key)}
+                          title={shownEnvVars.has(key) ? "Hide value" : "Show value"}
                         >
-                          {shownEnvVars[key] ? (
-                            <Eye className="h-4 w-4" />
+                          {shownEnvVars.has(key) ? (
+                            <Eye className="h-4 w-4" aria-hidden="true" />
                           ) : (
-                            <EyeOff className="h-4 w-4" />
+                            <EyeOff className="h-4 w-4" aria-hidden="true" />
                           )}
                         </Button>
                       </div>
@@ -208,7 +220,6 @@ const Sidebar = ({
                       const newEnv = { ...env };
                       newEnv[key] = "";
                       setEnv(newEnv);
-                      setShownEnvVars({});
                     }}
                   >
                     Add Environment Variable

From ec150eb8b4ab4f25eeab7e972a7a9c4c2eef2dfb Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Fri, 10 Jan 2025 07:53:55 -0800
Subject: [PATCH 33/34] prettier

---
 client/src/components/Sidebar.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index f70335e..c95f621 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -199,9 +199,13 @@ const Sidebar = ({
                               return next;
                             });
                           }}
-                          aria-label={shownEnvVars.has(key) ? "Hide value" : "Show value"}
+                          aria-label={
+                            shownEnvVars.has(key) ? "Hide value" : "Show value"
+                          }
                           aria-pressed={shownEnvVars.has(key)}
-                          title={shownEnvVars.has(key) ? "Hide value" : "Show value"}
+                          title={
+                            shownEnvVars.has(key) ? "Hide value" : "Show value"
+                          }
                         >
                           {shownEnvVars.has(key) ? (
                             <Eye className="h-4 w-4" aria-hidden="true" />

From 7ec661e8bdafd0eb661b854ae38baa4262f5b902 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 22 Jan 2025 04:50:31 +0000
Subject: [PATCH 34/34] Bump vite in the npm_and_yarn group across 1 directory

Bumps the npm_and_yarn group with 1 update in the / directory: [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite).


Updates `vite` from 5.4.11 to 5.4.12
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v5.4.12/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v5.4.12/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
  dependency-group: npm_and_yarn
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 13f4248..c5e4d88 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6279,9 +6279,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.11",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz",
-      "integrity": "sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==",
+      "version": "5.4.12",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.12.tgz",
+      "integrity": "sha512-KwUaKB27TvWwDJr1GjjWthLMATbGEbeWYZIbGZ5qFIsgPP3vWzLu4cVooqhm5/Z2SPDUMjyPVjTztm5tYKwQxA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {