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

fix: change size-changed to be in correct tense (#83)

Browse source 
* fix: change size-changed to be in correct tense

* sdk changes
This commit is contained in:
Liad Yosef 2025-12-08 13:14:56 +02:00 • committed by GitHub
commit ba1a27e465
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 41 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

6
specification/draft/apps.mdx
View file

@ -632,12 +632,12 @@ Host MUST send this notification if the tool execution was cancelled, for any re
Host MUST send this notification before tearing down the UI resource, for any reason, including user action, resource re-allocation, etc. The Host MAY specify the reason. Host MUST send this notification before tearing down the UI resource, for any reason, including user action, resource re-allocation, etc. The Host MAY specify the reason.
Host SHOULD wait for a response before tearing down the resource (to prevent data loss). Host SHOULD wait for a response before tearing down the resource (to prevent data loss).
`ui/notifications/size-change` - UI’s size changed `ui/notifications/size-changed` - UI’s size changed
```typescript ```typescript
{ {
jsonrpc: "2.0", jsonrpc: "2.0",
method: "ui/notifications/size-change", method: "ui/notifications/size-changed",
params: { params: {
width: number, // Viewport width in pixels width: number, // Viewport width in pixels
height: number // Viewport height in pixels height: number // Viewport height in pixels
@ -774,7 +774,7 @@ sequenceDiagram
H --> UI: resources/read response H --> UI: resources/read response
end end
opt UI notifications opt UI notifications
UI ->> H: notifications (e.g., ui/notifications/size-change) UI ->> H: notifications (e.g., ui/notifications/size-changed)
end end
opt Host notifications opt Host notifications
H ->> UI: notifications (e.g., ui/notifications/host-context-changed) H ->> UI: notifications (e.g., ui/notifications/host-context-changed)

4
src/app-bridge.test.ts
View file

@ -180,14 +180,14 @@ describe("App <-> AppBridge integration", () => {
await bridge.connect(bridgeTransport); await bridge.connect(bridgeTransport);
}); });
it("app.sendSizeChange triggers bridge.onsizechange", async () => { it("app.sendSizeChanged triggers bridge.onsizechange", async () => {
const receivedSizes: unknown[] = []; const receivedSizes: unknown[] = [];
bridge.onsizechange = (params) => { bridge.onsizechange = (params) => {
receivedSizes.push(params); receivedSizes.push(params);
}; };
await app.connect(appTransport); await app.connect(appTransport);
await app.sendSizeChange({ width: 400, height: 600 }); await app.sendSizeChanged({ width: 400, height: 600 });
expect(receivedSizes).toEqual([{ width: 400, height: 600 }]); expect(receivedSizes).toEqual([{ width: 400, height: 600 }]);
}); });

16
src/app-bridge.ts
View file

@ -33,7 +33,7 @@ import {
import { import {
type McpUiSandboxResourceReadyNotification, type McpUiSandboxResourceReadyNotification,
type McpUiSizeChangeNotification, type McpUiSizeChangedNotification,
type McpUiToolInputNotification, type McpUiToolInputNotification,
type McpUiToolInputPartialNotification, type McpUiToolInputPartialNotification,
type McpUiToolResultNotification, type McpUiToolResultNotification,
@ -57,7 +57,7 @@ import {
McpUiResourceTeardownResultSchema, McpUiResourceTeardownResultSchema,
McpUiSandboxProxyReadyNotification, McpUiSandboxProxyReadyNotification,
McpUiSandboxProxyReadyNotificationSchema, McpUiSandboxProxyReadyNotificationSchema,
McpUiSizeChangeNotificationSchema, McpUiSizeChangedNotificationSchema,
} from "./types"; } from "./types";
export * from "./types"; export * from "./types";
export { PostMessageTransport } from "./message-transport"; export { PostMessageTransport } from "./message-transport";
@ -265,12 +265,12 @@ export class AppBridge extends Protocol<Request, Notification, Result> {
/** /**
* Register a handler for size change notifications from the Guest UI. * Register a handler for size change notifications from the Guest UI.
* *
* The Guest UI sends `ui/notifications/size-change` when its rendered content * The Guest UI sends `ui/notifications/size-changed` when its rendered content
* size changes, typically via ResizeObserver. Set this callback to dynamically * size changes, typically via ResizeObserver. Set this callback to dynamically
* adjust the iframe container dimensions based on the Guest UI's content. * 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 * Note: This is for Guest UI → Host communication. To notify the Guest UI of
* host viewport changes, use {@link app.App.sendSizeChange}. * host viewport changes, use {@link app.App.sendSizeChanged}.
* *
* @example * @example
* ```typescript * ```typescript
@ -284,13 +284,13 @@ export class AppBridge extends Protocol<Request, Notification, Result> {
* }; * };
* ``` * ```
* *
* @see {@link McpUiSizeChangeNotification} for the notification type * @see {@link McpUiSizeChangedNotification} for the notification type
* @see {@link app.App.sendSizeChange} for Host → Guest UI size notifications * @see {@link app.App.sendSizeChanged} for Host → Guest UI size notifications
*/ */
set onsizechange( set onsizechange(
callback: (params: McpUiSizeChangeNotification["params"]) => void, callback: (params: McpUiSizeChangedNotification["params"]) => void,
) { ) {
this.setNotificationHandler(McpUiSizeChangeNotificationSchema, (n) => this.setNotificationHandler(McpUiSizeChangedNotificationSchema, (n) =>
callback(n.params), callback(n.params),
); );
} }

32
src/app.ts
View file

@ -31,7 +31,7 @@ import {
McpUiMessageResultSchema, McpUiMessageResultSchema,
McpUiOpenLinkRequest, McpUiOpenLinkRequest,
McpUiOpenLinkResultSchema, McpUiOpenLinkResultSchema,
McpUiSizeChangeNotification, McpUiSizeChangedNotification,
McpUiToolInputNotification, McpUiToolInputNotification,
McpUiToolInputNotificationSchema, McpUiToolInputNotificationSchema,
McpUiToolInputPartialNotification, McpUiToolInputPartialNotification,
@ -88,7 +88,7 @@ type AppOptions = ProtocolOptions & {
* Automatically report size changes to the host using ResizeObserver. * Automatically report size changes to the host using ResizeObserver.
* *
* When enabled, the App monitors `document.body` and `document.documentElement` * When enabled, the App monitors `document.body` and `document.documentElement`
* for size changes and automatically sends `ui/notifications/size-change` * for size changes and automatically sends `ui/notifications/size-changed`
* notifications to the host. * notifications to the host.
* *
* @default true * @default true
@ -723,7 +723,7 @@ export class App extends Protocol<Request, Notification, Result> {
* *
* @example Manually notify host of size change * @example Manually notify host of size change
* ```typescript * ```typescript
* app.sendSizeChange({ * app.sendSizeChanged({
* width: 400, * width: 400,
* height: 600 * height: 600
* }); * });
@ -731,11 +731,11 @@ export class App extends Protocol<Request, Notification, Result> {
* *
* @returns Promise that resolves when the notification is sent * @returns Promise that resolves when the notification is sent
* *
* @see {@link McpUiSizeChangeNotification} for notification structure * @see {@link McpUiSizeChangedNotification} for notification structure
*/ */
sendSizeChange(params: McpUiSizeChangeNotification["params"]) { sendSizeChanged(params: McpUiSizeChangedNotification["params"]) {
return this.notification(<McpUiSizeChangeNotification>{ return this.notification(<McpUiSizeChangedNotification>{
method: "ui/notifications/size-change", method: "ui/notifications/size-changed",
params, params,
}); });
} }
@ -744,7 +744,7 @@ export class App extends Protocol<Request, Notification, Result> {
* Set up automatic size change notifications using ResizeObserver. * Set up automatic size change notifications using ResizeObserver.
* *
* Observes both `document.documentElement` and `document.body` for size changes * Observes both `document.documentElement` and `document.body` for size changes
* and automatically sends `ui/notifications/size-change` notifications to the host. * and automatically sends `ui/notifications/size-changed` notifications to the host.
* The notifications are debounced using requestAnimationFrame to avoid duplicates. * The notifications are debounced using requestAnimationFrame to avoid duplicates.
* *
* Note: This method is automatically called by `connect()` if the `autoResize` * Note: This method is automatically called by `connect()` if the `autoResize`
@ -759,18 +759,18 @@ export class App extends Protocol<Request, Notification, Result> {
* await app.connect(transport); * await app.connect(transport);
* *
* // Later, enable auto-resize manually * // Later, enable auto-resize manually
* const cleanup = app.setupSizeChangeNotifications(); * const cleanup = app.setupSizeChangedNotifications();
* *
* // Clean up when done * // Clean up when done
* cleanup(); * cleanup();
* ``` * ```
*/ */
setupSizeChangeNotifications() { setupSizeChangedNotifications() {
let scheduled = false; let scheduled = false;
let lastWidth = 0; let lastWidth = 0;
let lastHeight = 0; let lastHeight = 0;
const sendBodySizeChange = () => { const sendBodySizeChanged = () => {
if (scheduled) { if (scheduled) {
return; return;
} }
@ -801,14 +801,14 @@ export class App extends Protocol<Request, Notification, Result> {
if (width !== lastWidth || height !== lastHeight) { if (width !== lastWidth || height !== lastHeight) {
lastWidth = width; lastWidth = width;
lastHeight = height; lastHeight = height;
this.sendSizeChange({ width, height }); this.sendSizeChanged({ width, height });
} }
}); });
}; };
sendBodySizeChange(); sendBodySizeChanged();
const resizeObserver = new ResizeObserver(sendBodySizeChange); const resizeObserver = new ResizeObserver(sendBodySizeChanged);
// Observe both html and body to catch all size changes // Observe both html and body to catch all size changes
resizeObserver.observe(document.documentElement); resizeObserver.observe(document.documentElement);
resizeObserver.observe(document.body); resizeObserver.observe(document.body);
@ -824,7 +824,7 @@ export class App extends Protocol<Request, Notification, Result> {
* 2. Sends `ui/initialize` request with app info and capabilities * 2. Sends `ui/initialize` request with app info and capabilities
* 3. Receives host capabilities and context in response * 3. Receives host capabilities and context in response
* 4. Sends `ui/notifications/initialized` notification * 4. Sends `ui/notifications/initialized` notification
* 5. Sets up auto-resize using {@link setupSizeChangeNotifications} if enabled (default) * 5. Sets up auto-resize using {@link setupSizeChangedNotifications} if enabled (default)
* *
* If initialization fails, the connection is automatically closed and an error * If initialization fails, the connection is automatically closed and an error
* is thrown. * is thrown.
@ -885,7 +885,7 @@ export class App extends Protocol<Request, Notification, Result> {
}); });
if (this.options?.autoResize) { if (this.options?.autoResize) {
this.setupSizeChangeNotifications(); this.setupSizeChangedNotifications();
} }
} catch (error) { } catch (error) {
// Disconnect if initialization fails. // Disconnect if initialization fails.

6
src/react/useAutoResize.ts
View file

@ -5,7 +5,7 @@ import { App } from "../app";
* React hook that automatically reports UI size changes to the host. * React hook that automatically reports UI size changes to the host.
* *
* Uses ResizeObserver to watch `document.body` and `document.documentElement` for * Uses ResizeObserver to watch `document.body` and `document.documentElement` for
* size changes and sends `ui/notifications/size-change` notifications. * size changes and sends `ui/notifications/size-changed` notifications.
* *
* **Note**: This hook is rarely needed since the {@link useApp} hook automatically enables * **Note**: This hook is rarely needed since the {@link useApp} hook automatically enables
* auto-resize by default. This hook is provided for advanced cases where you * auto-resize by default. This hook is provided for advanced cases where you
@ -45,7 +45,7 @@ import { App } from "../app";
* } * }
* ``` * ```
* *
* @see {@link App.setupSizeChangeNotifications} for the underlying implementation * @see {@link App.setupSizeChangedNotifications} for the underlying implementation
* @see {@link useApp} which enables auto-resize by default * @see {@link useApp} which enables auto-resize by default
* @see {@link App} constructor for configuring `autoResize` option * @see {@link App} constructor for configuring `autoResize` option
*/ */
@ -58,6 +58,6 @@ export function useAutoResize(
return; return;
} }
return app.setupSizeChangeNotifications(); return app.setupSizeChangedNotifications();
}, [app, elementRef]); }, [app, elementRef]);
} }

18
src/types.ts
View file

@ -258,11 +258,11 @@ type _VerifySandboxResourceReadyNotification = VerifySchemaMatches<
* **Host → Guest UI**: Sent by the Host when the viewport size changes (e.g., * **Host → Guest UI**: Sent by the Host when the viewport size changes (e.g.,
* window resize, orientation change). This allows the Guest UI to adjust its layout. * window resize, orientation change). This allows the Guest UI to adjust its layout.
* *
* @see {@link app.App.sendSizeChange} for the method to send this from Guest UI * @see {@link app.App.sendSizeChanged} for the method to send this from Guest UI
* @see {@link app.App.setupSizeChangeNotifications} for automatic size reporting * @see {@link app.App.setupSizeChangedNotifications} for automatic size reporting
*/ */
export interface McpUiSizeChangeNotification { export interface McpUiSizeChangedNotification {
method: "ui/notifications/size-change"; method: "ui/notifications/size-changed";
params: { params: {
/** New width in pixels */ /** New width in pixels */
width?: number; width?: number;
@ -272,11 +272,11 @@ export interface McpUiSizeChangeNotification {
} }
/** /**
* Runtime validation schema for {@link McpUiSizeChangeNotification}. * Runtime validation schema for {@link McpUiSizeChangedNotification}.
* @internal * @internal
*/ */
export const McpUiSizeChangeNotificationSchema = z.object({ export const McpUiSizeChangedNotificationSchema = z.object({
method: z.literal("ui/notifications/size-change"), method: z.literal("ui/notifications/size-changed"),
params: z.object({ params: z.object({
width: z.number().optional(), width: z.number().optional(),
height: z.number().optional(), height: z.number().optional(),
@ -285,8 +285,8 @@ export const McpUiSizeChangeNotificationSchema = z.object({
/** @internal - Compile-time verification that schema matches interface */ /** @internal - Compile-time verification that schema matches interface */
type _VerifySizeChangeNotification = VerifySchemaMatches< type _VerifySizeChangeNotification = VerifySchemaMatches<
typeof McpUiSizeChangeNotificationSchema, typeof McpUiSizeChangedNotificationSchema,
McpUiSizeChangeNotification McpUiSizeChangedNotification
>; >;
/** /**