Merge branch 'main' into notification-expansion-state

Author: olaservo

.github/workflows/e2e_tests.yml

@@ -0,0 +1,74 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Install dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwoff1
+
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      # Cache Playwright browsers
+      - name: Cache Playwright browsers
+        id: cache-playwright
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright # The default Playwright cache path
+          key: ${{ runner.os }}-playwright-${{ hashFiles('package-lock.json') }} # Cache key based on OS and package-lock.json
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright dependencies
+        run: npx playwright install-deps
+
+      - name: Install Playwright and browsers unless cached
+        run: npx playwright install --with-deps
+        if: steps.cache-playwright.outputs.cache-hit != 'true'
+
+      - name: Run Playwright tests
+        run: npm run test:e2e
+
+      - name: Upload Playwright Report and Screenshots
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: |
+            client/playwright-report/
+            client/test-results/
+            client/results.json
+          retention-days: 2
+
+      - name: Publish Playwright Test Summary
+        uses: daun/playwright-report-summary@v3
+        if: always()
+        with:
+          create-comment: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
+          report-file: client/results.json
+          comment-title: "🎭 Playwright E2E Test Results"
+          job-summary: true
+          icon-style: "emojis"
+          custom-info: |
+            **Test Environment:** Ubuntu Latest, Node.js 18
+            **Browsers:** Chromium, Firefox
+
+            📊 [View Detailed HTML Report](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}) (download artifacts)
+          test-command: "npm run test:e2e"

.gitignore

@@ -9,3 +9,7 @@ client/tsconfig.app.tsbuildinfo
 client/tsconfig.node.tsbuildinfo
 cli/build
 test-output
+client/playwright-report/
+client/results.json
+client/test-results/
+

CLAUDE.md

@@ -30,4 +30,4 @@ The project is organized as a monorepo with workspaces:
 
 - `client/`: React frontend with Vite, TypeScript and Tailwind
 - `server/`: Express backend with TypeScript
-- `bin/`: CLI scripts
+- `cli/`: Command-line interface for testing and invoking MCP server methods directly

CONTRIBUTING.md

@@ -13,7 +13,7 @@ Thanks for your interest in contributing! This guide explains how to get involve
 
 1. Create a new branch for your changes
 2. Make your changes following existing code style and conventions. You can run `npm run prettier-check` and `npm run prettier-fix` as applicable.
-3. Test changes locally by running `npm test`
+3. Test changes locally by running `npm test` and `npm run test:e2e`
 4. Update documentation as needed
 5. Use clear commit messages explaining your changes
 6. Verify all changes work as expected

README.md

@@ -299,9 +299,12 @@ npx @modelcontextprotocol/inspector --cli node build/index.js --method resources
 # List available prompts
 npx @modelcontextprotocol/inspector --cli node build/index.js --method prompts/list
 
-# Connect to a remote MCP server
+# Connect to a remote MCP server (default is SSE transport)
 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
+
 # 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

@@ -21,7 +21,7 @@
   },
   "devDependencies": {},
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.12.1",
+    "@modelcontextprotocol/sdk": "^1.13.0",
     "commander": "^13.1.0",
     "spawn-rx": "^5.1.2"
   }

cli/scripts/cli-tests.js

@@ -44,7 +44,14 @@ console.log(`${colors.BLUE}- Resource-related options (--uri)${colors.NC}`);
 console.log(
   `${colors.BLUE}- Prompt-related options (--prompt-name, --prompt-args)${colors.NC}`,
 );
-console.log(`${colors.BLUE}- Logging options (--log-level)${colors.NC}\n`);
+console.log(`${colors.BLUE}- Logging options (--log-level)${colors.NC}`);
+console.log(
+  `${colors.BLUE}- Transport types (--transport http/sse/stdio)${colors.NC}`,
+);
+console.log(
+  `${colors.BLUE}- Transport inference from URL suffixes (/mcp, /sse)${colors.NC}`,
+);
+console.log(`\n`);
 
 // Get directory paths
 const SCRIPTS_DIR = __dirname;
@@ -62,9 +69,11 @@ if (!fs.existsSync(OUTPUT_DIR)) {
 }
 
 // Create a temporary directory for test files
-const TEMP_DIR = fs.mkdirSync(path.join(os.tmpdir(), "mcp-inspector-tests"), {
-  recursive: true,
-});
+const TEMP_DIR = path.join(os.tmpdir(), "mcp-inspector-tests");
+fs.mkdirSync(TEMP_DIR, { recursive: true });
+
+// Track servers for cleanup
+let runningServers = [];
 
 process.on("exit", () => {
   try {
@@ -74,6 +83,21 @@ process.on("exit", () => {
       `${colors.RED}Failed to remove temp directory: ${err.message}${colors.NC}`,
     );
   }
+
+  runningServers.forEach((server) => {
+    try {
+      process.kill(-server.pid);
+    } catch (e) {}
+  });
+});
+
+process.on("SIGINT", () => {
+  runningServers.forEach((server) => {
+    try {
+      process.kill(-server.pid);
+    } catch (e) {}
+  });
+  process.exit(1);
 });
 
 // Use the existing sample config file
@@ -121,6 +145,11 @@ async function runBasicTest(testName, ...args) {
         stdio: ["ignore", "pipe", "pipe"],
       });
 
+      const timeout = setTimeout(() => {
+        console.log(`${colors.YELLOW}Test timed out: ${testName}${colors.NC}`);
+        child.kill();
+      }, 10000);
+
       // Pipe stdout and stderr to the output file
       child.stdout.pipe(outputStream);
       child.stderr.pipe(outputStream);
@@ -135,6 +164,7 @@ async function runBasicTest(testName, ...args) {
       });
 
       child.on("close", (code) => {
+        clearTimeout(timeout);
         outputStream.end();
 
         if (code === 0) {
@@ -201,6 +231,13 @@ async function runErrorTest(testName, ...args) {
         stdio: ["ignore", "pipe", "pipe"],
       });
 
+      const timeout = setTimeout(() => {
+        console.log(
+          `${colors.YELLOW}Error test timed out: ${testName}${colors.NC}`,
+        );
+        child.kill();
+      }, 10000);
+
       // Pipe stdout and stderr to the output file
       child.stdout.pipe(outputStream);
       child.stderr.pipe(outputStream);
@@ -215,6 +252,7 @@ async function runErrorTest(testName, ...args) {
       });
 
       child.on("close", (code) => {
+        clearTimeout(timeout);
         outputStream.end();
 
         // For error tests, we expect a non-zero exit code
@@ -611,6 +649,79 @@ async function runTests() {
     "debug",
   );
 
+  console.log(
+    `\n${colors.YELLOW}=== Running HTTP Transport Tests ===${colors.NC}`,
+  );
+
+  console.log(
+    `${colors.BLUE}Starting server-everything in streamableHttp mode.${colors.NC}`,
+  );
+  const httpServer = spawn(
+    "npx",
+    ["@modelcontextprotocol/server-everything", "streamableHttp"],
+    {
+      detached: true,
+      stdio: "ignore",
+    },
+  );
+  runningServers.push(httpServer);
+
+  await new Promise((resolve) => setTimeout(resolve, 3000));
+
+  // Test 25: HTTP transport inferred from URL ending with /mcp
+  await runBasicTest(
+    "http_transport_inferred",
+    "http://127.0.0.1:3001/mcp",
+    "--cli",
+    "--method",
+    "tools/list",
+  );
+
+  // Test 26: HTTP transport with explicit --transport http flag
+  await runBasicTest(
+    "http_transport_with_explicit_flag",
+    "http://127.0.0.1:3001",
+    "--transport",
+    "http",
+    "--cli",
+    "--method",
+    "tools/list",
+  );
+
+  // Test 27: HTTP transport with suffix and --transport http flag
+  await runBasicTest(
+    "http_transport_with_explicit_flag_and_suffix",
+    "http://127.0.0.1:3001/mcp",
+    "--transport",
+    "http",
+    "--cli",
+    "--method",
+    "tools/list",
+  );
+
+  // Test 28: SSE transport given to HTTP server (should fail)
+  await runErrorTest(
+    "sse_transport_given_to_http_server",
+    "http://127.0.0.1:3001",
+    "--transport",
+    "sse",
+    "--cli",
+    "--method",
+    "tools/list",
+  );
+
+  // Kill HTTP server
+  try {
+    process.kill(-httpServer.pid);
+    console.log(
+      `${colors.BLUE}HTTP server killed, waiting for port to be released...${colors.NC}`,
+    );
+  } catch (e) {
+    console.log(
+      `${colors.RED}Error killing HTTP server: ${e.message}${colors.NC}`,
+    );
+  }
+
   // Print test summary
   console.log(`\n${colors.YELLOW}=== Test Summary ===${colors.NC}`);
   console.log(`${colors.GREEN}Passed: ${PASSED_TESTS}${colors.NC}`);

cli/src/index.ts

@@ -29,9 +29,13 @@ type Args = {
   logLevel?: LogLevel;
   toolName?: string;
   toolArg?: Record<string, string>;
+  transport?: "sse" | "stdio" | "http";
 };
 
-function createTransportOptions(target: string[]): TransportOptions {
+function createTransportOptions(
+  target: string[],
+  transport?: "sse" | "stdio" | "http",
+): TransportOptions {
   if (target.length === 0) {
     throw new Error(
       "Target is required. Specify a URL or a command to execute.",
@@ -50,16 +54,38 @@ function createTransportOptions(target: string[]): TransportOptions {
     throw new Error("Arguments cannot be passed to a URL-based MCP server.");
   }
 
+  let transportType: "sse" | "stdio" | "http";
+  if (transport) {
+    if (!isUrl && transport !== "stdio") {
+      throw new Error("Only stdio transport can be used with local commands.");
+    }
+    if (isUrl && transport === "stdio") {
+      throw new Error("stdio transport cannot be used with URLs.");
+    }
+    transportType = transport;
+  } else if (isUrl) {
+    const url = new URL(command);
+    if (url.pathname.endsWith("/mcp")) {
+      transportType = "http";
+    } else if (url.pathname.endsWith("/sse")) {
+      transportType = "sse";
+    } else {
+      transportType = "sse";
+    }
+  } else {
+    transportType = "stdio";
+  }
+
   return {
-    transportType: isUrl ? "sse" : "stdio",
+    transportType,
     command: isUrl ? undefined : command,
     args: isUrl ? undefined : commandArgs,
     url: isUrl ? command : undefined,
   };
 }
 
 async function callMethod(args: Args): Promise<void> {
-  const transportOptions = createTransportOptions(args.target);
+  const transportOptions = createTransportOptions(args.target, args.transport);
   const transport = createTransport(transportOptions);
   const client = new Client({
     name: "inspector-cli",
@@ -214,6 +240,22 @@ function parseArgs(): Args {
 
         return value as LogLevel;
       },
+    )
+    //
+    // Transport options
+    //
+    .option(
+      "--transport <type>",
+      "Transport type (sse, http, or stdio). Auto-detected from URL: /mcp → http, /sse → sse, commands → stdio",
+      (value: string) => {
+        const validTransports = ["sse", "http", "stdio"];
+        if (!validTransports.includes(value)) {
+          throw new Error(
+            `Invalid transport type: ${value}. Valid types are: ${validTransports.join(", ")}`,
+          );
+        }
+        return value as "sse" | "http" | "stdio";
+      },
     );
 
   // Parse only the arguments before --