Add wiki-explorer to E2E tests with default URL param

- Add default URL "https://en.wikipedia.org/wiki/Model_Context_Protocol" to
  wiki-explorer-server's get-first-degree-links tool inputSchema
- Update basic-host to automatically populate input field with tool defaults
  extracted from inputSchema.properties
- Add wiki-explorer-server to E2E test suite with dynamic masking for the
  force-directed graph

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: ochafik

examples/basic-host/src/index.tsx

@@ -1,9 +1,30 @@
+import type { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { Component, type ErrorInfo, type ReactNode, StrictMode, Suspense, use, useEffect, useMemo, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
 import { callTool, connectToServer, hasAppHtml, initializeApp, loadSandboxProxy, log, newAppBridge, type ServerInfo, type ToolCallInfo } from "./implementation";
 import styles from "./index.module.css";
 
 
+/**
+ * Extract default values from a tool's JSON Schema inputSchema.
+ * Returns a formatted JSON string with defaults, or "{}" if none found.
+ */
+function getToolDefaults(tool: Tool | undefined): string {
+  if (!tool?.inputSchema?.properties) return "{}";
+
+  const defaults: Record<string, unknown> = {};
+  for (const [key, prop] of Object.entries(tool.inputSchema.properties)) {
+    if (prop && typeof prop === "object" && "default" in prop) {
+      defaults[key] = prop.default;
+    }
+  }
+
+  return Object.keys(defaults).length > 0
+    ? JSON.stringify(defaults, null, 2)
+    : "{}";
+}
+
+
 // Host passes serversPromise to CallToolPanel
 interface HostProps {
   serversPromise: Promise<ServerInfo[]>;
@@ -50,6 +71,14 @@ function CallToolPanel({ serversPromise, addToolCall }: CallToolPanelProps) {
     setSelectedServer(server);
     const [firstTool] = server.tools.keys();
     setSelectedTool(firstTool ?? "");
+    // Set input JSON to tool defaults (if any)
+    setInputJson(getToolDefaults(server.tools.get(firstTool ?? "")));
+  };
+
+  const handleToolSelect = (toolName: string) => {
+    setSelectedTool(toolName);
+    // Set input JSON to tool defaults (if any)
+    setInputJson(getToolDefaults(selectedServer?.tools.get(toolName)));
   };
 
   const handleSubmit = () => {
@@ -72,7 +101,7 @@ function CallToolPanel({ serversPromise, addToolCall }: CallToolPanelProps) {
           <select
             className={styles.toolSelect}
             value={selectedTool}
-            onChange={(e) => setSelectedTool(e.target.value)}
+            onChange={(e) => handleToolSelect(e.target.value)}
           >
             {selectedServer && toolNames.map((name) => (
               <option key={name} value={name}>{name}</option>

examples/wiki-explorer-server/server.ts

@@ -86,7 +86,11 @@ const server = new McpServer({
       description:
         "Returns all Wikipedia pages that the given page links to directly.",
       inputSchema: z.object({
-        url: z.string().url().describe("Wikipedia page URL"),
+        url: z
+          .string()
+          .url()
+          .default("https://en.wikipedia.org/wiki/Model_Context_Protocol")
+          .describe("Wikipedia page URL"),
       }),
       _meta: { [RESOURCE_URI_META_KEY]: resourceUri },
     },

tests/e2e/servers.spec.ts

@@ -16,6 +16,7 @@ const DYNAMIC_MASKS: Record<string, string[]> = {
     "#memory-bar-fill", // Memory bar fill level
     "#info-uptime", // System uptime
   ],
+  "wiki-explorer": ["#graph"], // Force-directed graph (dynamic layout)
 };
 
 // Server configurations
@@ -36,6 +37,7 @@ const SERVERS = [
   { key: "scenario-modeler", index: 5, name: "SaaS Scenario Modeler" },
   { key: "system-monitor", index: 6, name: "System Monitor Server" },
   { key: "threejs", index: 7, name: "Three.js Server" },
+  { key: "wiki-explorer", index: 8, name: "Wiki Explorer" },
 ];
 
 /**