Move server selector into tool call panel

- Server selector now in same component as tool selector
- Tool call results persist across server switches
- Connection caching avoids reconnects when switching servers
- Display server name with tool name in results (ServerName:ToolName)

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

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

Author: ochafik

examples/basic-host/src/index.module.css

@@ -1,31 +1,5 @@
-.serverSelector {
-  max-width: 480px;
-  margin: 0 auto 1rem;
-  padding: 1rem;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  background-color: #f9f9f9;
-
-  label {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-    font-weight: 600;
-  }
-
-  select {
-    padding: 0.5rem;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-family: monospace;
-    font-size: inherit;
-  }
-}
-
 .connecting {
-  max-width: 480px;
-  margin: 0 auto;
-  padding: 1rem;
+  padding: 1rem 0;
   text-align: center;
   color: #666;
 }
@@ -42,6 +16,9 @@
 }
 
 .callToolPanel {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   max-width: 480px;
 
   form {

examples/basic-host/src/index.tsx

@@ -19,33 +19,98 @@ function serverUrl(port: number): string {
   return `http://localhost:${port}/mcp`;
 }
 
+// Cache server connections to avoid reconnecting when switching between servers
+const serverInfoCache = new Map<number, Promise<ServerInfo>>();
+
+function getServerInfo(port: number): Promise<ServerInfo> {
+  let promise = serverInfoCache.get(port);
+  if (!promise) {
+    promise = connectToServer(new URL(serverUrl(port)));
+    // Remove from cache on failure so retry is possible
+    promise.catch(() => serverInfoCache.delete(port));
+    serverInfoCache.set(port, promise);
+  }
+  return promise;
+}
 
-interface HostProps {
-  serverInfoPromise: Promise<ServerInfo>;
+
+// Wrapper to track server name with each tool call
+interface ToolCallEntry {
+  serverName: string;
+  info: ToolCallInfo;
 }
-function Host({ serverInfoPromise }: HostProps) {
-  const serverInfo = use(serverInfoPromise);
-  const [toolCallInfos, setToolCallInfos] = useState<ToolCallInfo[]>([]);
+
+// Host just manages tool call results - no server dependency
+function Host() {
+  const [toolCalls, setToolCalls] = useState<ToolCallEntry[]>([]);
 
   return (
     <>
-      {toolCallInfos.map((info, i) => (
-        <ToolCallInfoPanel key={i} toolCallInfo={info} />
+      {toolCalls.map((entry, i) => (
+        <ToolCallInfoPanel key={i} serverName={entry.serverName} toolCallInfo={entry.info} />
       ))}
       <CallToolPanel
-        serverInfo={serverInfo}
-        addToolCallInfo={(info) => setToolCallInfos([...toolCallInfos, info])}
+        addToolCall={(serverName, info) => setToolCalls([...toolCalls, { serverName, info }])}
       />
     </>
   );
 }
 
 
+// CallToolPanel includes server selection with its own Suspense boundary
 interface CallToolPanelProps {
-  serverInfo: ServerInfo;
-  addToolCallInfo: (toolCallInfo: ToolCallInfo) => void;
+  addToolCall: (serverName: string, info: ToolCallInfo) => void;
+}
+function CallToolPanel({ addToolCall }: CallToolPanelProps) {
+  const [selectedServer, setSelectedServer] = useState(SERVERS[0]);
+  const [serverInfoPromise, setServerInfoPromise] = useState(
+    () => getServerInfo(selectedServer.port)
+  );
+
+  const handleServerChange = (port: number) => {
+    const server = SERVERS.find(s => s.port === port) ?? SERVERS[0];
+    setSelectedServer(server);
+    setServerInfoPromise(getServerInfo(port));
+  };
+
+  return (
+    <div className={styles.callToolPanel}>
+      <label>
+        Server
+        <select
+          value={selectedServer.port}
+          onChange={(e) => handleServerChange(Number(e.target.value))}
+        >
+          {SERVERS.map(({ name, port }) => (
+            <option key={port} value={port}>
+              {name} (:{port})
+            </option>
+          ))}
+        </select>
+      </label>
+      <ErrorBoundary>
+        <Suspense fallback={<p className={styles.connecting}>Connecting to {serverUrl(selectedServer.port)}...</p>}>
+          <ToolCallForm
+            key={selectedServer.port}
+            serverName={selectedServer.name}
+            serverInfoPromise={serverInfoPromise}
+            addToolCall={addToolCall}
+          />
+        </Suspense>
+      </ErrorBoundary>
+    </div>
+  );
 }
-function CallToolPanel({ serverInfo, addToolCallInfo }: CallToolPanelProps) {
+
+
+// ToolCallForm renders inside Suspense - needs serverInfo for tool list
+interface ToolCallFormProps {
+  serverName: string;
+  serverInfoPromise: Promise<ServerInfo>;
+  addToolCall: (serverName: string, info: ToolCallInfo) => void;
+}
+function ToolCallForm({ serverName, serverInfoPromise, addToolCall }: ToolCallFormProps) {
+  const serverInfo = use(serverInfoPromise);
   const toolNames = Array.from(serverInfo.tools.keys());
   const [selectedTool, setSelectedTool] = useState(toolNames[0] ?? "");
   const [inputJson, setInputJson] = useState("{}");
@@ -61,48 +126,47 @@ function CallToolPanel({ serverInfo, addToolCallInfo }: CallToolPanelProps) {
 
   const handleSubmit = () => {
     const toolCallInfo = callTool(serverInfo, selectedTool, JSON.parse(inputJson));
-    addToolCallInfo(toolCallInfo);
+    addToolCall(serverName, toolCallInfo);
   };
 
   return (
-    <div className={styles.callToolPanel}>
-      <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
-        <label>
-          Tool Name
-          <select
-            value={selectedTool}
-            onChange={(e) => setSelectedTool(e.target.value)}
-          >
-            {toolNames.map((name) => (
-              <option key={name} value={name}>{name}</option>
-            ))}
-          </select>
-        </label>
-        <label>
-          Tool Input
-          <textarea
-            aria-invalid={!isValidJson}
-            value={inputJson}
-            onChange={(e) => setInputJson(e.target.value)}
-          />
-        </label>
-        <button type="submit" disabled={!selectedTool || !isValidJson}>
-          Call Tool
-        </button>
-      </form>
-    </div>
+    <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
+      <label>
+        Tool
+        <select
+          value={selectedTool}
+          onChange={(e) => setSelectedTool(e.target.value)}
+        >
+          {toolNames.map((name) => (
+            <option key={name} value={name}>{name}</option>
+          ))}
+        </select>
+      </label>
+      <label>
+        Input
+        <textarea
+          aria-invalid={!isValidJson}
+          value={inputJson}
+          onChange={(e) => setInputJson(e.target.value)}
+        />
+      </label>
+      <button type="submit" disabled={!selectedTool || !isValidJson}>
+        Call Tool
+      </button>
+    </form>
   );
 }
 
 
 interface ToolCallInfoPanelProps {
+  serverName: string;
   toolCallInfo: ToolCallInfo;
 }
-function ToolCallInfoPanel({ toolCallInfo }: ToolCallInfoPanelProps) {
+function ToolCallInfoPanel({ serverName, toolCallInfo }: ToolCallInfoPanelProps) {
   return (
     <div className={styles.toolCallInfoPanel}>
       <div className={styles.inputInfoPanel}>
-        <h2 className={styles.toolName}>{toolCallInfo.tool.name}</h2>
+        <h2 className={styles.toolName}>{serverName}:{toolCallInfo.tool.name}</h2>
         <JsonBlock value={toolCallInfo.input} />
       </div>
       <div className={styles.outputInfoPanel}>
@@ -199,55 +263,8 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
 }
 
 
-interface ServerSelectorProps {
-  selectedPort: number;
-  onSelect: (port: number) => void;
-}
-function ServerSelector({ selectedPort, onSelect }: ServerSelectorProps) {
-  return (
-    <div className={styles.serverSelector}>
-      <label>
-        Server
-        <select
-          value={selectedPort}
-          onChange={(e) => onSelect(Number(e.target.value))}
-        >
-          {SERVERS.map(({ name, port }) => (
-            <option key={port} value={port}>
-              {name} (:{port})
-            </option>
-          ))}
-        </select>
-      </label>
-    </div>
-  );
-}
-
-
-function App() {
-  const [selectedPort, setSelectedPort] = useState(SERVERS[0].port);
-  const [serverInfoPromise, setServerInfoPromise] = useState(
-    () => connectToServer(new URL(serverUrl(selectedPort)))
-  );
-
-  const handleServerChange = (port: number) => {
-    setSelectedPort(port);
-    setServerInfoPromise(connectToServer(new URL(serverUrl(port))));
-  };
-
-  return (
-    <>
-      <ServerSelector selectedPort={selectedPort} onSelect={handleServerChange} />
-      <Suspense fallback={<p className={styles.connecting}>Connecting to {serverUrl(selectedPort)}...</p>}>
-        <Host key={selectedPort} serverInfoPromise={serverInfoPromise} />
-      </Suspense>
-    </>
-  );
-}
-
-
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <Host />
   </StrictMode>,
 );