Skip to main content
import { useHostStyles, useHostStyleVariables, useHostFonts } from "sunpeak";

​
useHostStyles

Convenience hook combining useHostStyleVariables and useHostFonts. Applies all host styling — CSS variables, theme, and fonts.

​
Signature

function useHostStyles(
  app: App | null,
  initialContext?: McpUiHostContext | null,
): void

​
Usage

function MyApp() {
  const app = useApp();

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

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

​
useHostStyleVariables

Applies host CSS variables and theme. Listens for onhostcontextchanged and applies updates automatically.

​
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.

​
What it applies

  • styles.variables — CSS custom properties via applyHostStyleVariables()
  • theme — data-theme attribute and color-scheme via applyDocumentTheme()

​
useHostFonts

Applies host font CSS. Listens for onhostcontextchanged and applies font updates automatically.

​
Signature

function useHostFonts(
  app: App | null,
  initialContext?: McpUiHostContext | null,
): void

​
What it applies

  • styles.css.fonts — Injected as a <style> tag via applyHostFonts()

​
Usage

function MyApp() {
  const app = useApp();

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

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

​
When to Use Which

HookApplies
useHostStylesCSS variables + theme + fonts (recommended)
useHostStyleVariablesCSS variables + theme only
useHostFontsFonts only