Merge branch 'main' into notification-expansion-state

2025-06-25 05:05:29 -07:00 · 2025-06-25 05:05:29 -07:00 · 4e68b93ca9
commit 4e68b93ca9
parent a715d184ff f2aaa8d668
21 changed files with 574 additions and 40 deletions
--- a/.github/workflows/e2e_tests.yml
+++ b/.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"
--- 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/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
@ -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
--- a/README.md
+++ b/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

--- a/cli/package.json
+++ b/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"
  }
--- 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/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/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
@ -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.0",
    "@radix-ui/react-checkbox": "^1.1.4",
    "ajv": "^6.12.6",
    "@radix-ui/react-dialog": "^1.1.3",
--- 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/components/OAuthFlowProgress.tsx
+++ b/client/src/components/OAuthFlowProgress.tsx
@ -156,7 +156,7 @@ export const OAuthFlowProgress = ({
              {authState.resourceMetadataError && (
                <div className="mt-2 p-3 border border-blue-300 bg-blue-50 rounded-md">
                  <p className="text-sm font-medium text-blue-700">
-                    ℹ️ No resource metadata available from{" "}
+                    ℹ️ Problem with resource metadata from{" "}
                    <a
                      href={
                        new URL(
--- a/client/src/components/tests/AuthDebugger.test.tsx
+++ b/client/src/components/tests/AuthDebugger.test.tsx
@ -41,6 +41,7 @@ jest.mock("@modelcontextprotocol/sdk/client/auth.js", () => ({
  startAuthorization: jest.fn(),
  exchangeAuthorization: jest.fn(),
  discoverOAuthProtectedResourceMetadata: jest.fn(),
+  selectResourceURL: jest.fn(),
 }));

 // Import the functions to get their types
@ -88,7 +89,7 @@ describe("AuthDebugger", () => {
  const defaultAuthState = EMPTY_DEBUGGER_STATE;

  const defaultProps = {
-    serverUrl: "https://example.com",
+    serverUrl: "https://example.com/mcp",
    onBack: jest.fn(),
    authState: defaultAuthState,
    updateAuthState: jest.fn(),
@ -203,7 +204,7 @@ describe("AuthDebugger", () => {

      // Should first discover and save OAuth metadata
      expect(mockDiscoverOAuthMetadata).toHaveBeenCalledWith(
-        new URL("https://example.com"),
+        new URL("https://example.com/"),
      );

      // Check that updateAuthState was called with the right info message
@ -320,6 +321,7 @@ describe("AuthDebugger", () => {
        isInitiatingAuth: false,
        resourceMetadata: null,
        resourceMetadataError: null,
+        resource: null,
        oauthTokens: null,
        oauthStep: "metadata_discovery",
        latestError: null,
@ -361,7 +363,7 @@ describe("AuthDebugger", () => {
      });

      expect(mockDiscoverOAuthMetadata).toHaveBeenCalledWith(
-        new URL("https://example.com"),
+        new URL("https://example.com/"),
      );
    });

@ -496,11 +498,11 @@ describe("AuthDebugger", () => {
    it("should successfully fetch and display protected resource metadata", async () => {
      const updateAuthState = jest.fn();
      const mockResourceMetadata = {
-        resource: "https://example.com/api",
+        resource: "https://example.com/mcp",
        authorization_servers: ["https://custom-auth.example.com"],
        bearer_methods_supported: ["header", "body"],
-        resource_documentation: "https://example.com/api/docs",
-        resource_policy_uri: "https://example.com/api/policy",
+        resource_documentation: "https://example.com/mcp/docs",
+        resource_policy_uri: "https://example.com/mcp/policy",
      };

      // Mock successful metadata discovery
@ -538,7 +540,7 @@ describe("AuthDebugger", () => {
      // Wait for the metadata to be fetched
      await waitFor(() => {
        expect(mockDiscoverOAuthProtectedResourceMetadata).toHaveBeenCalledWith(
-          "https://example.com",
+          "https://example.com/mcp",
        );
      });

@ -584,7 +586,7 @@ describe("AuthDebugger", () => {
      // Wait for the metadata fetch to fail
      await waitFor(() => {
        expect(mockDiscoverOAuthProtectedResourceMetadata).toHaveBeenCalledWith(
-          "https://example.com",
+          "https://example.com/mcp",
        );
      });

@ -594,7 +596,7 @@ describe("AuthDebugger", () => {
          expect.objectContaining({
            resourceMetadataError: mockError,
            // Should use the original server URL as fallback
-            authServerUrl: new URL("https://example.com"),
+            authServerUrl: new URL("https://example.com/"),
            oauthStep: "client_registration",
          }),
        );
@ -602,7 +604,7 @@ describe("AuthDebugger", () => {

      // Verify that regular OAuth metadata discovery was still called
      expect(mockDiscoverOAuthMetadata).toHaveBeenCalledWith(
-        new URL("https://example.com"),
+        new URL("https://example.com/"),
      );
    });
  });
--- a/client/src/lib/auth-types.ts
+++ b/client/src/lib/auth-types.ts
@ -30,6 +30,7 @@ export interface AuthDebuggerState {
  oauthStep: OAuthStep;
  resourceMetadata: OAuthProtectedResourceMetadata | null;
  resourceMetadataError: Error | null;
+  resource: URL | null;
  authServerUrl: URL | null;
  oauthMetadata: OAuthMetadata | null;
  oauthClientInfo: OAuthClientInformationFull | OAuthClientInformation | null;
@ -47,6 +48,7 @@ export const EMPTY_DEBUGGER_STATE: AuthDebuggerState = {
  oauthMetadata: null,
  resourceMetadata: null,
  resourceMetadataError: null,
+  resource: null,
  authServerUrl: null,
  oauthClientInfo: null,
  authorizationUrl: null,
--- a/client/src/lib/oauth-state-machine.ts
+++ b/client/src/lib/oauth-state-machine.ts
@ -6,6 +6,7 @@ import {
  startAuthorization,
  exchangeAuthorization,
  discoverOAuthProtectedResourceMetadata,
+  selectResourceURL,
 } from "@modelcontextprotocol/sdk/client/auth.js";
 import {
  OAuthMetadataSchema,
@ -29,17 +30,15 @@ export const oauthTransitions: Record<OAuthStep, StateTransition> = {
  metadata_discovery: {
    canTransition: async () => true,
    execute: async (context) => {
-      let authServerUrl = new URL(context.serverUrl);
+      // Default to discovering from the server's URL
+      let authServerUrl = new URL("/", context.serverUrl);
      let resourceMetadata: OAuthProtectedResourceMetadata | null = null;
      let resourceMetadataError: Error | null = null;
      try {
        resourceMetadata = await discoverOAuthProtectedResourceMetadata(
          context.serverUrl,
        );
-        if (
-          resourceMetadata &&
-          resourceMetadata.authorization_servers?.length
-        ) {
+        if (resourceMetadata?.authorization_servers?.length) {
          authServerUrl = new URL(resourceMetadata.authorization_servers[0]);
        }
      } catch (e) {
@ -50,6 +49,13 @@ export const oauthTransitions: Record<OAuthStep, StateTransition> = {
        }
      }

+      const resource: URL | undefined = await selectResourceURL(
+        context.serverUrl,
+        context.provider,
+        // we default to null, so swap it for undefined if not set
+        resourceMetadata ?? undefined,
+      );
+
      const metadata = await discoverOAuthMetadata(authServerUrl);
      if (!metadata) {
        throw new Error("Failed to discover OAuth metadata");
@ -58,6 +64,7 @@ export const oauthTransitions: Record<OAuthStep, StateTransition> = {
      context.provider.saveServerMetadata(parsedMetadata);
      context.updateState({
        resourceMetadata,
+        resource,
        resourceMetadataError,
        authServerUrl,
        oauthMetadata: parsedMetadata,
@ -113,6 +120,7 @@ export const oauthTransitions: Record<OAuthStep, StateTransition> = {
          clientInformation,
          redirectUrl: context.provider.redirectUrl,
          scope,
+          resource: context.state.resource ?? undefined,
        },
      );

@ -163,6 +171,7 @@ export const oauthTransitions: Record<OAuthStep, StateTransition> = {
        authorizationCode: context.state.authorizationCode,
        codeVerifier,
        redirectUri: context.provider.redirectUrl,
+        resource: context.state.resource ?? undefined,
      });

      context.provider.saveTokens(tokens);
--- a/package-lock.json
+++ b/package-lock.json
@ -17,7 +17,7 @@
        "@modelcontextprotocol/inspector-cli": "^0.14.3",
        "@modelcontextprotocol/inspector-client": "^0.14.3",
        "@modelcontextprotocol/inspector-server": "^0.14.3",
-        "@modelcontextprotocol/sdk": "^1.12.1",
+        "@modelcontextprotocol/sdk": "^1.13.1",
        "concurrently": "^9.0.1",
        "open": "^10.1.0",
        "shell-quote": "^1.8.2",
@ -29,6 +29,7 @@
        "mcp-inspector": "cli/build/cli.js"
      },
      "devDependencies": {
+        "@playwright/test": "^1.52.0",
        "@types/jest": "^29.5.14",
        "@types/node": "^22.7.5",
        "@types/shell-quote": "^1.7.5",
@ -43,7 +44,7 @@
      "version": "0.14.3",
      "license": "MIT",
      "dependencies": {
-        "@modelcontextprotocol/sdk": "^1.12.1",
+        "@modelcontextprotocol/sdk": "^1.13.0",
        "commander": "^13.1.0",
        "spawn-rx": "^5.1.2"
      },
@ -66,7 +67,7 @@
      "version": "0.14.3",
      "license": "MIT",
      "dependencies": {
-        "@modelcontextprotocol/sdk": "^1.12.1",
+        "@modelcontextprotocol/sdk": "^1.13.0",
        "@radix-ui/react-checkbox": "^1.1.4",
        "@radix-ui/react-dialog": "^1.1.3",
        "@radix-ui/react-icons": "^1.3.0",
@ -2005,9 +2006,9 @@
      "link": true
    },
    "node_modules/@modelcontextprotocol/sdk": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.12.1.tgz",
-      "integrity": "sha512-KG1CZhZfWg+u8pxeM/mByJDScJSrjjxLc8fwQqbsS8xCjBmQfMNEBTotYdNanKekepnfRI85GtgQlctLFpcYPw==",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.13.1.tgz",
+      "integrity": "sha512-8q6+9aF0yA39/qWT/uaIj6zTpC+Qu07DnN/lb9mjoquCJsAh6l3HyYqc9O3t2j7GilseOQOQimLg7W3By6jqvg==",
      "dependencies": {
        "ajv": "^6.12.6",
        "content-type": "^1.0.5",
@ -2070,6 +2071,22 @@
        "node": ">=14"
      }
    },
+    "node_modules/@playwright/test": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.52.0.tgz",
+      "integrity": "sha512-uh6W7sb55hl7D6vsAeA+V2p5JnlAqzhqFyF0VcJkKZXkgnFcVG9PziERRHQfPLfNGx1C292a4JqbWzhR8L4R1g==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.52.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/@radix-ui/number": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
@ -8519,6 +8536,53 @@
        "node": ">=8"
      }
    },
+    "node_modules/playwright": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.52.0.tgz",
+      "integrity": "sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.52.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.52.0.tgz",
+      "integrity": "sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
    "node_modules/postcss": {
      "version": "8.5.3",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
@ -10923,7 +10987,7 @@
      "version": "0.14.3",
      "license": "MIT",
      "dependencies": {
-        "@modelcontextprotocol/sdk": "^1.12.1",
+        "@modelcontextprotocol/sdk": "^1.13.0",
        "cors": "^2.8.5",
        "express": "^5.1.0",
        "ws": "^8.18.0",
--- a/package.json
+++ b/package.json
@ -34,6 +34,7 @@
    "start-client": "cd client && npm run preview",
    "test": "npm run prettier-check && cd client && npm test",
    "test-cli": "cd cli && npm run test",
+    "test:e2e": "MCP_AUTO_OPEN_ENABLED=false npm run test:e2e --workspace=client",
    "prettier-fix": "prettier --write .",
    "prettier-check": "prettier --check .",
    "lint": "prettier --check . && cd client && npm run lint",
@ -46,7 +47,7 @@
    "@modelcontextprotocol/inspector-cli": "^0.14.3",
    "@modelcontextprotocol/inspector-client": "^0.14.3",
    "@modelcontextprotocol/inspector-server": "^0.14.3",
-    "@modelcontextprotocol/sdk": "^1.12.1",
+    "@modelcontextprotocol/sdk": "^1.13.1",
    "concurrently": "^9.0.1",
    "open": "^10.1.0",
    "shell-quote": "^1.8.2",
@ -55,6 +56,7 @@
    "zod": "^3.23.8"
  },
  "devDependencies": {
+    "@playwright/test": "^1.52.0",
    "@types/jest": "^29.5.14",
    "@types/node": "^22.7.5",
    "@types/shell-quote": "^1.7.5",
--- a/Show more
+++ b/Show more