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

Author: ochafik

examples/budget-allocator-server/server.ts

@@ -16,6 +16,8 @@ import { z } from "zod";
 import {
   RESOURCE_MIME_TYPE,
   RESOURCE_URI_META_KEY,
+  registerAppResource,
+  registerAppTool,
 } from "@modelcontextprotocol/ext-apps/server";
 import { startServer } from "../shared/server-utils.js";
 

examples/cohort-heatmap-server/server.ts

@@ -7,6 +7,8 @@ import { z } from "zod";
 import {
   RESOURCE_MIME_TYPE,
   RESOURCE_URI_META_KEY,
+  registerAppResource,
+  registerAppTool,
 } from "@modelcontextprotocol/ext-apps/server";
 import { startServer } from "../shared/server-utils.js";
 

examples/customer-segmentation-server/server.ts

@@ -10,6 +10,8 @@ import { z } from "zod";
 import {
   RESOURCE_MIME_TYPE,
   RESOURCE_URI_META_KEY,
+  registerAppResource,
+  registerAppTool,
 } from "@modelcontextprotocol/ext-apps/server";
 import { startServer } from "../shared/server-utils.js";
 import {

examples/customer-segmentation-server/src/mcp-app.css

@@ -2,6 +2,9 @@
 :root {
   color-scheme: light dark;
 
+  /* Font families */
+  --font-sans: system-ui, -apple-system, sans-serif;
+
   /* Background colors */
   --color-background-primary: light-dark(#ffffff, #111827);
   --color-background-secondary: light-dark(#f9fafb, #1f2937);
@@ -16,12 +19,19 @@
   --color-border-primary: light-dark(#e5e7eb, #374151);
   --color-border-secondary: light-dark(#d1d5db, #4b5563);
 
-  /* Accent colors */
-  --color-accent-info: light-dark(#2563eb, #3b82f6);
+  /* Ring colors */
+  --color-ring-info: light-dark(#2563eb, #3b82f6);
 
   /* Border radius */
   --border-radius-sm: 6px;
   --border-radius-md: 8px;
+  --border-radius-full: 9999px;
+
+  /* Border width */
+  --border-width-regular: 1px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
 
   /* App-specific colors (not from host) */
   --color-enterprise: light-dark(#1e40af, #3b82f6);
@@ -33,6 +43,7 @@
 html, body {
   margin: 0;
   padding: 0;
+  font-family: var(--font-sans);
   color: var(--color-text-primary);
   overflow: hidden;
 }
@@ -94,15 +105,15 @@ html, body {
 .select {
   padding: 4px 8px;
   font-size: 0.8125rem;
-  border: 1px solid var(--color-border-primary);
+  border: var(--border-width-regular) solid var(--color-border-primary);
   border-radius: var(--border-radius-sm);
   background: var(--color-background-secondary);
   color: var(--color-text-primary);
   cursor: pointer;
 }
 
 .select:focus {
-  outline: 2px solid var(--color-accent-info);
+  outline: 2px solid var(--color-ring-info);
   outline-offset: 1px;
 }
 
@@ -113,7 +124,7 @@ html, body {
   background: var(--color-background-secondary);
   border-radius: var(--border-radius-md);
   padding: 8px;
-  border: 1px solid var(--color-border-primary);
+  border: var(--border-width-regular) solid var(--color-border-primary);
 }
 
 .chart-container {
@@ -143,15 +154,15 @@ html, body {
   font-size: 0.75rem;
   cursor: pointer;
   padding: 4px 10px;
-  border-radius: 16px;
-  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-full);
+  border: var(--border-width-regular) solid var(--color-border-primary);
   background: var(--color-background-secondary);
   transition: all 0.15s ease;
 }
 
 .legend-item:hover {
   border-color: var(--color-text-secondary);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
 }
 
 .legend-item.hidden {
@@ -192,7 +203,7 @@ html, body {
   background: var(--color-background-secondary);
   border-radius: var(--border-radius-sm);
   padding: 0 12px;
-  border: 1px solid var(--color-border-primary);
+  border: var(--border-width-regular) solid var(--color-border-primary);
   font-size: 0.8125rem;
 }
 

examples/customer-segmentation-server/src/mcp-app.ts

@@ -5,6 +5,7 @@ import {
   App,
   PostMessageTransport,
   applyHostStyleVariables,
+  applyHostFonts,
   applyDocumentTheme,
 } from "@modelcontextprotocol/ext-apps";
 import { Chart, registerables } from "chart.js";
@@ -448,14 +449,17 @@ applyDocumentTheme(systemDark ? "dark" : "light");
 // Register handlers and connect
 app.onerror = log.error;
 
-// Handle host context changes (theme and styles from host)
+// Handle host context changes (theme, styles, and fonts from host)
 app.onhostcontextchanged = (params) => {
   if (params.theme) {
     applyDocumentTheme(params.theme);
   }
   if (params.styles?.variables) {
     applyHostStyleVariables(params.styles.variables);
   }
+  if (params.styles?.css?.fonts) {
+    applyHostFonts(params.styles.css.fonts);
+  }
   // Recreate chart to pick up new colors
   if (state.chart && (params.theme || params.styles?.variables)) {
     state.chart.destroy();
@@ -472,6 +476,9 @@ app.connect().then(() => {
   if (ctx?.styles?.variables) {
     applyHostStyleVariables(ctx.styles.variables);
   }
+  if (ctx?.styles?.css?.fonts) {
+    applyHostFonts(ctx.styles.css.fonts);
+  }
 });
 
 // Fetch data after connection

examples/scenario-modeler-server/server.ts

@@ -10,6 +10,8 @@ import { z } from "zod";
 import {
   RESOURCE_MIME_TYPE,
   RESOURCE_URI_META_KEY,
+  registerAppResource,
+  registerAppTool,
 } from "@modelcontextprotocol/ext-apps/server";
 import { startServer } from "../shared/server-utils.js";
 

examples/system-monitor-server/server.ts

@@ -12,6 +12,8 @@ import { z } from "zod";
 import {
   RESOURCE_MIME_TYPE,
   RESOURCE_URI_META_KEY,
+  registerAppResource,
+  registerAppTool,
 } from "@modelcontextprotocol/ext-apps/server";
 import { startServer } from "../shared/server-utils.js";
 

examples/threejs-server/server.ts

@@ -12,6 +12,8 @@ import { z } from "zod";
 import {
   RESOURCE_MIME_TYPE,
   RESOURCE_URI_META_KEY,
+  registerAppResource,
+  registerAppTool,
 } from "@modelcontextprotocol/ext-apps/server";
 import { startServer } from "../shared/server-utils.js";
 
@@ -178,9 +180,8 @@ function createServer(): McpServer {
     },
   );
 
-  // Tool 2: learn_threejs
-  registerAppTool(
-    server,
+  // Tool 2: learn_threejs (not a UI tool, just returns documentation)
+  server.registerTool(
     "learn_threejs",
     {
       title: "Learn Three.js",

examples/wiki-explorer-server/server.ts

@@ -11,6 +11,8 @@ import { z } from "zod";
 import {
   RESOURCE_MIME_TYPE,
   RESOURCE_URI_META_KEY,
+  registerAppResource,
+  registerAppTool,
 } from "@modelcontextprotocol/ext-apps/server";
 import { startServer } from "../shared/server-utils.js";
 

specification/draft/apps.mdx

@@ -451,6 +451,11 @@ interface HostContext {
   styles?: {
     /** CSS variables for theming */
     variables?: Record<McpUiStyleVariableKey, string | undefined>;
+    /** CSS blocks that apps can inject */
+    css?: {
+      /** CSS for font loading (@font-face rules or @import statements) */
+      fonts?: string;
+    };
   };
   /** How the UI is currently displayed */
   displayMode?: "inline" | "fullscreen" | "pip";
@@ -503,8 +508,11 @@ Example:
         "variables": {
           "--color-background-primary": "light-dark(#ffffff, #171717)",
           "--color-text-primary": "light-dark(#171717, #fafafa)",
-          "--font-family-sans": "system-ui, sans-serif",
+          "--font-sans": "Anthropic Sans, sans-serif",
           ...
+        },
+        "css": {
+          "fonts": "@font-face { font-family: \"Custom Font Name\"; src: url(\"https://...\"); }"
         }
       },
       "displayMode": "inline",
@@ -544,6 +552,7 @@ type McpUiStyleVariableKey =
   | "--color-text-success"
   | "--color-text-warning"
   | "--color-text-disabled"
+  | "--color-text-ghost"
   // Border colors
   | "--color-border-primary"
   | "--color-border-secondary"
@@ -638,7 +647,46 @@ Example usage of standardized CSS variables:
 .container {
   background: var(--color-background-primary);
   color: var(--color-text-primary);
-  font: var(--font-style-body);
+  font-family: var(--font-sans);
+}
+```
+
+#### Custom Fonts
+
+Hosts can provide custom fonts via `styles.css.fonts`, which can contain `@font-face` rules for self-hosted fonts, `@import` statements for font services like Google Fonts, or both:
+
+```typescript
+hostContext.styles.variables["--font-sans"] = '"Font Name", sans-serif';
+
+// Self-hosted fonts
+hostContext.styles.css.fonts = `
+  @font-face {
+    font-family: "Font Name";
+    src: url("https://url-where-font-is-hosted.com/.../Regular.otf") format("opentype");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Font Name";
+    src: url("https://url-where-font-is-hosted.com/.../Medium.otf") format("opentype");
+    font-weight: 500;
+    font-style: medium;
+    font-display: swap;
+  }
+`;
+
+// Google Fonts
+hostContext.styles.css.fonts = `
+  @import url('https://fonts.googleapis.com/css2?family=Font+Name&display=swap');
+`;
+```
+
+Apps can use the `applyHostFonts` utility to inject the font CSS into the document:
+
+```typescript
+if (hostContext.styles?.css?.fonts) {
+  applyHostFonts(hostContext.styles.css.fonts);
 }
 ```