Improve consistency and organization of examples for AI learning

- Add `.gitignore` files to all 19 examples (`node_modules/`, `dist/`)
- Replace custom `log` objects with standard `console` methods
- Add `ontoolcancelled` handler to all `basic-server-*` examples
- Add host styling integration (`applyDocumentTheme`, `applyHostFonts`,
  `applyHostStyleVariables`) to non-React `basic-server-*` examples
- Add section headers for better code organization in feature examples
- Update READMEs with Build System section explaining single-file
  bundling

These changes make examples more consistent and easier to adapt.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jonathan Hefner 2026-01-12 17:06:44 -06:00
commit 4140565b77

View file

@ -12,7 +12,9 @@ import { createRoot } from "react-dom/client";
import ThreeJSApp from "./threejs-app.tsx";
import "./global.css";
const APP_INFO = { name: "Three.js Widget", version: "1.0.0" };
// =============================================================================
// Types
// =============================================================================
/**
* Props passed to the widget component.
@ -37,6 +39,10 @@ export interface WidgetProps<TToolInput = Record<string, unknown>> {
sendLog: App["sendLog"];
}
// =============================================================================
// MCP App Wrapper
// =============================================================================
function McpAppWrapper() {
const [toolInputs, setToolInputs] = useState<Record<string, unknown> | null>(
null,
@ -49,7 +55,7 @@ function McpAppWrapper() {
const [hostContext, setHostContext] = useState<McpUiHostContext | null>(null);
const { app, error } = useApp({
appInfo: APP_INFO,
appInfo: { name: "Three.js Widget", version: "1.0.0" },
capabilities: {},
onAppCreated: (app) => {
// Complete tool input (streaming finished)