feat(threejs): add visibility optimization, host styling, transparent background

- Add visibility-based animation pause (IntersectionObserver + wrapped rAF)
- Zero CPU usage when widget scrolls out of view
- Apply host style variables via useHostStyles
- Support transparent WebGL background (alpha: true)
- Use light-dark() for theme-aware fallback colors
- Tool no longer echoes code back in result
- Document performance features in README
This commit is contained in:
Anton Pidkuiko MacBook 2026-01-17 23:19:34 +00:00
commit d60224f363
No known key found for this signature in database

View file

@ -5,7 +5,7 @@
* props to the actual widget component.
*/
import type { App, McpUiHostContext } from "@modelcontextprotocol/ext-apps";
import { useApp } from "@modelcontextprotocol/ext-apps/react";
import { useApp, useHostStyles } from "@modelcontextprotocol/ext-apps/react";
import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
import { StrictMode, useState, useCallback, useEffect } from "react";
import { createRoot } from "react-dom/client";
@ -78,6 +78,9 @@ function McpAppWrapper() {
},
});
// Apply host styling (theme, CSS variables, fonts)
useHostStyles(app);
// Get initial host context after connection
useEffect(() => {
if (app) {