diff --git a/examples/customer-segmentation-server/src/mcp-app.ts b/examples/customer-segmentation-server/src/mcp-app.ts index f17dc20..77e348d 100644 --- a/examples/customer-segmentation-server/src/mcp-app.ts +++ b/examples/customer-segmentation-server/src/mcp-app.ts @@ -4,7 +4,7 @@ import { App, PostMessageTransport, - applyHostStyles, + applyHostStyleVariables, applyDocumentTheme, } from "@modelcontextprotocol/ext-apps"; import { Chart, registerables } from "chart.js"; @@ -454,7 +454,7 @@ app.onhostcontextchanged = (params) => { applyDocumentTheme(params.theme); } if (params.styles?.variables) { - applyHostStyles(params.styles.variables); + applyHostStyleVariables(params.styles.variables); } // Recreate chart to pick up new colors if (state.chart && (params.theme || params.styles?.variables)) { @@ -470,7 +470,7 @@ app.connect(new PostMessageTransport(window.parent)).then(() => { applyDocumentTheme(ctx.theme); } if (ctx?.styles?.variables) { - applyHostStyles(ctx.styles.variables); + applyHostStyleVariables(ctx.styles.variables); } }); diff --git a/specification/draft/apps.mdx b/specification/draft/apps.mdx index 3c98eeb..d948567 100644 --- a/specification/draft/apps.mdx +++ b/specification/draft/apps.mdx @@ -587,7 +587,7 @@ type McpUiStyleVariableKey = ... } ``` -- Apps can use the `applyHostStyles` utility (or `useHostStyles` if they prefer a React hook) to easily populate the host-provided CSS variables into their style sheet +- Apps can use the `applyHostStyleVariables` utility (or `useHostStyleVariables` if they prefer a React hook) to easily populate the host-provided CSS variables into their style sheet - Apps can use the `applyDocumentTheme` utility (or `useDocumentTheme` if they prefer a React hook) to easily respond to Host Context `theme` changes in a way that is compatible with the host's light/dark color variables Example usage of standardized CSS variables: diff --git a/src/app.ts b/src/app.ts index b5233df..85f9e59 100644 --- a/src/app.ts +++ b/src/app.ts @@ -48,7 +48,7 @@ import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js"; export { PostMessageTransport } from "./message-transport"; export * from "./types"; export { - applyHostStyles, + applyHostStyleVariables, getDocumentTheme, applyDocumentTheme, } from "./styles"; diff --git a/src/react/index.tsx b/src/react/index.tsx index 09e3b87..7759493 100644 --- a/src/react/index.tsx +++ b/src/react/index.tsx @@ -9,7 +9,7 @@ * ## Main Exports * * - {@link useApp} - React hook to create and connect an MCP App - * - {@link useHostStyles} - React hook to apply host styles as CSS variables + * - {@link useHostStyleVariables} - React hook to apply host style variables and theme * - {@link useDocumentTheme} - React hook for reactive document theme * - {@link useAutoResize} - React hook for manual auto-resize control (rarely needed) * diff --git a/src/react/useHostStyles.ts b/src/react/useHostStyles.ts index a259542..90c246a 100644 --- a/src/react/useHostStyles.ts +++ b/src/react/useHostStyles.ts @@ -1,10 +1,10 @@ import { useEffect, useRef } from "react"; import { App } from "../app"; -import { applyDocumentTheme, applyHostStyles } from "../styles"; +import { applyDocumentTheme, applyHostStyleVariables } from "../styles"; import { McpUiHostContext } from "../types"; /** - * React hook that applies host styles and theme as CSS custom properties. + * 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`) @@ -24,7 +24,7 @@ import { McpUiHostContext } from "../types"; * @example Basic usage with useApp * ```tsx * import { useApp } from '@modelcontextprotocol/ext-apps/react'; - * import { useHostStyles } from '@modelcontextprotocol/ext-apps/react'; + * import { useHostStyleVariables } from '@modelcontextprotocol/ext-apps/react'; * * function MyApp() { * const { app, isConnected } = useApp({ @@ -32,8 +32,8 @@ import { McpUiHostContext } from "../types"; * capabilities: {}, * }); * - * // Automatically apply host styles and theme - * useHostStyles(app); + * // Automatically apply host style variables and theme + * useHostStyleVariables(app); * * return ( *
@@ -49,14 +49,14 @@ import { McpUiHostContext } from "../types"; * * // ... get initial context from app.connect() result * - * useHostStyles(app, hostContext); + * useHostStyleVariables(app, hostContext); * ``` * - * @see {@link applyHostStyles} for the underlying styles function + * @see {@link applyHostStyleVariables} for the underlying styles function * @see {@link applyDocumentTheme} for the underlying theme function * @see {@link McpUiStyles} for available CSS variables */ -export function useHostStyles( +export function useHostStyleVariables( app: App | null, initialContext?: McpUiHostContext | null, ): void { @@ -71,7 +71,7 @@ export function useHostStyles( applyDocumentTheme(initialContext.theme); } if (initialContext?.styles?.variables) { - applyHostStyles(initialContext.styles.variables); + applyHostStyleVariables(initialContext.styles.variables); } if (initialContext?.theme || initialContext?.styles?.variables) { initialApplied.current = true; @@ -89,7 +89,7 @@ export function useHostStyles( applyDocumentTheme(params.theme); } if (params.styles?.variables) { - applyHostStyles(params.styles.variables); + applyHostStyleVariables(params.styles.variables); } }; }, [app]); diff --git a/src/styles.ts b/src/styles.ts index 882f6c5..baa04e6 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -74,7 +74,7 @@ export function applyDocumentTheme(theme: McpUiTheme): void { } /** - * Apply host styles as CSS custom properties on an element. + * Apply host style variables as CSS custom properties on an element. * * This function takes the `variables` object from `McpUiHostContext.styles` and sets * each CSS variable on the specified root element (defaults to `document.documentElement`). @@ -84,13 +84,13 @@ export function applyDocumentTheme(theme: McpUiTheme): void { * @param styles - The styles object from `McpUiHostContext.styles.variables` * @param root - The element to apply styles to (defaults to `document.documentElement`) * - * @example Apply styles from host context + * @example Apply style variables from host context * ```typescript - * import { applyHostStyles } from '@modelcontextprotocol/ext-apps'; + * import { applyHostStyleVariables } from '@modelcontextprotocol/ext-apps'; * * app.onhostcontextchanged = (params) => { * if (params.styles?.variables) { - * applyHostStyles(params.styles.variables); + * applyHostStyleVariables(params.styles.variables); * } * }; * ``` @@ -98,13 +98,13 @@ export function applyDocumentTheme(theme: McpUiTheme): void { * @example Apply to a specific element * ```typescript * const container = document.getElementById('app-root'); - * applyHostStyles(hostContext.styles?.variables, container); + * applyHostStyleVariables(hostContext.styles?.variables, container); * ``` * * @see {@link McpUiStyles} for the available CSS variables * @see {@link McpUiHostContext} for the full host context structure */ -export function applyHostStyles( +export function applyHostStyleVariables( styles: McpUiStyles, root: HTMLElement = document.documentElement, ): void {