Skip to main content
MCP Apps SDK 
import { useHostStyleVariables } from "@modelcontextprotocol/ext-apps/react";

​
Overview

useHostStyleVariables applies host-provided CSS custom properties and the document theme to the page. It listens for onhostcontextchanged notifications and updates styles automatically when the host’s theme or style variables change. This hook handles two responsibilities:
  • CSS variables — Applies styles.variables from the host context as CSS custom properties via applyHostStyleVariables()
  • Document theme — Sets the data-theme attribute and color-scheme property via applyDocumentTheme()
For font handling, use useHostFonts separately, or use useHostStyles to apply everything at once.

​
Signature

function useHostStyleVariables(
  app: App | null,
  initialContext?: McpUiHostContext | null,
): void
​
app
App | null
required
The connected App instance from useApp, or null during initialization.
​
initialContext
McpUiHostContext | null
Initial host context from app?.getHostContext(). Pass this to apply styles immediately on mount without waiting for the first context change notification.

​
Usage

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

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

  useHostStyleVariables(app, app?.getHostContext());

  return (
    <div style={{
      background: "var(--color-background-primary)",
      color: "var(--color-text-primary)",
    }}>
      Styled with host variables
    </div>
  );
}

​
What It Applies

The host sends style variables as part of McpUiHostContext.styles.variables. These are CSS custom properties that match the host’s design system. See CSS Variables for the full list of available variable keys. The hook also applies the theme from McpUiHostContext.theme, setting:
  • document.documentElement.dataset.theme to "light" or "dark"
  • document.documentElement.style.colorScheme to match

​
When to Use

HookAppliesUse when
useHostStylesCSS variables + theme + fontsYou want everything (recommended)
useHostStyleVariablesCSS variables + theme onlyYou handle fonts separately or don’t need them
useHostFontsFonts onlyYou only need host fonts
The sunpeak framework provides useHostContext which auto-applies host styles in React components.