@modelcontextprotocol/ext-apps - v0.0.1
    Preparing search index...

    Interface McpUiHostContext

    Rich context about the host environment provided to Guest UIs.

    Hosts provide this context in the McpUiInitializeResult response and send updates via McpUiHostContextChangedNotification when values change. All fields are optional and Guest UIs should handle missing fields gracefully.

    // Received during initialization
    const result = await app.connect(transport);
    const context = result.hostContext;

    if (context.theme === "dark") {
      document.body.classList.add("dark-mode");
    }
    interface McpUiHostContext {
        availableDisplayModes?: string[];
        deviceCapabilities?: { hover?: boolean; touch?: boolean };
        displayMode?: "inline" | "fullscreen" | "pip" | "carousel";
        locale?: string;
        platform?: "web" | "desktop" | "mobile";
        safeAreaInsets?: {
            bottom: number;
            left: number;
            right: number;
            top: number;
        };
        theme?: "light"
        | "dark"
        | "system";
        timeZone?: string;
        toolInfo?: {
            id: RequestId;
            tool: {
                _meta?: { [key: string]: unknown };
                annotations?: {
                    destructiveHint?: boolean;
                    idempotentHint?: boolean;
                    openWorldHint?: boolean;
                    readOnlyHint?: boolean;
                    title?: string;
                };
                description?: string;
                icons?: { mimeType?: string; sizes?: string[]; src: string }[];
                inputSchema: {
                    properties?: { [key: string]: object };
                    required?: string[];
                    type: "object";
                    [key: string]: unknown;
                };
                name: string;
                outputSchema?: {
                    properties?: { [key: string]: object };
                    required?: string[];
                    type: "object";
                    [key: string]: unknown;
                };
                title?: string;
            };
        };
        userAgent?: string;
        viewport?: {
            height: number;
            maxHeight?: number;
            maxWidth?: number;
            width: number;
        };
    }
    Index

    Properties

    availableDisplayModes? deviceCapabilities? displayMode? locale? platform? safeAreaInsets? theme? timeZone? toolInfo? userAgent? viewport?

    Properties

    availableDisplayModes?: string[]

    Display modes the host supports. Apps can use this to offer mode-switching UI if applicable.

    deviceCapabilities?: { hover?: boolean; touch?: boolean }

    Device input capabilities

    Type Declaration

    • Optionalhover?: boolean

      Whether the device supports hover interactions

    • Optionaltouch?: boolean

      Whether the device supports touch input

    displayMode?: "inline" | "fullscreen" | "pip" | "carousel"

    How the UI is currently displayed.

    "inline"
    locale?: string

    User's language and region preference in BCP 47 format.

    "en-US", "fr-CA", "ja-JP"
    platform?: "web" | "desktop" | "mobile"

    Platform type for responsive design decisions.

    "desktop"
    safeAreaInsets?: { bottom: number; left: number; right: number; top: number }

    Mobile safe area boundaries in pixels. Used to avoid notches, rounded corners, and system UI on mobile devices.

    Type Declaration

    • bottom: number

      Bottom safe area inset in pixels

    • left: number

      Left safe area inset in pixels

    • right: number

      Right safe area inset in pixels

    • top: number

      Top safe area inset in pixels

    theme?: "light" | "dark" | "system"

    Current color theme preference.

    "dark"
    timeZone?: string

    User's timezone in IANA format.

    "America/New_York", "Europe/London", "Asia/Tokyo"
    toolInfo?: {
        id: RequestId;
        tool: {
            _meta?: { [key: string]: unknown };
            annotations?: {
                destructiveHint?: boolean;
                idempotentHint?: boolean;
                openWorldHint?: boolean;
                readOnlyHint?: boolean;
                title?: string;
            };
            description?: string;
            icons?: { mimeType?: string; sizes?: string[]; src: string }[];
            inputSchema: {
                properties?: { [key: string]: object };
                required?: string[];
                type: "object";
                [key: string]: unknown;
            };
            name: string;
            outputSchema?: {
                properties?: { [key: string]: object };
                required?: string[];
                type: "object";
                [key: string]: unknown;
            };
            title?: string;
        };
    }

    Metadata of the tool call that instantiated this App

    Type Declaration

    • id: RequestId

      JSON-RPC id of the tools/call request

    • tool: {
          _meta?: { [key: string]: unknown };
          annotations?: {
              destructiveHint?: boolean;
              idempotentHint?: boolean;
              openWorldHint?: boolean;
              readOnlyHint?: boolean;
              title?: string;
          };
          description?: string;
          icons?: { mimeType?: string; sizes?: string[]; src: string }[];
          inputSchema: {
              properties?: { [key: string]: object };
              required?: string[];
              type: "object";
              [key: string]: unknown;
          };
          name: string;
          outputSchema?: {
              properties?: { [key: string]: object };
              required?: string[];
              type: "object";
              [key: string]: unknown;
          };
          title?: string;
      }

      Tool definition including name, inputSchema, etc.

    userAgent?: string

    Host application identifier.

    "claude-desktop/1.0.0"
    viewport?: {
        height: number;
        maxHeight?: number;
        maxWidth?: number;
        width: number;
    }

    Current and maximum dimensions available to the UI

    Type Declaration

    • height: number

      Current viewport height in pixels

    • OptionalmaxHeight?: number

      Maximum available height in pixels (if constrained)

    • OptionalmaxWidth?: number

      Maximum available width in pixels (if constrained)

    • width: number

      Current viewport width in pixels

    Settings

    Member Visibility

    On This Page

    Properties