Merge branch 'origin/main' into feature/elicitations

Resolved conflicts by adopting the improved form input handling from main: - Standardized JsonSchemaType.required to only accept string arrays (JSON Schema standard) - Adopted enhanced object and array rendering with proper nested support - Improved boolean field rendering (removed extra wrapper div) - Enhanced array handling with add/remove functionality - Simplified required field validation logic This maintains elicitation functionality while benefiting from the form input fixes.
2025-07-03 16:14:21 +02:00 · 2025-07-03 16:14:21 +02:00 · 19ff315dd1
commit 19ff315dd1
parent dfbf10c575 13014a0471
36 changed files with 1363 additions and 393 deletions
--- a/.github/workflows/e2e_tests.yml
+++ b/.github/workflows/e2e_tests.yml
@ -0,0 +1,78 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    # Installing Playright dependencies can take quite awhile, and also depends on GitHub CI load.
+    timeout-minutes: 15
+    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
+        id: setup_node
+        with:
+          node-version-file: package.json
+          cache: npm
+
+      # 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
+        id: playwright-tests
+        run: npm run test:e2e
+
+      - name: Upload Playwright Report and Screenshots
+        uses: actions/upload-artifact@v4
+        if: steps.playwright-tests.conclusion != 'skipped'
+        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: steps.playwright-tests.conclusion != 'skipped'
+        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 ${{ steps.setup_node.outputs.node-version }}
+            **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"
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@ -19,7 +19,7 @@ jobs:

      - uses: actions/setup-node@v4
        with:
-          node-version: 18
+          node-version-file: package.json
          cache: npm

      # Working around https://github.com/npm/cli/issues/4828
@ -53,7 +53,7 @@ jobs:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
-          node-version: 18
+          node-version-file: package.json
          cache: npm
          registry-url: "https://registry.npmjs.org"

--- a/.gitignore
+++ b/.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/
+
--- a/.node-version
+++ b/.node-version
@ -0,0 +1 @@
+22.x.x
--- a/CLAUDE.md
+++ b/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
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -7,13 +7,13 @@ Thanks for your interest in contributing! This guide explains how to get involve
 1. Fork the repository and clone it locally
 2. Install dependencies with `npm install`
 3. Run `npm run dev` to start both client and server in development mode
-4. Use the web UI at http://127.0.0.1:6274 to interact with the inspector
+4. Use the web UI at http://localhost:6274 to interact with the inspector

 ## Development Process & Pull Requests

 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
--- a/README.md
+++ b/README.md
@ -168,20 +168,20 @@ DANGEROUSLY_OMIT_AUTH=true npm start

 #### Local-only Binding

-By default, the MCP Inspector proxy server binds only to `127.0.0.1` (localhost) to prevent network access. This ensures the server is 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:
+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:

 ```bash
 HOST=0.0.0.0 npm start
 ```

-**Warning:** Only bind to all interfaces in trusted network environments, as this exposes the proxy server's ability to execute local processes.
+**Warning:** Only bind to all interfaces in trusted network environments, as this exposes the proxy server's ability to execute local processes and both services to network access.

 #### DNS Rebinding Protection

 To prevent DNS rebinding attacks, the MCP Inspector validates the `Origin` header on incoming requests. By default, only requests from the client origin are allowed (respects `CLIENT_PORT` if set, defaulting to port 6274). You can configure additional allowed origins by setting the `ALLOWED_ORIGINS` environment variable (comma-separated list):

 ```bash
-ALLOWED_ORIGINS=http://localhost:6274,http://127.0.0.1:6274,http://localhost:8000 npm start
+ALLOWED_ORIGINS=http://localhost:6274,http://localhost:8000 npm start
 ```

 ### Configuration
@ -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

--- a/cli/package.json
+++ b/cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "@modelcontextprotocol/inspector-cli",
-  "version": "0.14.3",
+  "version": "0.15.0",
  "description": "CLI for the Model Context Protocol inspector",
  "license": "MIT",
  "author": "Anthropic, PBC (https://anthropic.com)",
@ -21,7 +21,7 @@
  },
  "devDependencies": {},
  "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.12.1",
+    "@modelcontextprotocol/sdk": "^1.13.1",
    "commander": "^13.1.0",
    "spawn-rx": "^5.1.2"
  }
--- a/cli/scripts/cli-tests.js
+++ b/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}`);
--- a/cli/src/index.ts
+++ b/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,8 +54,30 @@ 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,
@ -59,7 +85,7 @@ function createTransportOptions(target: string[]): TransportOptions {
 }

 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 --
--- a/cli/src/transport.ts
+++ b/cli/src/transport.ts
@ -3,11 +3,12 @@ import {
  getDefaultEnvironment,
  StdioClientTransport,
 } from "@modelcontextprotocol/sdk/client/stdio.js";
+import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
 import type { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
 import { findActualExecutable } from "spawn-rx";

 export type TransportOptions = {
-  transportType: "sse" | "stdio";
+  transportType: "sse" | "stdio" | "http";
  command?: string;
  args?: string[];
  url?: string;
@ -15,11 +16,22 @@ export type TransportOptions = {

 function createSSETransport(options: TransportOptions): Transport {
  const baseUrl = new URL(options.url ?? "");
-  const sseUrl = new URL("/sse", baseUrl);
+  const sseUrl = baseUrl.pathname.endsWith("/sse")
+    ? baseUrl
+    : new URL("/sse", baseUrl);

  return new SSEClientTransport(sseUrl);
 }

+function createHTTPTransport(options: TransportOptions): Transport {
+  const baseUrl = new URL(options.url ?? "");
+  const mcpUrl = baseUrl.pathname.endsWith("/mcp")
+    ? baseUrl
+    : new URL("/mcp", baseUrl);
+
+  return new StreamableHTTPClientTransport(mcpUrl);
+}
+
 function createStdioTransport(options: TransportOptions): Transport {
  let args: string[] = [];

@ -67,6 +79,10 @@ export function createTransport(options: TransportOptions): Transport {
      return createSSETransport(options);
    }

+    if (transportType === "http") {
+      return createHTTPTransport(options);
+    }
+
    throw new Error(`Unsupported transport type: ${transportType}`);
  } catch (error) {
    throw new Error(
--- a/client/bin/client.js
+++ b/client/bin/client.js
@ -1,5 +1,6 @@
 #!/usr/bin/env node

+import open from "open";
 import { join, dirname } from "path";
 import { fileURLToPath } from "url";
 import handler from "serve-handler";
@ -39,19 +40,23 @@ const server = http.createServer((request, response) => {
  return handler(request, response, handlerOptions);
 });

-const port = process.env.PORT || 6274;
+const port = parseInt(process.env.CLIENT_PORT || "6274", 10);
+const host = process.env.HOST || "localhost";
 server.on("listening", () => {
-  console.log(
-    `🔍 MCP Inspector is up and running at http://127.0.0.1:${port} 🚀`,
-  );
+  const url = process.env.INSPECTOR_URL || `http://${host}:${port}`;
+  console.log(`\n🚀 MCP Inspector is up and running at:\n   ${url}\n`);
+  if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
+    console.log(`🌐 Opening browser...`);
+    open(url);
+  }
 });
 server.on("error", (err) => {
  if (err.message.includes(`EADDRINUSE`)) {
    console.error(
-      `❌  MCP Inspector PORT IS IN USE at http://127.0.0.1:${port} ❌ `,
+      `❌  MCP Inspector PORT IS IN USE at http://${host}:${port} ❌ `,
    );
  } else {
    throw err;
  }
 });
-server.listen(port);
+server.listen(port, host);
--- a/client/bin/start.js
+++ b/client/bin/start.js
@ -7,11 +7,26 @@ import { fileURLToPath } from "url";
 import { randomBytes } from "crypto";

 const __dirname = dirname(fileURLToPath(import.meta.url));
+const DEFAULT_MCP_PROXY_LISTEN_PORT = "6277";

 function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms, true));
 }

+function getClientUrl(port, authDisabled, sessionToken, serverPort) {
+  const host = process.env.HOST || "localhost";
+  const baseUrl = `http://${host}:${port}`;
+
+  const params = new URLSearchParams();
+  if (serverPort && serverPort !== DEFAULT_MCP_PROXY_LISTEN_PORT) {
+    params.set("MCP_PROXY_PORT", serverPort);
+  }
+  if (!authDisabled) {
+    params.set("MCP_PROXY_AUTH_TOKEN", sessionToken);
+  }
+  return params.size > 0 ? `${baseUrl}/?${params.toString()}` : baseUrl;
+}
+
 async function startDevServer(serverOptions) {
  const { SERVER_PORT, CLIENT_PORT, sessionToken, envVars, abort } =
    serverOptions;
@ -23,8 +38,8 @@ async function startDevServer(serverOptions) {
    cwd: resolve(__dirname, "../..", "server"),
    env: {
      ...process.env,
-      PORT: SERVER_PORT,
-      CLIENT_PORT: CLIENT_PORT,
+      SERVER_PORT,
+      CLIENT_PORT,
      MCP_PROXY_TOKEN: sessionToken,
      MCP_ENV_VARS: JSON.stringify(envVars),
    },
@ -82,8 +97,8 @@ async function startProdServer(serverOptions) {
    {
      env: {
        ...process.env,
-        PORT: SERVER_PORT,
-        CLIENT_PORT: CLIENT_PORT,
+        SERVER_PORT,
+        CLIENT_PORT,
        MCP_PROXY_TOKEN: sessionToken,
        MCP_ENV_VARS: JSON.stringify(envVars),
      },
@ -99,30 +114,40 @@ async function startProdServer(serverOptions) {
 }

 async function startDevClient(clientOptions) {
-  const { CLIENT_PORT, authDisabled, sessionToken, abort, cancelled } =
-    clientOptions;
+  const {
+    CLIENT_PORT,
+    SERVER_PORT,
+    authDisabled,
+    sessionToken,
+    abort,
+    cancelled,
+  } = clientOptions;
  const clientCommand = "npx";
-  const clientArgs = ["vite", "--port", CLIENT_PORT];
+  const host = process.env.HOST || "localhost";
+  const clientArgs = ["vite", "--port", CLIENT_PORT, "--host", host];

  const client = spawn(clientCommand, clientArgs, {
    cwd: resolve(__dirname, ".."),
-    env: { ...process.env, PORT: CLIENT_PORT },
+    env: { ...process.env, CLIENT_PORT },
    signal: abort.signal,
    echoOutput: true,
  });

-  // Auto-open browser after vite starts
-  if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
-    const url = authDisabled
-      ? `http://127.0.0.1:${CLIENT_PORT}`
-      : `http://127.0.0.1:${CLIENT_PORT}/?MCP_PROXY_AUTH_TOKEN=${sessionToken}`;
+  const url = getClientUrl(
+    CLIENT_PORT,
+    authDisabled,
+    sessionToken,
+    SERVER_PORT,
+  );

-    // Give vite time to start before opening browser
-    setTimeout(() => {
+  // Give vite time to start before opening or logging the URL
+  setTimeout(() => {
+    console.log(`\n🚀 MCP Inspector is up and running at:\n   ${url}\n`);
+    if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
+      console.log("🌐 Opening browser...");
      open(url);
-      console.log(`\n🔗 Opening browser at: ${url}\n`);
-    }, 3000);
-  }
+    }
+  }, 3000);

  await new Promise((resolve) => {
    client.subscribe({
@ -139,7 +164,14 @@ async function startDevClient(clientOptions) {
 }

 async function startProdClient(clientOptions) {
-  const { CLIENT_PORT, authDisabled, sessionToken, abort } = clientOptions;
+  const {
+    CLIENT_PORT,
+    SERVER_PORT,
+    authDisabled,
+    sessionToken,
+    abort,
+    cancelled,
+  } = clientOptions;
  const inspectorClientPath = resolve(
    __dirname,
    "../..",
@ -148,16 +180,19 @@ async function startProdClient(clientOptions) {
    "client.js",
  );

-  // Auto-open browser with token
-  if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
-    const url = authDisabled
-      ? `http://127.0.0.1:${CLIENT_PORT}`
-      : `http://127.0.0.1:${CLIENT_PORT}/?MCP_PROXY_AUTH_TOKEN=${sessionToken}`;
-    open(url);
-  }
+  const url = getClientUrl(
+    CLIENT_PORT,
+    authDisabled,
+    sessionToken,
+    SERVER_PORT,
+  );

  await spawnPromise("node", [inspectorClientPath], {
-    env: { ...process.env, PORT: CLIENT_PORT },
+    env: {
+      ...process.env,
+      CLIENT_PORT,
+      INSPECTOR_URL: url,
+    },
    signal: abort.signal,
    echoOutput: true,
  });
@ -204,7 +239,7 @@ async function main() {
  }

  const CLIENT_PORT = process.env.CLIENT_PORT ?? "6274";
-  const SERVER_PORT = process.env.SERVER_PORT ?? "6277";
+  const SERVER_PORT = process.env.SERVER_PORT ?? DEFAULT_MCP_PROXY_LISTEN_PORT;

  console.log(
    isDev
@ -249,6 +284,7 @@ async function main() {
    try {
      const clientOptions = {
        CLIENT_PORT,
+        SERVER_PORT,
        authDisabled,
        sessionToken,
        abort,
--- a/client/e2e/global-teardown.js
+++ b/client/e2e/global-teardown.js
@ -0,0 +1,18 @@
+import { rimraf } from "rimraf";
+
+async function globalTeardown() {
+  if (!process.env.CI) {
+    console.log("Cleaning up test-results directory...");
+    // Add a small delay to ensure all Playwright files are written
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    await rimraf("./e2e/test-results");
+    console.log("Test-results directory cleaned up.");
+  }
+}
+
+export default globalTeardown;
+
+// Call the function when this script is run directly
+if (import.meta.url === `file://${process.argv[1]}`) {
+  globalTeardown().catch(console.error);
+}
--- a/client/e2e/transport-type-dropdown.spec.ts
+++ b/client/e2e/transport-type-dropdown.spec.ts
@ -0,0 +1,113 @@
+import { test, expect } from "@playwright/test";
+
+// Adjust the URL if your dev server runs on a different port
+const APP_URL = "http://localhost:6274/";
+
+test.describe("Transport Type Dropdown", () => {
+  test("should have options for STDIO, SSE, and Streamable HTTP", async ({
+    page,
+  }) => {
+    await page.goto(APP_URL);
+
+    // Wait for the Transport Type dropdown to be visible
+    const selectTrigger = page.getByLabel("Transport Type");
+    await expect(selectTrigger).toBeVisible();
+
+    // Open the dropdown
+    await selectTrigger.click();
+
+    // Check for the three options
+    await expect(page.getByRole("option", { name: "STDIO" })).toBeVisible();
+    await expect(page.getByRole("option", { name: "SSE" })).toBeVisible();
+    await expect(
+      page.getByRole("option", { name: "Streamable HTTP" }),
+    ).toBeVisible();
+  });
+
+  test("should show Command and Arguments fields and hide URL field when Transport Type is STDIO", async ({
+    page,
+  }) => {
+    await page.goto(APP_URL);
+
+    // Wait for the Transport Type dropdown to be visible
+    const selectTrigger = page.getByLabel("Transport Type");
+    await expect(selectTrigger).toBeVisible();
+
+    // Open the dropdown and select STDIO
+    await selectTrigger.click();
+    await page.getByRole("option", { name: "STDIO" }).click();
+
+    // Wait for the form to update
+    await page.waitForTimeout(100);
+
+    // Check that Command and Arguments fields are visible
+    await expect(page.locator("#command-input")).toBeVisible();
+    await expect(page.locator("#arguments-input")).toBeVisible();
+
+    // Check that URL field is not visible
+    await expect(page.locator("#sse-url-input")).not.toBeVisible();
+
+    // Also verify the labels are present
+    await expect(page.getByText("Command")).toBeVisible();
+    await expect(page.getByText("Arguments")).toBeVisible();
+    await expect(page.getByText("URL")).not.toBeVisible();
+  });
+
+  test("should show URL field and hide Command and Arguments fields when Transport Type is SSE", async ({
+    page,
+  }) => {
+    await page.goto(APP_URL);
+
+    // Wait for the Transport Type dropdown to be visible
+    const selectTrigger = page.getByLabel("Transport Type");
+    await expect(selectTrigger).toBeVisible();
+
+    // Open the dropdown and select SSE
+    await selectTrigger.click();
+    await page.getByRole("option", { name: "SSE" }).click();
+
+    // Wait for the form to update
+    await page.waitForTimeout(100);
+
+    // Check that URL field is visible
+    await expect(page.locator("#sse-url-input")).toBeVisible();
+
+    // Check that Command and Arguments fields are not visible
+    await expect(page.locator("#command-input")).not.toBeVisible();
+    await expect(page.locator("#arguments-input")).not.toBeVisible();
+
+    // Also verify the labels are present/absent
+    await expect(page.getByText("URL")).toBeVisible();
+    await expect(page.getByText("Command")).not.toBeVisible();
+    await expect(page.getByText("Arguments")).not.toBeVisible();
+  });
+
+  test("should show URL field and hide Command and Arguments fields when Transport Type is Streamable HTTP", async ({
+    page,
+  }) => {
+    await page.goto(APP_URL);
+
+    // Wait for the Transport Type dropdown to be visible
+    const selectTrigger = page.getByLabel("Transport Type");
+    await expect(selectTrigger).toBeVisible();
+
+    // Open the dropdown and select Streamable HTTP
+    await selectTrigger.click();
+    await page.getByRole("option", { name: "Streamable HTTP" }).click();
+
+    // Wait for the form to update
+    await page.waitForTimeout(100);
+
+    // Check that URL field is visible
+    await expect(page.locator("#sse-url-input")).toBeVisible();
+
+    // Check that Command and Arguments fields are not visible
+    await expect(page.locator("#command-input")).not.toBeVisible();
+    await expect(page.locator("#arguments-input")).not.toBeVisible();
+
+    // Also verify the labels are present/absent
+    await expect(page.getByText("URL")).toBeVisible();
+    await expect(page.getByText("Command")).not.toBeVisible();
+    await expect(page.getByText("Arguments")).not.toBeVisible();
+  });
+});
--- a/client/index.html
+++ b/client/index.html
@ -7,7 +7,7 @@
    <title>MCP Inspector</title>
  </head>
  <body>
-    <div id="root"></div>
+    <div id="root" class="w-full"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/client/jest.config.cjs
+++ b/client/jest.config.cjs
@ -21,6 +21,7 @@ module.exports = {
    "/node_modules/",
    "/dist/",
    "/bin/",
+    "/e2e/",
    "\\.config\\.(js|ts|cjs|mjs)$",
  ],
  // Exclude the same patterns from coverage reports
@ -28,6 +29,7 @@ module.exports = {
    "/node_modules/",
    "/dist/",
    "/bin/",
+    "/e2e/",
    "\\.config\\.(js|ts|cjs|mjs)$",
  ],
 };
--- a/client/package.json
+++ b/client/package.json
@ -1,6 +1,6 @@
 {
  "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.14.3",
+  "version": "0.15.0",
  "description": "Client-side application for the Model Context Protocol inspector",
  "license": "MIT",
  "author": "Anthropic, PBC (https://anthropic.com)",
@ -20,10 +20,12 @@
    "lint": "eslint .",
    "preview": "vite preview --port 6274",
    "test": "jest --config jest.config.cjs",
-    "test:watch": "jest --config jest.config.cjs --watch"
+    "test:watch": "jest --config jest.config.cjs --watch",
+    "test:e2e": "playwright test e2e && npm run cleanup:e2e",
+    "cleanup:e2e": "node e2e/global-teardown.js"
  },
  "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.12.1",
+    "@modelcontextprotocol/sdk": "^1.13.1",
    "@radix-ui/react-checkbox": "^1.1.4",
    "@radix-ui/react-dialog": "^1.1.3",
    "@radix-ui/react-icons": "^1.3.0",
@ -38,7 +40,7 @@
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "cmdk": "^1.0.4",
-    "lucide-react": "^0.447.0",
+    "lucide-react": "^0.523.0",
    "pkce-challenge": "^4.1.0",
    "prismjs": "^1.30.0",
    "react": "^18.3.1",
--- a/client/playwright.config.ts
+++ b/client/playwright.config.ts
@ -0,0 +1,70 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    cwd: "..",
+    command: "npm run dev",
+    url: "http://localhost:6274",
+    reuseExistingServer: !process.env.CI,
+  },
+
+  testDir: "./e2e",
+  outputDir: "./e2e/test-results",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: process.env.CI
+    ? [
+        ["html", { outputFolder: "playwright-report" }],
+        ["json", { outputFile: "results.json" }],
+        ["line"],
+      ]
+    : [["line"]],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://localhost:6274",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+
+    /* Take screenshots on failure */
+    screenshot: "only-on-failure",
+
+    /* Record video on failure */
+    video: "retain-on-failure",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    // Skip WebKit on macOS due to compatibility issues
+    ...(process.platform !== "darwin"
+      ? [
+          {
+            name: "webkit",
+            use: { ...devices["Desktop Safari"] },
+          },
+        ]
+      : []),
+  ],
+});
--- a/client/src/App.css
+++ b/client/src/App.css
@ -1,7 +1,3 @@
-#root {
-  margin: 0 auto;
-}
-
 .logo {
  height: 6em;
  padding: 1.5em;
--- a/Show more
+++ b/Show more