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

    Function useHostFonts

    • React hook that applies host fonts from CSS.

      This hook listens to host context changes and automatically applies:

      • styles.css.fonts as a <style> tag for custom fonts

      The CSS can contain @font-face rules for self-hosted fonts, @import statements for Google Fonts or other font services, or both.

      The hook also applies fonts from the initial host context when the app first connects.

      Parameters

      • app: App | null

        The connected App instance, or null during initialization

      • OptionalinitialContext: McpUiHostContext | null

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

      Returns void

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

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

        // Automatically apply host fonts
        useHostFonts(app);

        return (
          <div style={{ fontFamily: 'var(--font-sans)' }}>
            Hello!
          </div>
        );
      }

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

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

      useHostFonts(app, hostContext);

    Settings

    Member Visibility