Merge pull request #159 from modelcontextprotocol/martinalong/mcp-apps/custom-fonts

[MCP Apps] Add way to pass custom fonts

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);
@@ -33,6 +36,7 @@
 html, body {
   margin: 0;
   padding: 0;
+  font-family: var(--font-sans);
   color: var(--color-text-primary);
   overflow: hidden;
 }

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,7 +449,7 @@ 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);
@@ -456,6 +457,9 @@ app.onhostcontextchanged = (params) => {
   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