modelcontextprotocol/ext-apps
Watch
1
0
Fork
You've already forked ext-apps
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
[MCP Apps] Add way to pass custom fonts
This commit is contained in:
Anton Pidkuiko 2025-12-17 17:45:54 +07:00 • committed by GitHub
commit 242ec23856
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 323 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

51
specification/draft/apps.mdx
View file

@ -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",
@ -638,7 +646,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);
}
```