MCP Apps useHostStyles - React Theming Hooks

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

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

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

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

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

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

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

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

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

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