Add server selector to basic-host example

- Add ServerSelector component to switch between MCP servers
- Run all example servers concurrently on ports 3101-3107
- Update examples:start to launch all servers with assigned ports

🤖 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,3 +1,35 @@
+.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;
+  text-align: center;
+  color: #666;
+}
+
 .callToolPanel, .toolCallInfoPanel {
   margin: 0 auto;
   padding: 1rem;

examples/basic-host/src/index.tsx

@@ -4,7 +4,20 @@ import { callTool, connectToServer, hasAppHtml, initializeApp, loadSandboxProxy,
 import styles from "./index.module.css";
 
 
-const MCP_SERVER_URL = new URL("http://localhost:3001/mcp");
+// Available MCP servers - using ports 3101+ to avoid conflicts with common dev ports
+const SERVERS = [
+  { name: "Basic React", port: 3101 },
+  { name: "Vanilla JS", port: 3102 },
+  { name: "Budget Allocator", port: 3103 },
+  { name: "Cohort Heatmap", port: 3104 },
+  { name: "Customer Segmentation", port: 3105 },
+  { name: "Scenario Modeler", port: 3106 },
+  { name: "System Monitor", port: 3107 },
+] as const;
+
+function serverUrl(port: number): string {
+  return `http://localhost:${port}/mcp`;
+}
 
 
 interface HostProps {
@@ -186,10 +199,55 @@ 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>
-    <Suspense fallback={<p>Connecting to server ({MCP_SERVER_URL.href})...</p>}>
-      <Host serverInfoPromise={connectToServer(MCP_SERVER_URL)} />
-    </Suspense>
+    <App />
   </StrictMode>,
 );

package.json

@@ -30,10 +30,15 @@
     "build:all": "npm run build && npm run examples:build",
     "test": "bun test",
     "examples:build": "find examples -maxdepth 1 -mindepth 1 -type d -exec printf '%s\\0' 'npm run --workspace={} build' ';' | xargs -0 concurrently --kill-others-on-fail",
-    "examples:start": "NODE_ENV=development npm run build && concurrently 'npm run examples:start:basic-host' 'npm run examples:start:basic-server-react'",
+    "examples:start": "NODE_ENV=development npm run build && concurrently 'npm run examples:start:basic-host' 'npm run examples:start:basic-server-react' 'npm run examples:start:basic-server-vanillajs' 'npm run examples:start:budget-allocator-server' 'npm run examples:start:cohort-heatmap-server' 'npm run examples:start:customer-segmentation-server' 'npm run examples:start:scenario-modeler-server' 'npm run examples:start:system-monitor-server'",
     "examples:start:basic-host": "npm run --workspace=examples/basic-host start",
-    "examples:start:basic-server-react": "npm run --workspace=examples/basic-server-react start",
-    "examples:start:basic-server-vanillajs": "npm run --workspace=examples/basic-server-vanillajs start",
+    "examples:start:basic-server-react": "PORT=3101 npm run --workspace=examples/basic-server-react start",
+    "examples:start:basic-server-vanillajs": "PORT=3102 npm run --workspace=examples/basic-server-vanillajs start",
+    "examples:start:budget-allocator-server": "PORT=3103 npm run --workspace=examples/budget-allocator-server start",
+    "examples:start:cohort-heatmap-server": "PORT=3104 npm run --workspace=examples/cohort-heatmap-server start",
+    "examples:start:customer-segmentation-server": "PORT=3105 npm run --workspace=examples/customer-segmentation-server start",
+    "examples:start:scenario-modeler-server": "PORT=3106 npm run --workspace=examples/scenario-modeler-server start",
+    "examples:start:system-monitor-server": "PORT=3107 npm run --workspace=examples/system-monitor-server start",
     "watch": "nodemon --watch src --ext ts,tsx --exec 'bun build.bun.ts'",
     "examples:dev": "NODE_ENV=development concurrently 'npm run watch' 'npm run examples:dev:basic-host' 'npm run examples:dev:basic-server-react'",
     "examples:dev:basic-host": "npm run --workspace=examples/basic-host dev",