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

Improve patterns guide with concrete examples and safe area insets

Browse source 
- Rename "host styling" section to "host context" and add safe area
  insets handling
- Replace abstract `renderLoadingUI`/`renderFinalUI` example with
  concrete code preview pattern for `ontoolinputpartial`
- Rename callback parameter `params` → `ctx` for clarity across all
  `onhostcontextchanged` handlers
- Add CSS snippet for fullscreen border-radius handling
- Expand display mode example to show `availableDisplayModes` check
- Fix minor typos and wording consistency

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jonathan Hefner 2026-01-27 17:31:14 -06:00
commit c6c2428e0b
No known key found for this signature in database
GPG key ID: 0DA40AFD21043691
1 changed files with 215 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/styles.ts
View file

@ -44,9 +44,9 @@ export function getDocumentTheme(): McpUiTheme {
* @example Apply theme from host context
* ```ts source="./styles.examples.ts#applyDocumentTheme_fromHostContext"
* // Apply when host context changes
* app.onhostcontextchanged = (params) => {
* if (params.theme) {
* applyDocumentTheme(params.theme);
* app.onhostcontextchanged = (ctx) => {
* if (ctx.theme) {
* applyDocumentTheme(ctx.theme);
* }
* };
*
@ -95,9 +95,9 @@ export function applyDocumentTheme(theme: McpUiTheme): void {
* document.body.style.background = "var(--color-background-primary)";
*
* // Apply when host context changes
* app.onhostcontextchanged = (params) => {
* if (params.styles?.variables) {
* applyHostStyleVariables(params.styles.variables);
* app.onhostcontextchanged = (ctx) => {
* if (ctx.styles?.variables) {
* applyHostStyleVariables(ctx.styles.variables);
* }
* };
*
@ -112,10 +112,10 @@ export function applyDocumentTheme(theme: McpUiTheme): void {
*
* @example Apply to a specific element
* ```ts source="./styles.examples.ts#applyHostStyleVariables_toElement"
* app.onhostcontextchanged = (params) => {
* app.onhostcontextchanged = (ctx) => {
* const container = document.getElementById("app-root");
* if (container && params.styles?.variables) {
* applyHostStyleVariables(params.styles.variables, container);
* if (container && ctx.styles?.variables) {
* applyHostStyleVariables(ctx.styles.variables, container);
* }
* };
* ```
@ -163,9 +163,9 @@ export function applyHostStyleVariables(
* @example Apply fonts from host context
* ```ts source="./styles.examples.ts#applyHostFonts_fromHostContext"
* // Apply when host context changes
* app.onhostcontextchanged = (params) => {
* if (params.styles?.css?.fonts) {
* applyHostFonts(params.styles.css.fonts);
* app.onhostcontextchanged = (ctx) => {
* if (ctx.styles?.css?.fonts) {
* applyHostFonts(ctx.styles.css.fonts);
* }
* };
*