Merge branch 'main' into cli-remote-no-required-endpoint

Author: olaservo

.github/workflows/claude.yml

@@ -0,0 +1,64 @@
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+
+jobs:
+  claude:
+    if: |
+      (
+        (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+        (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
+        (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
+        (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
+      ) &&
+      (
+        github.actor == 'ihrpr' ||
+        github.actor == 'olaservo'
+      )
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code
+        id: claude
+        uses: anthropics/claude-code-action@beta
+        with:
+          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
+
+          # Optional: Specify model (defaults to Claude Sonnet 4, uncomment for Claude Opus 4)
+          # model: "claude-opus-4-20250514"
+
+          # Optional: Customize the trigger phrase (default: @claude)
+          # trigger_phrase: "/claude"
+
+          # Optional: Trigger when specific user is assigned to an issue
+          # assignee_trigger: "claude-bot"
+
+          # Optional: Allow Claude to run specific commands
+          # allowed_tools: "Bash(npm install),Bash(npm run build),Bash(npm run test:*),Bash(npm run lint:*)"
+
+          # Optional: Add custom instructions for Claude to customize its behavior for your project
+          # custom_instructions: |
+          #   Follow our coding standards
+          #   Ensure all new code has tests
+          #   Use TypeScript for new files
+
+          # Optional: Custom environment variables for Claude
+          # claude_env: |
+          #   NODE_ENV: test

.gitignore

@@ -9,7 +9,8 @@ client/tsconfig.app.tsbuildinfo
 client/tsconfig.node.tsbuildinfo
 cli/build
 test-output
+# symlinked by `npm run link:sdk`:
+sdk
 client/playwright-report/
 client/results.json
 client/test-results/
-

README.md

@@ -166,6 +166,12 @@ If you need to disable authentication (NOT RECOMMENDED), you can set the `DANGER
 DANGEROUSLY_OMIT_AUTH=true npm start
 ```
 
+You can also set the token via the `MCP_PROXY_AUTH_TOKEN` environment variable when starting the server:
+
+```bash
+MCP_PROXY_AUTH_TOKEN=$(openssl rand -hex 32) npm start
+```
+
 #### Local-only Binding
 
 By default, both the MCP Inspector proxy server and client bind only to `localhost` to prevent network access. This ensures they are not accessible from other devices on the network. If you need to bind to all interfaces for development purposes, you can override this with the `HOST` environment variable:
@@ -254,6 +260,12 @@ Development mode:
 
 ```bash
 npm run dev
+
+# To co-develop with the typescript-sdk package (assuming it's cloned in ../typescript-sdk; set MCP_SDK otherwise):
+npm run dev:sdk "cd sdk && npm run examples:simple-server:w"
+# then open http://localhost:3000/mcp as SHTTP in the inspector.
+# To go back to the deployed SDK version:
+#   npm run unlink:sdk && npm i
 ```
 
 > **Note for Windows users:**
@@ -303,7 +315,7 @@ npx @modelcontextprotocol/inspector --cli node build/index.js --method prompts/l
 npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com
 
 # Connect to a remote MCP server (with Streamable HTTP transport)
-npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com --transport http
+npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com --transport http --method tools/list
 
 # Call a tool on a remote server
 npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com --method tools/call --tool-name remotetool --tool-arg param=value

cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-cli",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "description": "CLI for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",

cli/src/cli.ts

@@ -50,71 +50,29 @@ function delay(ms: number): Promise<void> {
 }
 
 async function runWebClient(args: Args): Promise<void> {
-  const inspectorServerPath = resolve(
-    __dirname,
-    "../../",
-    "server",
-    "build",
-    "index.js",
-  );
-
   // Path to the client entry point
   const inspectorClientPath = resolve(
     __dirname,
     "../../",
     "client",
     "bin",
-    "client.js",
+    "start.js",
   );
 
-  const CLIENT_PORT: string = process.env.CLIENT_PORT ?? "6274";
-  const SERVER_PORT: string = process.env.SERVER_PORT ?? "6277";
-
-  console.log("Starting MCP inspector...");
-
   const abort = new AbortController();
   let cancelled: boolean = false;
   process.on("SIGINT", () => {
     cancelled = true;
     abort.abort();
   });
 
-  let server: ReturnType<typeof spawnPromise>;
-  let serverOk: unknown;
-
   try {
-    server = spawnPromise(
-      "node",
-      [
-        inspectorServerPath,
-        ...(args.command ? [`--env`, args.command] : []),
-        ...(args.args ? [`--args=${args.args.join(" ")}`] : []),
-      ],
-      {
-        env: {
-          ...process.env,
-          PORT: SERVER_PORT,
-          MCP_ENV_VARS: JSON.stringify(args.envArgs),
-        },
-        signal: abort.signal,
-        echoOutput: true,
-      },
-    );
-
-    // Make sure server started before starting client
-    serverOk = await Promise.race([server, delay(2 * 1000)]);
-  } catch (error) {}
-
-  if (serverOk) {
-    try {
-      await spawnPromise("node", [inspectorClientPath], {
-        env: { ...process.env, PORT: CLIENT_PORT },
-        signal: abort.signal,
-        echoOutput: true,
-      });
-    } catch (e) {
-      if (!cancelled || process.env.DEBUG) throw e;
-    }
+    await spawnPromise("node", [inspectorClientPath], {
+      signal: abort.signal,
+      echoOutput: true,
+    });
+  } catch (e) {
+    if (!cancelled || process.env.DEBUG) throw e;
   }
 }
 

client/bin/start.js

@@ -40,7 +40,7 @@ async function startDevServer(serverOptions) {
       ...process.env,
       SERVER_PORT,
       CLIENT_PORT,
-      MCP_PROXY_TOKEN: sessionToken,
+      MCP_PROXY_AUTH_TOKEN: sessionToken,
       MCP_ENV_VARS: JSON.stringify(envVars),
     },
     signal: abort.signal,
@@ -99,7 +99,7 @@ async function startProdServer(serverOptions) {
         ...process.env,
         SERVER_PORT,
         CLIENT_PORT,
-        MCP_PROXY_TOKEN: sessionToken,
+        MCP_PROXY_AUTH_TOKEN: sessionToken,
         MCP_ENV_VARS: JSON.stringify(envVars),
       },
       signal: abort.signal,
@@ -247,8 +247,9 @@ async function main() {
       : "Starting MCP inspector...",
   );
 
-  // Generate session token for authentication
-  const sessionToken = randomBytes(32).toString("hex");
+  // Use provided token from environment or generate a new one
+  const sessionToken =
+    process.env.MCP_PROXY_AUTH_TOKEN || randomBytes(32).toString("hex");
   const authDisabled = !!process.env.DANGEROUSLY_OMIT_AUTH;
 
   const abort = new AbortController();

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "description": "Client-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",

client/src/App.tsx

@@ -80,6 +80,9 @@ const App = () => {
     ResourceTemplate[]
   >([]);
   const [resourceContent, setResourceContent] = useState<string>("");
+  const [resourceContentMap, setResourceContentMap] = useState<
+    Record<string, string>
+  >({});
   const [prompts, setPrompts] = useState<Prompt[]>([]);
   const [promptContent, setPromptContent] = useState<string>("");
   const [tools, setTools] = useState<Tool[]>([]);
@@ -461,7 +464,12 @@ const App = () => {
       ReadResourceResultSchema,
       "resources",
     );
-    setResourceContent(JSON.stringify(response, null, 2));
+    const content = JSON.stringify(response, null, 2);
+    setResourceContent(content);
+    setResourceContentMap((prev) => ({
+      ...prev,
+      [uri]: content,
+    }));
   };
 
   const subscribeToResource = async (uri: string) => {
@@ -863,6 +871,11 @@ const App = () => {
                       toolResult={toolResult}
                       nextCursor={nextToolCursor}
                       error={errors.tools}
+                      resourceContent={resourceContentMap}
+                      onReadResource={(uri: string) => {
+                        clearError("resources");
+                        readResource(uri);
+                      }}
                     />
                     <ConsoleTab />
                     <PingTab

client/src/components/ResourceLinkView.tsx

@@ -0,0 +1,112 @@
+import { useState, useCallback, useMemo, memo } from "react";
+import JsonView from "./JsonView";
+
+interface ResourceLinkViewProps {
+  uri: string;
+  name?: string;
+  description?: string;
+  mimeType?: string;
+  resourceContent: string;
+  onReadResource?: (uri: string) => void;
+}
+
+const ResourceLinkView = memo(
+  ({
+    uri,
+    name,
+    description,
+    mimeType,
+    resourceContent,
+    onReadResource,
+  }: ResourceLinkViewProps) => {
+    const [{ expanded, loading }, setState] = useState({
+      expanded: false,
+      loading: false,
+    });
+
+    const expandedContent = useMemo(
+      () =>
+        expanded && resourceContent ? (
+          <div className="mt-2">
+            <div className="flex justify-between items-center mb-1">
+              <span className="font-semibold text-green-600">Resource:</span>
+            </div>
+            <JsonView data={resourceContent} className="bg-background" />
+          </div>
+        ) : null,
+      [expanded, resourceContent],
+    );
+
+    const handleClick = useCallback(() => {
+      if (!onReadResource) return;
+      if (!expanded) {
+        setState((prev) => ({ ...prev, expanded: true, loading: true }));
+        onReadResource(uri);
+        setState((prev) => ({ ...prev, loading: false }));
+      } else {
+        setState((prev) => ({ ...prev, expanded: false }));
+      }
+    }, [expanded, onReadResource, uri]);
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent) => {
+        if ((e.key === "Enter" || e.key === " ") && onReadResource) {
+          e.preventDefault();
+          handleClick();
+        }
+      },
+      [handleClick, onReadResource],
+    );
+
+    return (
+      <div className="text-sm text-foreground bg-secondary py-2 px-3 rounded">
+        <div
+          className="flex justify-between items-center cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 rounded"
+          onClick={onReadResource ? handleClick : undefined}
+          onKeyDown={onReadResource ? handleKeyDown : undefined}
+          tabIndex={onReadResource ? 0 : -1}
+          role="button"
+          aria-expanded={expanded}
+          aria-label={`${expanded ? "Collapse" : "Expand"} resource ${uri}`}
+        >
+          <div className="flex-1 min-w-0">
+            <div className="flex items-start justify-between gap-2 mb-1">
+              <span className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:underline px-1 py-0.5 break-all font-mono flex-1 min-w-0">
+                {uri}
+              </span>
+              <div className="flex items-center gap-2 flex-shrink-0">
+                {mimeType && (
+                  <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+                    {mimeType}
+                  </span>
+                )}
+                {onReadResource && (
+                  <span className="ml-2 flex-shrink-0" aria-hidden="true">
+                    {loading ? (
+                      <div className="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+                    ) : (
+                      <span>{expanded ? "▼" : "▶"}</span>
+                    )}
+                  </span>
+                )}
+              </div>
+            </div>
+            {name && (
+              <div className="font-semibold text-sm text-gray-900 dark:text-gray-100 mb-1">
+                {name}
+              </div>
+            )}
+            {description && (
+              <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
+                {description}
+              </p>
+            )}
+          </div>
+        </div>
+        {expandedContent}
+      </div>
+    );
+  },
+);
+
+export default ResourceLinkView;