diff --git a/examples/threejs-server/src/mcp-app-wrapper.tsx b/examples/threejs-server/src/mcp-app-wrapper.tsx index 8d46e18..42df752 100644 --- a/examples/threejs-server/src/mcp-app-wrapper.tsx +++ b/examples/threejs-server/src/mcp-app-wrapper.tsx @@ -25,7 +25,7 @@ export interface WidgetProps> { toolInputsPartial: TToolInput | null; /** Tool execution result from the server */ toolResult: CallToolResult | null; - /** Host context (theme, viewport, locale, etc.) */ + /** Host context (theme, dimensions, locale, etc.) */ hostContext: McpUiHostContext | null; /** Call a tool on the MCP server */ callServerTool: App["callServerTool"]; @@ -65,7 +65,7 @@ function McpAppWrapper() { app.ontoolresult = (params) => { setToolResult(params as CallToolResult); }; - // Host context changes (theme, viewport, etc.) + // Host context changes (theme, dimensions, etc.) app.onhostcontextchanged = (params) => { setHostContext(params); }; diff --git a/specification/draft/apps.mdx b/specification/draft/apps.mdx index 51898a1..8305003 100644 --- a/specification/draft/apps.mdx +++ b/specification/draft/apps.mdx @@ -469,13 +469,6 @@ interface HostContext { | { width: number } // If specified, container is fixed at this width | { maxWidth?: number } // Otherwise, container width is determined by the UI width, up to this maximum width (if defined) ); - /** Host window viewport dimensions */ - viewport?: { - /** Window viewport width in pixels. */ - width?: number; - /** Window viewport height in pixels. */ - height?: number; - }; /** User's language/region preference (BCP 47, e.g., "en-US") */ locale?: string; /** User's timezone (IANA, e.g., "America/New_York") */ @@ -525,20 +518,17 @@ Example: }, "displayMode": "inline", "containerDimensions": { "width": 400, "maxHeight": 600 } - "viewport": { "width": 1920, "height": 1080 }, } } } ``` -### Viewport and Dimensions +### Container Dimensions -The `HostContext` provides two separate fields for sizing information: +The `HostContext` provides sizing information via `containerDimensions`: - **`containerDimensions`**: The dimensions of the container that holds the app. This controls the actual space the app occupies within the host. Each dimension (height and width) operates independently and can be either **fixed** or **flexible**. -- **`viewport`**: The host window's dimensions (e.g., `window.innerWidth` and `window.innerHeight`). Apps can use this to make responsive layout decisions based on the overall screen size. - #### Dimension Modes | Mode | Dimensions Field | Meaning | @@ -578,12 +568,6 @@ if (containerDimensions) { } // If neither, width is unbounded } - -// Apps can also use viewport for additional data to make responsive layout decisions -const viewport = hostContext.viewport; -if (viewport?.width && viewport.width < 768) { - // Apply mobile-friendly layout -} ``` #### Host Behavior diff --git a/src/app-bridge.test.ts b/src/app-bridge.test.ts index ce3a338..1e55f6b 100644 --- a/src/app-bridge.test.ts +++ b/src/app-bridge.test.ts @@ -113,7 +113,6 @@ describe("App <-> AppBridge integration", () => { const testHostContext = { theme: "dark" as const, locale: "en-US", - viewport: { width: 800, height: 600 }, containerDimensions: { width: 800, maxHeight: 600 }, }; const newBridge = new AppBridge( @@ -338,7 +337,6 @@ describe("App <-> AppBridge integration", () => { const initialContext = { theme: "light" as const, locale: "en-US", - viewport: { width: 800, height: 600 }, containerDimensions: { width: 800, maxHeight: 600 }, }; const newBridge = new AppBridge( @@ -356,9 +354,8 @@ describe("App <-> AppBridge integration", () => { newBridge.sendHostContextChange({ theme: "dark" }); await flush(); - // Send another partial update: only viewport and containerDimensions change + // Send another partial update: only containerDimensions change newBridge.sendHostContextChange({ - viewport: { width: 1024, height: 768 }, containerDimensions: { width: 1024, maxHeight: 768 }, }); await flush(); @@ -366,14 +363,10 @@ describe("App <-> AppBridge integration", () => { // getHostContext should have accumulated all updates: // - locale from initial (unchanged) // - theme from first partial update - // - viewport and containerDimensions from second partial update + // - containerDimensions from second partial update const context = newApp.getHostContext(); expect(context?.theme).toBe("dark"); expect(context?.locale).toBe("en-US"); - expect(context?.viewport).toEqual({ - width: 1024, - height: 768, - }); expect(context?.containerDimensions).toEqual({ width: 1024, maxHeight: 768, diff --git a/src/app-bridge.ts b/src/app-bridge.ts index 8a06f9e..f9ff699 100644 --- a/src/app-bridge.ts +++ b/src/app-bridge.ts @@ -356,7 +356,7 @@ export class AppBridge extends Protocol< * adjust the iframe container dimensions based on the Guest UI's content. * * Note: This is for Guest UI → Host communication. To notify the Guest UI of - * host viewport changes, use {@link app.App.sendSizeChanged}. + * host container dimension changes, use {@link setHostContext}. * * @example * ```typescript @@ -1008,7 +1008,6 @@ export class AppBridge extends Protocol< * ```typescript * bridge.setHostContext({ * theme: "dark", - * viewport: { width: 800, height: 600 }, * containerDimensions: { maxHeight: 600, width: 800 } * }); * ``` diff --git a/src/app.ts b/src/app.ts index 3188530..ad97fd3 100644 --- a/src/app.ts +++ b/src/app.ts @@ -154,7 +154,7 @@ type RequestHandlerExtra = Parameters< * - `ontoolinput` - Complete tool arguments from host * - `ontoolinputpartial` - Streaming partial tool arguments * - `ontoolresult` - Tool execution results - * - `onhostcontextchanged` - Host context changes (theme, viewport, etc.) + * - `onhostcontextchanged` - Host context changes (theme, locale, etc.) * * These setters are convenience wrappers around `setNotificationHandler()`. * Both patterns work; use whichever fits your coding style better. @@ -293,7 +293,7 @@ export class App extends Protocol { * Get the host context discovered during initialization. * * Returns the host context that was provided in the initialization response, - * including tool info, theme, viewport, locale, and other environment details. + * including tool info, theme, locale, and other environment details. * This context is automatically updated when the host sends * `ui/notifications/host-context-changed` notifications. * @@ -478,12 +478,12 @@ export class App extends Protocol { } /** - * Convenience handler for host context changes (theme, viewport, locale, etc.). + * Convenience handler for host context changes (theme, locale, etc.). * * Set this property to register a handler that will be called when the host's - * context changes, such as theme switching (light/dark), viewport size changes, - * locale changes, or other environmental updates. Apps should respond by - * updating their UI accordingly. + * context changes, such as theme switching (light/dark), locale changes, or + * other environmental updates. Apps should respond by updating their UI + * accordingly. * * This setter is a convenience wrapper around `setNotificationHandler()` that * automatically handles the notification schema and extracts the params for you. diff --git a/src/generated/schema.json b/src/generated/schema.json index a5eb424..995eb4d 100644 --- a/src/generated/schema.json +++ b/src/generated/schema.json @@ -697,31 +697,6 @@ } ] }, - "viewport": { - "description": "Window viewport dimensions. Represents the host window's viewport size,\nwhich provides additional information apps can use to make responsive layout decisions.", - "type": "object", - "properties": { - "width": { - "description": "Window viewport width in pixels.", - "anyOf": [ - { - "type": "number" - }, - {} - ] - }, - "height": { - "description": "Window viewport height in pixels.", - "anyOf": [ - { - "type": "number" - }, - {} - ] - } - }, - "additionalProperties": false - }, "locale": { "description": "User's language and region preference in BCP 47 format.", "type": "string" @@ -1393,31 +1368,6 @@ } ] }, - "viewport": { - "description": "Window viewport dimensions. Represents the host window's viewport size,\nwhich provides additional information apps can use to make responsive layout decisions.", - "type": "object", - "properties": { - "width": { - "description": "Window viewport width in pixels.", - "anyOf": [ - { - "type": "number" - }, - {} - ] - }, - "height": { - "description": "Window viewport height in pixels.", - "anyOf": [ - { - "type": "number" - }, - {} - ] - } - }, - "additionalProperties": false - }, "locale": { "description": "User's language and region preference in BCP 47 format.", "type": "string" @@ -2626,31 +2576,6 @@ } ] }, - "viewport": { - "description": "Window viewport dimensions. Represents the host window's viewport size,\nwhich provides additional information apps can use to make responsive layout decisions.", - "type": "object", - "properties": { - "width": { - "description": "Window viewport width in pixels.", - "anyOf": [ - { - "type": "number" - }, - {} - ] - }, - "height": { - "description": "Window viewport height in pixels.", - "anyOf": [ - { - "type": "number" - }, - {} - ] - } - }, - "additionalProperties": false - }, "locale": { "description": "User's language and region preference in BCP 47 format.", "type": "string" diff --git a/src/generated/schema.ts b/src/generated/schema.ts index dfaafa5..bc415e5 100644 --- a/src/generated/schema.ts +++ b/src/generated/schema.ts @@ -601,27 +601,6 @@ export const McpUiHostContextSchema = z .describe( "Container dimensions. Represents the dimensions of the iframe or other\ncontainer holding the app. Specify either width or maxWidth, and either height or maxHeight.", ), - /** - * @description Window viewport dimensions. Represents the host window's viewport size, - * which provides additional information apps can use to make responsive layout decisions. - */ - viewport: z - .object({ - /** @description Window viewport width in pixels. */ - width: z - .union([z.number(), z.undefined()]) - .optional() - .describe("Window viewport width in pixels."), - /** @description Window viewport height in pixels. */ - height: z - .union([z.number(), z.undefined()]) - .optional() - .describe("Window viewport height in pixels."), - }) - .optional() - .describe( - "Window viewport dimensions. Represents the host window's viewport size,\nwhich provides additional information apps can use to make responsive layout decisions.", - ), /** @description User's language and region preference in BCP 47 format. */ locale: z .string() diff --git a/src/spec.types.ts b/src/spec.types.ts index 57627e7..5b7135b 100644 --- a/src/spec.types.ts +++ b/src/spec.types.ts @@ -349,16 +349,6 @@ export interface McpUiHostContext { maxWidth?: number | undefined; } ); - /** - * @description Window viewport dimensions. Represents the host window's viewport size, - * which provides additional information apps can use to make responsive layout decisions. - */ - viewport?: { - /** @description Window viewport width in pixels. */ - width?: number | undefined; - /** @description Window viewport height in pixels. */ - height?: number | undefined; - }; /** @description User's language and region preference in BCP 47 format. */ locale?: string; /** @description User's timezone in IANA format. */