modelcontextprotocol · ochafik · Jan 12, 2026 · Jan 12, 2026 · Jan 12, 2026 · Jan 12, 2026
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
@@ -115,6 +115,7 @@ jobs:
           - threejs-server
           - transcript-server
           - video-resource-server
+          - virtual-desktop-server
           - wiki-explorer-server
 
     steps:

diff --git a/examples/basic-host/src/index.module.css b/examples/basic-host/src/index.module.css
@@ -253,3 +253,29 @@
   background-color: #ddd;
   color: #d00;
 }
+
+.toolResultPanel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.textBlock {
+  margin: 0;
+  padding: 1rem;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: monospace;
+  font-size: 0.9rem;
+  overflow: auto;
+  max-height: 400px;
+}
+
+.imageBlock {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+}
diff --git a/examples/basic-host/src/index.tsx b/examples/basic-host/src/index.tsx
@@ -428,6 +428,39 @@ interface ToolResultPanelProps {
 }
 function ToolResultPanel({ toolCallInfo }: ToolResultPanelProps) {
   const result = use(toolCallInfo.resultPromise);
+
+  // Render content blocks nicely instead of raw JSON
+  if (result.content && Array.isArray(result.content)) {
+    return (
+      <div className={styles.toolResultPanel}>
+        {result.isError && <div className={styles.error}><strong>Error</strong></div>}
+        {result.content.map((block, i) => {
+          if (block.type === "text") {
+            return (
+              <pre key={i} className={styles.textBlock}>
+                {block.text}
+              </pre>
+            );
+          }
+          if (block.type === "image") {
+            const src = `data:${block.mimeType};base64,${block.data}`;
+            return (
+              <img
+                key={i}
+                src={src}
+                alt="Tool result"
+                className={styles.imageBlock}
+              />
+            );
+          }
+          // Fallback for unknown content types
+          return <JsonBlock key={i} value={block} />;
+        })}
+      </div>
+    );
+  }
+
+  // Fallback for non-standard results
   return <JsonBlock value={result} />;
 }
 

diff --git a/examples/virtual-desktop-server/mcp-app.html b/examples/virtual-desktop-server/mcp-app.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="dark">
+  <title>Virtual Desktop Viewer</title>
+  <link rel="stylesheet" href="/src/global.css">
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/mcp-app.tsx"></script>
+</body>
+</html>
diff --git a/examples/virtual-desktop-server/package.json b/examples/virtual-desktop-server/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "@anthropic/mcp-server-virtual-desktop",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "MCP server for managing virtual desktops using LinuxServer webtop containers",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/modelcontextprotocol/ext-apps",
+    "directory": "examples/virtual-desktop-server"
+  },
+  "license": "MIT",
+  "main": "server.ts",
+  "files": [
+    "server.ts",
+    "src",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc --noEmit && cross-env INPUT=mcp-app.html vite build",
+    "watch": "cross-env INPUT=mcp-app.html vite build --watch",
+    "serve": "bun server.ts",
+    "start": "cross-env NODE_ENV=development npm run build && npm run serve",
+    "dev": "cross-env NODE_ENV=development concurrently 'npm run watch' 'npm run serve'",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/ext-apps": "^0.3.1",
+    "@modelcontextprotocol/sdk": "^1.24.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "zod": "^4.1.13"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "concurrently": "^9.2.1",
+    "cors": "^2.8.5",
+    "cross-env": "^10.1.0",
+    "express": "^5.1.0",
+    "typescript": "^5.9.3",
+    "vite": "^6.0.0",
+    "vite-plugin-singlefile": "^2.3.0"
+  }
+}
diff --git a/examples/virtual-desktop-server/server-utils.ts b/examples/virtual-desktop-server/server-utils.ts
@@ -0,0 +1,72 @@
+/**
+ * Shared utilities for running MCP servers with Streamable HTTP transport.
+ */
+
+import { createMcpExpressApp } from "@modelcontextprotocol/sdk/server/express.js";
+import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+import cors from "cors";
+import type { Request, Response } from "express";
+
+export interface ServerOptions {
+  port: number;
+  name?: string;
+}
+
+/**
+ * Starts an MCP server with Streamable HTTP transport in stateless mode.
+ *
+ * @param createServer - Factory function that creates a new McpServer instance per request.
+ * @param options - Server configuration options.
+ */
+export async function startServer(
+  createServer: () => McpServer,
+  options: ServerOptions,
+): Promise<void> {
+  const { port, name = "MCP Server" } = options;
+
+  const app = createMcpExpressApp({ host: "0.0.0.0" });
+  app.use(cors());
+
+  app.all("/mcp", async (req: Request, res: Response) => {
+    const server = createServer();
+    const transport = new StreamableHTTPServerTransport({
+      sessionIdGenerator: undefined,
+    });
+
+    res.on("close", () => {
+      transport.close().catch(() => {});
+      server.close().catch(() => {});
+    });
+
+    try {
+      await server.connect(transport);
+      await transport.handleRequest(req, res, req.body);
+    } catch (error) {
+      console.error("MCP error:", error);
+      if (!res.headersSent) {
+        res.status(500).json({
+          jsonrpc: "2.0",
+          error: { code: -32603, message: "Internal server error" },
+          id: null,
+        });
+      }
+    }
+  });
+
+  const httpServer = app.listen(port, (err) => {
+    if (err) {
+      console.error("Failed to start server:", err);
+      process.exit(1);
+    }
+    console.log(`${name} listening on http://localhost:${port}/mcp`);
+  });
+
+  const shutdown = () => {
+    console.log("\nShutting down...");
+    httpServer.close(() => process.exit(0));
+  };
+
+  process.on("SIGINT", shutdown);
+  process.on("SIGTERM", shutdown);
+}