Remove viewport

Author: martinalong

examples/threejs-server/src/mcp-app-wrapper.tsx

@@ -25,7 +25,7 @@ export interface WidgetProps<TToolInput = Record<string, unknown>> {
   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);
       };

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

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,24 +354,19 @@ 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();
 
       // 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,

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 }
    * });
    * ```

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<AppRequest, AppNotification, AppResult> {
    * 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<AppRequest, AppNotification, AppResult> {
   }
 
   /**
-   * 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.

src/generated/schema.json

@@ -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. */