Merge remote-tracking branch 'origin/main' into ochafik/openai-compatibility

ochafik · ochafik · commit a93324932526 · 2026-01-15T13:43:54.000Z
diff --git a/examples/basic-server-preact/server.ts b/examples/basic-server-preact/server.ts
@@ -3,7 +3,10 @@ import type { CallToolResult, ReadResourceResult } from "@modelcontextprotocol/s
 import fs from "node:fs/promises";
 import path from "node:path";
 import { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps/server";
-const DIST_DIR = path.join(import.meta.dirname, "dist");
+// Works both from source (server.ts) and compiled (dist/server.js)
+const DIST_DIR = import.meta.filename.endsWith(".ts")
+  ? path.join(import.meta.dirname, "dist")
+  : import.meta.dirname;
 
 /**
  * Creates a new MCP server instance with tools and resources registered.
diff --git a/examples/basic-server-react/server.ts b/examples/basic-server-react/server.ts
@@ -4,7 +4,10 @@ import type { CallToolResult, ReadResourceResult } from "@modelcontextprotocol/s
 import fs from "node:fs/promises";
 import path from "node:path";
 
-const DIST_DIR = path.join(import.meta.dirname, "dist");
+// Works both from source (server.ts) and compiled (dist/server.js)
+const DIST_DIR = import.meta.filename.endsWith(".ts")
+  ? path.join(import.meta.dirname, "dist")
+  : import.meta.dirname;
 
 /**
  * Creates a new MCP server instance with tools and resources registered.
diff --git a/examples/basic-server-solid/server.ts b/examples/basic-server-solid/server.ts
@@ -3,7 +3,10 @@ import type { CallToolResult, ReadResourceResult } from "@modelcontextprotocol/s
 import fs from "node:fs/promises";
 import path from "node:path";
 import { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps/server";
-const DIST_DIR = path.join(import.meta.dirname, "dist");
+// Works both from source (server.ts) and compiled (dist/server.js)
+const DIST_DIR = import.meta.filename.endsWith(".ts")
+  ? path.join(import.meta.dirname, "dist")
+  : import.meta.dirname;
 
 /**
  * Creates a new MCP server instance with tools and resources registered.
diff --git a/examples/basic-server-svelte/server.ts b/examples/basic-server-svelte/server.ts
@@ -3,7 +3,10 @@ import type { CallToolResult, ReadResourceResult } from "@modelcontextprotocol/s
 import fs from "node:fs/promises";
 import path from "node:path";
 import { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps/server";
-const DIST_DIR = path.join(import.meta.dirname, "dist");
+// Works both from source (server.ts) and compiled (dist/server.js)
+const DIST_DIR = import.meta.filename.endsWith(".ts")
+  ? path.join(import.meta.dirname, "dist")
+  : import.meta.dirname;
 
 /**
  * Creates a new MCP server instance with tools and resources registered.
diff --git a/examples/basic-server-vanillajs/server.ts b/examples/basic-server-vanillajs/server.ts
@@ -4,7 +4,10 @@ import type { CallToolResult, ReadResourceResult } from "@modelcontextprotocol/s
 import fs from "node:fs/promises";
 import path from "node:path";
 import { z } from "zod";
-const DIST_DIR = path.join(import.meta.dirname, "dist");
+// Works both from source (server.ts) and compiled (dist/server.js)
+const DIST_DIR = import.meta.filename.endsWith(".ts")
+  ? path.join(import.meta.dirname, "dist")
+  : import.meta.dirname;
 
 /**
  * Creates a new MCP server instance with tools and resources registered.
diff --git a/examples/basic-server-vue/server.ts b/examples/basic-server-vue/server.ts
@@ -3,7 +3,10 @@ import type { CallToolResult, ReadResourceResult } from "@modelcontextprotocol/s
 import fs from "node:fs/promises";
 import path from "node:path";
 import { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps/server";
-const DIST_DIR = path.join(import.meta.dirname, "dist");
+// Works both from source (server.ts) and compiled (dist/server.js)
+const DIST_DIR = import.meta.filename.endsWith(".ts")
+  ? path.join(import.meta.dirname, "dist")
+  : import.meta.dirname;
 
 /**
  * Creates a new MCP server instance with tools and resources registered.
diff --git a/examples/budget-allocator-server/server.ts b/examples/budget-allocator-server/server.ts
@@ -17,7 +17,10 @@ import {
   registerAppResource,
   registerAppTool,
 } from "@modelcontextprotocol/ext-apps/server";
-const DIST_DIR = path.join(import.meta.dirname, "dist");
+// Works both from source (server.ts) and compiled (dist/server.js)
+const DIST_DIR = import.meta.filename.endsWith(".ts")
+  ? path.join(import.meta.dirname, "dist")
+  : import.meta.dirname;
 
 // ---------------------------------------------------------------------------
 // Schemas - types are derived from these using z.infer
diff --git a/examples/cohort-heatmap-server/server.ts b/examples/cohort-heatmap-server/server.ts
@@ -8,7 +8,10 @@ import {
   registerAppResource,
   registerAppTool,
 } from "@modelcontextprotocol/ext-apps/server";
-const DIST_DIR = path.join(import.meta.dirname, "dist");
+// Works both from source (server.ts) and compiled (dist/server.js)
+const DIST_DIR = import.meta.filename.endsWith(".ts")
+  ? path.join(import.meta.dirname, "dist")
+  : import.meta.dirname;
 
 // Schemas - types are derived from these using z.infer
 const GetCohortDataInputSchema = z.object({
diff --git a/examples/customer-segmentation-server/server.ts b/examples/customer-segmentation-server/server.ts
@@ -17,7 +17,10 @@ import {
 } from "./src/data-generator.js";
 import { SEGMENTS, type Customer, type SegmentSummary } from "./src/types.js";
 
-const DIST_DIR = path.join(import.meta.dirname, "dist");
+// Works both from source (server.ts) and compiled (dist/server.js)
+const DIST_DIR = import.meta.filename.endsWith(".ts")
+  ? path.join(import.meta.dirname, "dist")
+  : import.meta.dirname;
 
 // Schemas - types are derived from these using z.infer
 const GetCustomerDataInputSchema = z.object({
diff --git a/examples/integration-server/server.ts b/examples/integration-server/server.ts
@@ -11,7 +11,10 @@ import type {
 import fs from "node:fs/promises";
 import path from "node:path";
 import { z } from "zod";
-const DIST_DIR = path.join(import.meta.dirname, "dist");
+// Works both from source (server.ts) and compiled (dist/server.js)
+const DIST_DIR = import.meta.filename.endsWith(".ts")
+  ? path.join(import.meta.dirname, "dist")
+  : import.meta.dirname;
 const RESOURCE_URI = "ui://get-time/mcp-app.html";
 
 /**
diff --git a/examples/map-server/server.ts b/examples/map-server/server.ts
@@ -21,7 +21,10 @@ import {
 } from "@modelcontextprotocol/ext-apps/server";
 import { randomUUID } from "crypto";
 
-const DIST_DIR = path.join(import.meta.dirname, "dist");
+// Works both from source (server.ts) and compiled (dist/server.js)
+const DIST_DIR = import.meta.filename.endsWith(".ts")
+  ? path.join(import.meta.dirname, "dist")
+  : import.meta.dirname;
 const RESOURCE_URI = "ui://cesium-map/mcp-app.html";
 
 // Nominatim API response type
diff --git a/examples/pdf-server/package.json b/examples/pdf-server/package.json
@@ -14,7 +14,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc --noEmit && cross-env INPUT=mcp-app.html vite build && tsc -p tsconfig.server.json && bun build server.ts --outdir dist --target node && bun build main.ts --outfile dist/index.js --target node --external \"./server.js\" --banner \"#!/usr/bin/env node\"",
+    "build": "tsc --noEmit && cross-env INPUT=mcp-app.html vite build && tsc -p tsconfig.server.json && bun build server.ts --outdir dist --target node --external pdfjs-dist && bun build main.ts --outfile dist/index.js --target node --external \"./server.js\" --external pdfjs-dist --banner \"#!/usr/bin/env node\"",
     "watch": "cross-env INPUT=mcp-app.html vite build --watch",
     "serve": "bun --watch main.ts",
     "start": "cross-env NODE_ENV=development npm run build && npm run serve",
diff --git a/examples/pdf-server/server.ts b/examples/pdf-server/server.ts
@@ -37,7 +37,10 @@ import {
   type PdfIndex,
 } from "./src/types.js";
 
-const DIST_DIR = path.join(import.meta.dirname, "dist");
+// Works both from source (server.ts) and compiled (dist/server.js)
+const DIST_DIR = import.meta.filename.endsWith(".ts")
+  ? path.join(import.meta.dirname, "dist")
+  : import.meta.dirname;
 const RESOURCE_URI = "ui://pdf-viewer/mcp-app.html";
 const DEFAULT_PDF = "https://arxiv.org/pdf/1706.03762"; // Attention Is All You Need
 
diff --git a/examples/pdf-server/src/global.css b/examples/pdf-server/src/global.css
@@ -9,4 +9,6 @@ html, body {
   padding: 0;
   height: 100%;
   width: 100%;
+  /* Match .main background to hide any gap at the bottom */
+  background: var(--bg100, #f5f5f5);
 }
diff --git a/examples/pdf-server/src/mcp-app.css b/examples/pdf-server/src/mcp-app.css
@@ -5,7 +5,7 @@ body {
 .main {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  min-height: 100%;
   width: 100%;
   background: var(--bg100, #f5f5f5);
   color: var(--text000, #1a1a1a);
diff --git a/examples/scenario-modeler-server/server.ts b/examples/scenario-modeler-server/server.ts
@@ -11,7 +11,10 @@ import type {
 import fs from "node:fs/promises";
 import path from "node:path";
 import { z } from "zod";
-const DIST_DIR = path.join(import.meta.dirname, "dist");
+// Works both from source (server.ts) and compiled (dist/server.js)
+const DIST_DIR = import.meta.filename.endsWith(".ts")
+  ? path.join(import.meta.dirname, "dist")
+  : import.meta.dirname;
 
 // ============================================================================
 // Schemas - types are derived from these using z.infer
diff --git a/examples/shadertoy-server/mcp-app.html b/examples/shadertoy-server/mcp-app.html
@@ -9,6 +9,14 @@
 <body>
   <main class="main">
     <canvas id="canvas"></canvas>
+    <button id="fullscreen-btn" class="fullscreen-btn" title="Toggle fullscreen">
+      <svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
+      </svg>
+      <svg class="collapse-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>
+      </svg>
+    </button>
   </main>
   <script type="module" src="/src/mcp-app.ts"></script>
 </body>
diff --git a/examples/shadertoy-server/package.json b/examples/shadertoy-server/package.json
@@ -17,7 +17,9 @@
     "build": "tsc --noEmit && cross-env INPUT=mcp-app.html vite build && tsc -p tsconfig.server.json && bun build server.ts --outdir dist --target node && bun build main.ts --outfile dist/index.js --target node --external \"./server.js\" --banner \"#!/usr/bin/env node\"",
     "watch": "cross-env INPUT=mcp-app.html vite build --watch",
     "serve": "bun --watch main.ts",
+    "serve:stdio": "bun main.ts --stdio",
     "start": "cross-env NODE_ENV=development npm run build && npm run serve",
+    "start:stdio": "cross-env NODE_ENV=development npm run build && npm run serve:stdio",
     "dev": "cross-env NODE_ENV=development concurrently 'npm run watch' 'npm run serve'",
     "prepublishOnly": "npm run build"
   },
diff --git a/examples/shadertoy-server/screenshot.png b/examples/shadertoy-server/screenshot.png
diff --git a/examples/shadertoy-server/server.ts b/examples/shadertoy-server/server.ts
@@ -11,7 +11,10 @@ import type {
 import fs from "node:fs/promises";
 import path from "node:path";
 import { z } from "zod";
-const DIST_DIR = path.join(import.meta.dirname, "dist");
+// Works both from source (server.ts) and compiled (dist/server.js)
+const DIST_DIR = import.meta.filename.endsWith(".ts")
+  ? path.join(import.meta.dirname, "dist")
+  : import.meta.dirname;
 
 const TOOL_DESCRIPTION = `Renders a ShaderToy-compatible GLSL fragment shader in real-time using WebGL 2.0.
 
diff --git a/examples/shadertoy-server/src/mcp-app.css b/examples/shadertoy-server/src/mcp-app.css
@@ -5,8 +5,61 @@ html, body {
   overflow: hidden;
 }
 
+.main {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
 #canvas {
   width: 100%;
   height: 100%;
   display: block;
 }
+
+/* Fullscreen button */
+.fullscreen-btn {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  cursor: pointer;
+  display: none; /* Hidden by default, shown when fullscreen available */
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s, opacity 0.2s;
+  opacity: 0.7;
+  z-index: 100;
+}
+
+.fullscreen-btn:hover {
+  background: rgba(0, 0, 0, 0.8);
+  opacity: 1;
+}
+
+.fullscreen-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.fullscreen-btn .collapse-icon {
+  display: none;
+}
+
+.fullscreen-btn.available {
+  display: flex;
+}
+
+/* Fullscreen mode */
+.main.fullscreen .fullscreen-btn .expand-icon {
+  display: none;
+}
+
+.main.fullscreen .fullscreen-btn .collapse-icon {
+  display: block;
+}
diff --git a/examples/shadertoy-server/src/mcp-app.ts b/examples/shadertoy-server/src/mcp-app.ts
@@ -34,6 +34,13 @@ const log = {
 // Get element references
 const mainEl = document.querySelector(".main") as HTMLElement;
 const canvas = document.getElementById("canvas") as HTMLCanvasElement;
+const fullscreenBtn = document.getElementById(
+  "fullscreen-btn",
+) as HTMLButtonElement;
+
+// Display mode state
+let currentDisplayMode: "inline" | "fullscreen" = "inline";
+
 // Resize canvas to fill viewport
 function resizeCanvas() {
   canvas.width = window.innerWidth;
@@ -42,16 +49,55 @@ function resizeCanvas() {
 resizeCanvas();
 window.addEventListener("resize", resizeCanvas);
 
-// Handle host context changes (safe area insets)
+// Handle host context changes (display mode)
 function handleHostContextChanged(ctx: McpUiHostContext) {
-  if (ctx.safeAreaInsets) {
-    mainEl.style.paddingTop = `${ctx.safeAreaInsets.top}px`;
-    mainEl.style.paddingRight = `${ctx.safeAreaInsets.right}px`;
-    mainEl.style.paddingBottom = `${ctx.safeAreaInsets.bottom}px`;
-    mainEl.style.paddingLeft = `${ctx.safeAreaInsets.left}px`;
+  // Note: We ignore safeAreaInsets to maximize shader display area
+
+  // Show fullscreen button if available (only update if field is present)
+  if (ctx.availableDisplayModes !== undefined) {
+    if (ctx.availableDisplayModes.includes("fullscreen")) {
+      fullscreenBtn.classList.add("available");
+    } else {
+      fullscreenBtn.classList.remove("available");
+    }
+  }
+
+  // Update display mode state and UI
+  if (ctx.displayMode) {
+    currentDisplayMode = ctx.displayMode as "inline" | "fullscreen";
+    if (currentDisplayMode === "fullscreen") {
+      mainEl.classList.add("fullscreen");
+    } else {
+      mainEl.classList.remove("fullscreen");
+    }
   }
 }
 
+// Handle Escape key to exit fullscreen
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && currentDisplayMode === "fullscreen") {
+    toggleFullscreen();
+  }
+});
+
+// Toggle fullscreen mode
+async function toggleFullscreen() {
+  const newMode = currentDisplayMode === "fullscreen" ? "inline" : "fullscreen";
+  try {
+    const result = await app.requestDisplayMode({ mode: newMode });
+    currentDisplayMode = result.mode as "inline" | "fullscreen";
+    if (currentDisplayMode === "fullscreen") {
+      mainEl.classList.add("fullscreen");
+    } else {
+      mainEl.classList.remove("fullscreen");
+    }
+  } catch (err) {
+    log.error("Failed to change display mode:", err);
+  }
+}
+
+fullscreenBtn.addEventListener("click", toggleFullscreen);
+
 // ShaderToyLite instance
 let shaderToy: ShaderToyLiteInstance | null = null;
 
diff --git a/examples/sheet-music-server/server.ts b/examples/sheet-music-server/server.ts
@@ -12,7 +12,10 @@ import {
   registerAppResource,
   registerAppTool,
 } from "@modelcontextprotocol/ext-apps/server";
-const DIST_DIR = path.join(import.meta.dirname, "dist");
+// Works both from source (server.ts) and compiled (dist/server.js)
+const DIST_DIR = import.meta.filename.endsWith(".ts")
+  ? path.join(import.meta.dirname, "dist")
+  : import.meta.dirname;
 
 const DEFAULT_ABC_NOTATION_INPUT = `X:1
 T:Twinkle, Twinkle Little Star
diff --git a/examples/system-monitor-server/server.ts b/examples/system-monitor-server/server.ts
@@ -53,7 +53,10 @@ const SystemStatsSchema = z.object({
 type CpuCore = z.infer<typeof CpuCoreSchema>;
 type MemoryStats = z.infer<typeof MemoryStatsSchema>;
 type SystemStats = z.infer<typeof SystemStatsSchema>;
-const DIST_DIR = path.join(import.meta.dirname, "dist");
+// Works both from source (server.ts) and compiled (dist/server.js)
+const DIST_DIR = import.meta.filename.endsWith(".ts")
+  ? path.join(import.meta.dirname, "dist")
+  : import.meta.dirname;
 
 // Returns raw CPU timing data per core (client calculates usage from deltas)
 function getCpuSnapshots(): CpuCore[] {
diff --git a/examples/threejs-server/server.ts b/examples/threejs-server/server.ts
@@ -14,7 +14,10 @@ import fs from "node:fs/promises";
 import path from "node:path";
 import { z } from "zod";
 
-const DIST_DIR = path.join(import.meta.dirname, "dist");
+// Works both from source (server.ts) and compiled (dist/server.js)
+const DIST_DIR = import.meta.filename.endsWith(".ts")
+  ? path.join(import.meta.dirname, "dist")
+  : import.meta.dirname;
 
 // Default code example for the Three.js widget
 const DEFAULT_THREEJS_CODE = `const scene = new THREE.Scene();
diff --git a/examples/transcript-server/server.ts b/examples/transcript-server/server.ts
diff --git a/examples/transcript-server/src/mcp-app.css b/examples/transcript-server/src/mcp-app.css
diff --git a/examples/transcript-server/src/mcp-app.ts b/examples/transcript-server/src/mcp-app.ts
diff --git a/examples/video-resource-server/server.ts b/examples/video-resource-server/server.ts
diff --git a/examples/wiki-explorer-server/server.ts b/examples/wiki-explorer-server/server.ts
diff --git a/src/app-bridge.ts b/src/app-bridge.ts
diff --git a/src/message-transport.ts b/src/message-transport.ts
