Add examples/run-all.ts script

examples/basic-host/serve.ts

@@ -18,6 +18,7 @@ const __dirname = dirname(__filename);
 const HOST_PORT = parseInt(process.env.HOST_PORT || "8080", 10);
 const SANDBOX_PORT = parseInt(process.env.SANDBOX_PORT || "8081", 10);
 const DIRECTORY = join(__dirname, "dist");
+const SERVERS: string[] = process.env.SERVERS ? JSON.parse(process.env.SERVERS) : [];
 
 // ============ Host Server (port 8080) ============
 const hostApp = express();
@@ -34,6 +35,11 @@ hostApp.use((req, res, next) => {
 
 hostApp.use(express.static(DIRECTORY));
 
+// API endpoint to get configured server URLs
+hostApp.get("/api/servers", (_req, res) => {
+  res.json(SERVERS);
+});
+
 hostApp.get("/", (_req, res) => {
   res.redirect("/index.html");
 });
@@ -70,15 +76,15 @@ sandboxApp.use((_req, res) => {
 });
 
 // ============ Start both servers ============
-hostApp.listen(HOST_PORT, err => {
+hostApp.listen(HOST_PORT, (err) => {
   if (err) {
     console.error("Error starting server:", err);
     process.exit(1);
   }
   console.log(`Host server:    http://localhost:${HOST_PORT}`);
 });
 
-sandboxApp.listen(SANDBOX_PORT, err => {
+sandboxApp.listen(SANDBOX_PORT, (err) => {
   if (err) {
     console.error("Error starting server:", err);
     process.exit(1);

examples/basic-host/src/implementation.ts

@@ -17,6 +17,7 @@ export const log = {
 
 
 export interface ServerInfo {
+  name: string;
   client: Client;
   tools: Map<string, Tool>;
   appHtmlCache: Map<string, string>;
@@ -30,11 +31,13 @@ export async function connectToServer(serverUrl: URL): Promise<ServerInfo> {
   await client.connect(new StreamableHTTPClientTransport(serverUrl));
   log.info("Connection successful");
 
+  const name = client.getServerVersion()?.name ?? serverUrl.href;
+
   const toolsList = await client.listTools();
   const tools = new Map(toolsList.tools.map((tool) => [tool.name, tool]));
   log.info("Server tools:", Array.from(tools.keys()));
 
-  return { client, tools, appHtmlCache: new Map() };
+  return { name, client, tools, appHtmlCache: new Map() };
 }
 
 

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

@@ -1,9 +1,3 @@
-.connecting {
-  padding: 1rem 0;
-  text-align: center;
-  color: #666;
-}
-
 .callToolPanel, .toolCallInfoPanel {
   margin: 0 auto;
   padding: 1rem;
@@ -16,9 +10,6 @@
 }
 
 .callToolPanel {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
   max-width: 480px;
 
   form {
@@ -39,12 +30,16 @@
     padding: 0.5rem;
     border: 1px solid #ccc;
     border-radius: 4px;
-    font-family: monospace;
     font-size: inherit;
   }
 
-  textarea {
+  .toolSelect {
+    font-family: monospace;
+  }
+
+  .toolInput {
     min-height: 6rem;
+    font-family: monospace;
     resize: vertical;
 
     &[aria-invalid="true"] {
@@ -92,10 +87,15 @@
   gap: 0.5rem;
   min-width: 0;
 
-  .toolName {
+  h2 {
+    display: flex;
+    flex-direction: column;
     margin: 0;
-    font-family: monospace;
     font-size: 1.5rem;
+
+    .toolName {
+      font-family: monospace;
+    }
   }
 }