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

    Function useHostStyleVariables

    • React hook that applies host style variables and theme as CSS custom properties.

      This hook listens to host context changes and automatically applies:

      • styles.variables CSS variables to document.documentElement (e.g., --color-background-primary)
      • theme via color-scheme CSS property, enabling light-dark() CSS function support

      The hook also applies styles and theme from the initial host context when the app first connects.

      Note: If the host provides style values using CSS light-dark() function, this hook ensures they work correctly by setting the color-scheme property based on the host's theme preference.

      Parameters

      • app: App | null

        The connected App instance, or null during initialization

      • OptionalinitialContext: McpUiHostContext | null

        Initial host context from the connection (optional). If provided, styles and theme will be applied immediately on mount.

      Returns void

      import { useApp } from '@modelcontextprotocol/ext-apps/react';
      import { useHostStyleVariables } from '@modelcontextprotocol/ext-apps/react';

      function MyApp() {
        const { app, isConnected } = useApp({
          appInfo: { name: "MyApp", version: "1.0.0" },
          capabilities: {},
        });

        // Automatically apply host style variables and theme
        useHostStyleVariables(app);

        return (
          <div style={{ background: 'var(--color-background-primary)' }}>
            Hello!
          </div>
        );
      }

      const [hostContext, setHostContext] = useState<McpUiHostContext | null>(null);

      // ... get initial context from app.connect() result

      useHostStyleVariables(app, hostContext);

    Settings

    Member Visibility