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

Suggested edits

Browse source
This commit is contained in:
martinalong 2025-12-11 16:30:58 -08:00
commit aaedd858bb
No known key found for this signature in database
1 changed files with 18 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

38
specification/draft/apps.mdx
View file

@ -440,10 +440,6 @@ interface HostContext {
} }
``` ```
All fields are optional. Hosts SHOULD provide relevant context. Guest UIs SHOULD handle missing fields gracefully.
For `styles`, apps SHOULD provide CSS fallback values (e.g., `var(--color-text-primary, #171717)`) to handle hosts that don't supply styles.
Example: Example:
```json ```json
@ -460,7 +456,8 @@ Example:
"styles": { "styles": {
"--color-background-primary": "light-dark(#ffffff, #171717)", "--color-background-primary": "light-dark(#ffffff, #171717)",
"--color-text-primary": "light-dark(#171717, #fafafa)", "--color-text-primary": "light-dark(#171717, #fafafa)",
"--font-family-sans": "system-ui, sans-serif" "--font-family-sans": "system-ui, sans-serif",
...
}, },
"displayMode": "inline", "displayMode": "inline",
"viewport": { "width": 400, "height": 300 } "viewport": { "width": 400, "height": 300 }
@ -471,9 +468,9 @@ Example:
### Theming ### Theming
Hosts pass CSS custom properties via `HostContext.styles` for visual cohesion with the host environment. Hosts can optionally pass CSS custom properties via `HostContext.styles` for visual cohesion with the host environment.
#### Standardized Variables #### Current Standardized Variables
| Category | Variables | | Category | Variables |
|----------|-----------| |----------|-----------|
@ -492,26 +489,27 @@ Hosts pass CSS custom properties via `HostContext.styles` for visual cohesion wi
#### Host Behavior #### Host Behavior
- Hosts MAY provide any subset of standardized variables - Hosts can provide any subset of standardized variables, or not pass `styles` at all. However, passing all of the standardized properties is recommended for cohesiveness
- Hosts MAY use CSS `light-dark()` function for theme-aware values - Hosts can use the CSS `light-dark()` function for theme-aware values
- `theme` indicates the active mode; `styles` provides the concrete CSS values
#### App Behavior #### App Behavior
- Apps SHOULD use fallback values for CSS variables: `var(--color-text-primary, #171717)` - Apps should set default fallback values for CSS variables, to account for hosts who don't pass some or all style variables. This ensures graceful degradation when hosts omit `styles` or specific variables:
- This ensures graceful degradation when hosts omit `styles` or specific variables ```
- When the host uses `light-dark()` values, apps MUST set `color-scheme` on their document: :root {
```css --colorTextPrimary: #171717;
:root { color-scheme: light dark; } }
``` ```
- Apps can use the `applyHostStyles` utility (or `useHostStyles` if they prefer a React hook) to easily populate the host-provided CSS variables into their style sheet
- Apps can use the `applyDocumentTheme` utility (or `useDocumentTheme` if they prefer a React hook) to easily respond to Host Context `theme` changes in a way that is compatible with the host's light/dark color variables
Example CSS: Example usage of standardized CSS variables:
```css ```css
.container { .container {
background: var(--color-background-primary, #ffffff); background: var(--color-background-primary);
color: var(--color-text-primary, #171717); color: var(--color-text-primary);
font: var(--font-style-body, 400 16px/1.4 system-ui); font: var(--font-style-body);
} }
``` ```