pizzaz-mcp 1.0.0

package/src/types.ts

@@ -0,0 +1,103 @@
+export type OpenAiGlobals<
+  ToolInput = UnknownObject,
+  ToolOutput = UnknownObject,
+  ToolResponseMetadata = UnknownObject,
+  WidgetState = UnknownObject
+> = {
+  // visuals
+  theme: Theme;
+
+  userAgent: UserAgent;
+  locale: string;
+
+  // layout
+  maxHeight: number;
+  displayMode: DisplayMode;
+  safeArea: SafeArea;
+
+  // state
+  toolInput: ToolInput;
+  toolOutput: ToolOutput | null;
+  toolResponseMetadata: ToolResponseMetadata | null;
+  widgetState: WidgetState | null;
+  setWidgetState: (state: WidgetState) => Promise<void>;
+};
+
+// currently copied from types.ts in chatgpt/web-sandbox.
+// Will eventually use a public package.
+type API = {
+  callTool: CallTool;
+  sendFollowUpMessage: (args: { prompt: string }) => Promise<void>;
+  openExternal(payload: { href: string }): void;
+
+  // Layout controls
+  requestDisplayMode: RequestDisplayMode;
+  requestModal: (args: { title?: string; params?: UnknownObject }) => Promise<unknown>;
+  requestClose: () => Promise<void>;
+};
+
+export type UnknownObject = Record<string, unknown>;
+
+export type Theme = "light" | "dark";
+
+export type SafeAreaInsets = {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+};
+
+export type SafeArea = {
+  insets: SafeAreaInsets;
+};
+
+export type DeviceType = "mobile" | "tablet" | "desktop" | "unknown";
+
+export type UserAgent = {
+  device: { type: DeviceType };
+  capabilities: {
+    hover: boolean;
+    touch: boolean;
+  };
+};
+
+/** Display mode */
+export type DisplayMode = "pip" | "inline" | "fullscreen";
+export type RequestDisplayMode = (args: { mode: DisplayMode }) => Promise<{
+  /**
+   * The granted display mode. The host may reject the request.
+   * For mobile, PiP is always coerced to fullscreen.
+   */
+  mode: DisplayMode;
+}>;
+
+export type CallToolResponse = {
+  result: string;
+};
+
+/** Calling APIs */
+export type CallTool = (
+  name: string,
+  args: Record<string, unknown>
+) => Promise<CallToolResponse>;
+
+/** Extra events */
+export const SET_GLOBALS_EVENT_TYPE = "openai:set_globals";
+export class SetGlobalsEvent extends CustomEvent<{
+  globals: Partial<OpenAiGlobals>;
+}> {
+  readonly type = SET_GLOBALS_EVENT_TYPE;
+}
+
+/**
+ * Global oai object injected by the web sandbox for communicating with chatgpt host page.
+ */
+declare global {
+  interface Window {
+    openai: API & OpenAiGlobals;
+  }
+
+  interface WindowEventMap {
+    [SET_GLOBALS_EVENT_TYPE]: SetGlobalsEvent;
+  }
+}

package/src/use-display-mode.ts

@@ -0,0 +1,6 @@
+import { useOpenAiGlobal } from "./use-openai-global";
+import { type DisplayMode } from "./types";
+
+export const useDisplayMode = (): DisplayMode | null => {
+  return useOpenAiGlobal("displayMode");
+};

package/src/use-max-height.ts

@@ -0,0 +1,5 @@
+import { useOpenAiGlobal } from "./use-openai-global";
+
+export const useMaxHeight = (): number | null => {
+  return useOpenAiGlobal("maxHeight");
+};

package/src/use-openai-global.ts

@@ -0,0 +1,37 @@
+import { useSyncExternalStore } from "react";
+import {
+  SET_GLOBALS_EVENT_TYPE,
+  SetGlobalsEvent,
+  type OpenAiGlobals,
+} from "./types";
+
+export function useOpenAiGlobal<K extends keyof OpenAiGlobals>(
+  key: K
+): OpenAiGlobals[K] | null {
+  return useSyncExternalStore(
+    (onChange) => {
+      if (typeof window === "undefined") {
+        return () => {};
+      }
+
+      const handleSetGlobal = (event: SetGlobalsEvent) => {
+        const value = event.detail.globals[key];
+        if (value === undefined) {
+          return;
+        }
+
+        onChange();
+      };
+
+      window.addEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobal, {
+        passive: true,
+      });
+
+      return () => {
+        window.removeEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobal);
+      };
+    },
+    () => window.openai?.[key] ?? null,
+    () => window.openai?.[key] ?? null
+  );
+}

package/src/use-widget-props.ts

@@ -0,0 +1,14 @@
+import { useOpenAiGlobal } from "./use-openai-global";
+
+export function useWidgetProps<T extends Record<string, unknown>>(
+  defaultState?: T | (() => T)
+): T {
+  const props = useOpenAiGlobal("toolOutput") as T;
+
+  const fallback =
+    typeof defaultState === "function"
+      ? (defaultState as () => T | null)()
+      : defaultState ?? null;
+
+  return props ?? fallback;
+}

package/src/use-widget-state.ts

@@ -0,0 +1,46 @@
+import { useCallback, useEffect, useState, type SetStateAction } from "react";
+import { useOpenAiGlobal } from "./use-openai-global";
+import type { UnknownObject } from "./types";
+
+export function useWidgetState<T extends UnknownObject>(
+  defaultState: T | (() => T)
+): readonly [T, (state: SetStateAction<T>) => void];
+export function useWidgetState<T extends UnknownObject>(
+  defaultState?: T | (() => T | null) | null
+): readonly [T | null, (state: SetStateAction<T | null>) => void];
+export function useWidgetState<T extends UnknownObject>(
+  defaultState?: T | (() => T | null) | null
+): readonly [T | null, (state: SetStateAction<T | null>) => void] {
+  const widgetStateFromWindow = useOpenAiGlobal("widgetState") as T;
+
+  const [widgetState, _setWidgetState] = useState<T | null>(() => {
+    if (widgetStateFromWindow != null) {
+      return widgetStateFromWindow;
+    }
+
+    return typeof defaultState === "function"
+      ? defaultState()
+      : defaultState ?? null;
+  });
+
+  useEffect(() => {
+    _setWidgetState(widgetStateFromWindow);
+  }, [widgetStateFromWindow]);
+
+  const setWidgetState = useCallback(
+    (state: SetStateAction<T | null>) => {
+      _setWidgetState((prevState) => {
+        const newState = typeof state === "function" ? state(prevState) : state;
+
+        if (newState != null && typeof window !== "undefined") {
+          void window.openai?.setWidgetState?.(newState);
+        }
+
+        return newState;
+      });
+    },
+    []
+  );
+
+  return [widgetState, setWidgetState] as const;
+}

package/tailwind.config.ts

@@ -0,0 +1,7 @@
+export default {
+  content: [
+    "./src/**/*.{html,js,ts,jsx,tsx}",
+  ],
+  theme: {},
+  plugins: [],
+};

package/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "types": ["vite/client"],
+    "baseUrl": ".",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "vite-env.d.ts"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "strict": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "types": ["node"]
+  },
+  "include": ["server/**/*.ts", "build-all.mts", "vite.config.mts"]
+}

package/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/vite.config.mts

@@ -0,0 +1,232 @@
+import { defineConfig, type Plugin } from "vite";
+import react from "@vitejs/plugin-react";
+import fg from "fast-glob";
+import path from "node:path";
+import fs from "node:fs";
+import tailwindcss from "@tailwindcss/vite";
+
+function buildInputs() {
+  const files = fg.sync("src/**/index.{tsx,jsx}", { dot: false });
+  return Object.fromEntries(
+    files.map((f) => [path.basename(path.dirname(f)), path.resolve(f)])
+  );
+}
+
+const toFs = (abs: string) => "/@fs/" + abs.replace(/\\/g, "/");
+
+const toServerRoot = (abs: string) => {
+  const rel = path.relative(process.cwd(), abs).replace(/\\/g, "/");
+  // If it's not really relative (different drive or absolute), fall back to fs URL
+  if (!rel || rel.startsWith("..") || path.isAbsolute(rel)) return toFs(abs);
+  return "./" + rel;
+};
+
+function multiEntryDevEndpoints(options: {
+  entries: Record<string, string>;
+  globalCss?: string[];
+  perEntryCssGlob?: string;
+  perEntryCssIgnore?: string[];
+}): Plugin {
+  const {
+    entries,
+    globalCss = ["src/index.css"],
+    perEntryCssGlob = "**/*.{css,pcss,scss,sass}",
+    perEntryCssIgnore = ["**/*.module.*"],
+  } = options;
+
+  const V_PREFIX = "\0multi-entry:"; // Rollup “virtual module” prefix
+
+  const HIDE_FROM_HOME = new Set(["flashcards", "daw"]);
+
+  const renderIndexHtml = (names: string[]): string => `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>ecosystem ui examples</title>
+  <style>
+    body { font: 15px/1.5 system-ui, sans-serif; margin: 32px; color: #1f2933; }
+    h1 { font-size: 20px; margin-bottom: 12px; }
+    ul { padding-left: 18px; }
+    li { margin-bottom: 6px; }
+    a { color: #2563eb; text-decoration: none; }
+    a:hover { text-decoration: underline; }
+    code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; margin-left: 6px; color: #64748b; }
+  </style>
+</head>
+<body>
+  <h1>Examples</h1>
+  <ul>
+    ${names
+      .filter((n) => !HIDE_FROM_HOME.has(n))
+      .toSorted()
+      .map(
+        (name) =>
+          `<li><a href="/${name}.html">${name}</a><code>/${name}.html</code></li>`
+      )
+      .join("\n    ")}
+  </ul>
+</body>
+</html>`;
+
+  const renderDevHtml = (name: string): string => `<!doctype html>
+<html>
+<head>
+  <script type="module" src="/${name}.js"></script>
+  <link rel="stylesheet" href="/${name}.css">
+  </head>
+<body>
+  <div id="${name}-root"></div>
+</body>
+</html>`;
+
+  return {
+    name: "multi-entry-dev-endpoints",
+    configureServer(server) {
+      const names = Object.keys(entries);
+      const list = names
+        .map((n) => `/${n}.html, /${n}.js, /${n}.css`)
+        .join("\n  ");
+      server.config.logger.info(`\nDev endpoints:\n  ${list}\n`);
+
+      server.middlewares.use((req, res, next) => {
+        try {
+          if (req.method !== "GET" || !req.url) return next();
+          const url = req.url.split("?")[0];
+          if (url === "/" || url === "" || url === "/index.html") {
+            const html = renderIndexHtml(names);
+            res.setHeader("Content-Type", "text/html; charset=utf-8");
+            res.end(html);
+            return;
+          }
+          const bareMatch = url.match(/^\/?([\w-]+)\/?$/);
+          if (bareMatch && entries[bareMatch[1]]) {
+            const name = bareMatch[1];
+            const html = renderDevHtml(name);
+            res.setHeader("Content-Type", "text/html; charset=utf-8");
+            res.end(html);
+            return;
+          }
+
+          if (!url.endsWith(".html")) return next();
+
+          const m = url.match(/^\/?([\w-]+)\.html$/);
+          if (!m) return next();
+          const name = m[1];
+          if (!entries[name]) return next();
+
+          const html = renderDevHtml(name);
+          res.setHeader("Content-Type", "text/html");
+          res.end(html);
+          return;
+        } catch {
+          // fall through
+        }
+        next();
+      });
+    },
+    resolveId(id: string) {
+      // Map request paths to virtual ids
+      if (id.startsWith("/")) id = id.slice(1);
+      if (id.endsWith(".js")) {
+        const name = id.slice(0, -3);
+        if (entries[name]) return `${V_PREFIX}entry:${name}`;
+      }
+      if (id.endsWith(".css")) {
+        const name = id.slice(0, -4);
+        if (entries[name]) return `${V_PREFIX}style:${name}.css`;
+      }
+      if (id.startsWith(V_PREFIX)) return id;
+      return null;
+    },
+    load(id: string) {
+      if (!id.startsWith(V_PREFIX)) return null;
+
+      const rest = id.slice(V_PREFIX.length); // "entry:foo" or "style:foo.css"
+      const [kind, nameWithExt] = rest.split(":", 2);
+      const name = nameWithExt.replace(/\.css$/, "");
+      const entry = entries[name];
+      if (!entry) return null;
+
+      const entryDir = path.dirname(entry);
+
+      // Collect CSS (global first for stable cascade)
+      const globals = globalCss
+        .map((p) => path.resolve(p))
+        .filter((p) => fs.existsSync(p));
+      const perEntry = fg.sync(perEntryCssGlob, {
+        cwd: entryDir,
+        absolute: true,
+        dot: false,
+        ignore: perEntryCssIgnore,
+      });
+
+      if (kind === "style") {
+        const allCss = [...globals, ...perEntry]; // absolute paths on disk
+        const lines = [
+          `@source "./src";`,
+          ...allCss.map((p) => `@import "${toServerRoot(p)}";`),
+        ];
+        return lines.join("\n");
+      }
+
+      if (kind === "entry") {
+        const spec = toFs(entry);
+
+        const lines: string[] = [];
+
+        // Import Vite HMR client from root
+        lines.push(`import "/@vite/client";`);
+
+        lines.push(`
+import RefreshRuntime from "/@react-refresh";
+
+if (!window.__vite_plugin_react_preamble_installed__) {
+    RefreshRuntime.injectIntoGlobalHook(window);
+    window.$RefreshReg$ = () => {};
+    window.$RefreshSig$ = () => (type) => type;
+    window.__vite_plugin_react_preamble_installed__ = true;
+}
+`);
+
+        lines.push(`import "/${name}.css";`);
+        lines.push(`await import(${JSON.stringify(spec)});`);
+
+        return lines.join("\n");
+      }
+
+      return null;
+    },
+  };
+}
+
+const inputs = buildInputs();
+
+export default defineConfig(({}) => ({
+  plugins: [
+    tailwindcss(),
+    react(),
+    multiEntryDevEndpoints({ entries: inputs }),
+  ],
+  cacheDir: "node_modules/.vite-react",
+  server: {
+    port: 4444,
+    strictPort: true,
+    cors: true,
+  },
+  esbuild: {
+    jsx: "automatic",
+    jsxImportSource: "react",
+    target: "es2022",
+  },
+  build: {
+    target: "es2022",
+    sourcemap: true,
+    minify: "esbuild",
+    outDir: "assets",
+    assetsDir: ".",
+    rollupOptions: {
+      input: inputs,
+      preserveEntrySignatures: "strict",
+    },
+  },
+}));