mcp-app-studio 0.3.2 → 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 AgentbaseAI Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/{bridge-BOSEqpaS.d.ts → bridge-BXW_-p2R.d.ts}

@@ -36,6 +36,11 @@ declare class MCPBridge implements ExtendedBridge {
     }, appCapabilities?: AppCapabilities, options?: MCPBridgeOptions);
     connect(): Promise<void>;
     getHostContext(): HostContext | null;
+    /**
+     * Maps SDK host context to our HostContext type.
+     * The SDK returns a well-defined structure matching HostContext properties
+     * (theme, locale, displayMode, etc.), so this cast is safe at runtime.
+     */
     private mapHostContext;
     onToolInput(callback: ToolInputCallback): () => void;
     onToolInputPartial(callback: ToolInputPartialCallback): () => void;

package/dist/{chunk-QO43ZGJI.js → chunk-2OPSDEPI.js}

@@ -22,20 +22,20 @@ var MCPBridge = class {
       { autoResize }
     );
     this.app.ontoolinput = (params) => {
-      this.toolInputCallbacks.forEach(
-        (cb) => cb(params.arguments)
-      );
+      const args = params.arguments ?? {};
+      this.toolInputCallbacks.forEach((cb) => cb(args));
     };
     this.app.ontoolinputpartial = (params) => {
-      this.toolInputPartialCallbacks.forEach(
-        (cb) => cb(params.arguments)
-      );
+      const args = params.arguments ?? {};
+      this.toolInputPartialCallbacks.forEach((cb) => cb(args));
     };
     this.app.ontoolresult = (params) => {
       const result = {
-        content: params.content,
-        structuredContent: params.structuredContent
+        content: params.content
       };
+      if (params.structuredContent !== void 0) {
+        result.structuredContent = params.structuredContent;
+      }
       if (params.isError !== void 0) {
         result.isError = params.isError;
       }
@@ -45,7 +45,8 @@ var MCPBridge = class {
       this.toolResultCallbacks.forEach((cb) => cb(result));
     };
     this.app.ontoolcancelled = (params) => {
-      this.toolCancelledCallbacks.forEach((cb) => cb(params.reason));
+      const reason = params.reason ?? "";
+      this.toolCancelledCallbacks.forEach((cb) => cb(reason));
     };
     this.app.onhostcontextchanged = (params) => {
       const ctx = this.mapHostContext(params);
@@ -65,6 +66,11 @@ var MCPBridge = class {
     const ctx = this.app.getHostContext();
     return ctx ? this.mapHostContext(ctx) : null;
   }
+  /**
+   * Maps SDK host context to our HostContext type.
+   * The SDK returns a well-defined structure matching HostContext properties
+   * (theme, locale, displayMode, etc.), so this cast is safe at runtime.
+   */
   mapHostContext(ctx) {
     return ctx;
   }
@@ -132,7 +138,9 @@ var MCPBridge = class {
   }
   setCallToolHandler(handler) {
     this.app.oncalltool = async (params, extra) => {
-      const result = await handler(params.name, params.arguments ?? {}, extra);
+      const name = params.name;
+      const args = params.arguments ?? {};
+      const result = await handler(name, args, extra);
       const content = result.content?.map((c) => {
         if (c.type === "text") {
           return { type: "text", text: c.text };
@@ -154,7 +162,8 @@ var MCPBridge = class {
   }
   setListToolsHandler(handler) {
     this.app.onlisttools = async (params) => {
-      const tools = await handler(params?.cursor);
+      const cursor = params?.cursor;
+      const tools = await handler(cursor);
       return { tools };
     };
   }

package/dist/{chunk-L2RRNF7V.js → chunk-EPZCYA26.js}

@@ -3,6 +3,14 @@ import {
 } from "./chunk-4LAH4JH6.js";
 
 // src/platforms/chatgpt/bridge.ts
+function hostContextChanged(prev, next) {
+  if (!prev) return true;
+  const keys = /* @__PURE__ */ new Set([...Object.keys(prev), ...Object.keys(next)]);
+  for (const key of keys) {
+    if (prev[key] !== next[key]) return true;
+  }
+  return false;
+}
 var ChatGPTBridge = class {
   platform = "chatgpt";
   capabilities = CHATGPT_CAPABILITIES;
@@ -37,6 +45,14 @@ var ChatGPTBridge = class {
     }
     this.connected = true;
   }
+  disconnect() {
+    if (!this.connected) return;
+    window.removeEventListener("openai:set_globals", this.handleGlobalsChange);
+    this.connected = false;
+    this.toolInputCallbacks.clear();
+    this.toolResultCallbacks.clear();
+    this.contextCallbacks.clear();
+  }
   buildHostContext() {
     const g = this.openai;
     return {
@@ -57,7 +73,7 @@ var ChatGPTBridge = class {
   }
   handleGlobalsChange = () => {
     const newContext = this.buildHostContext();
-    if (JSON.stringify(newContext) !== JSON.stringify(this.lastContext)) {
+    if (hostContextChanged(this.lastContext, newContext)) {
       this.lastContext = newContext;
       this.contextCallbacks.forEach((cb) => cb(newContext));
     }
@@ -87,7 +103,13 @@ var ChatGPTBridge = class {
   onToolResult(callback) {
     this.toolResultCallbacks.add(callback);
     if (this.connected && this.openai.toolOutput) {
-      callback({ structuredContent: this.openai.toolOutput });
+      const result = {
+        structuredContent: this.openai.toolOutput
+      };
+      if (this.openai.toolResponseMetadata) {
+        result._meta = this.openai.toolResponseMetadata;
+      }
+      callback(result);
     }
     return () => this.toolResultCallbacks.delete(callback);
   }

package/dist/cli/index.js

@@ -61,7 +61,12 @@ function emptyDir(dir) {
     fs.rmSync(path.join(dir, file), { recursive: true, force: true });
   }
 }
-function updatePackageJson(dir, name, description) {
+var DEPENDENCY_OVERRIDES = {
+  "@assistant-ui/react": "^0.12.3",
+  "@assistant-ui/react-ai-sdk": "^1.3.3",
+  "@assistant-ui/react-markdown": "^0.12.1"
+};
+function updatePackageJson(dir, name, description, includeServer) {
   const pkgPath = path.join(dir, "package.json");
   if (!fs.existsSync(pkgPath)) return;
   try {
@@ -73,6 +78,18 @@ function updatePackageJson(dir, name, description) {
     if (description) {
       pkg["description"] = description;
     }
+    if (includeServer) {
+      const scripts = pkg["scripts"] ?? {};
+      scripts["postinstall"] = "cd server && npm install";
+      pkg["scripts"] = scripts;
+    }
+    const deps = pkg["dependencies"] ?? {};
+    for (const [dep, version] of Object.entries(DEPENDENCY_OVERRIDES)) {
+      if (deps[dep]) {
+        deps[dep] = version;
+      }
+    }
+    pkg["dependencies"] = deps;
     fs.writeFileSync(pkgPath, `${JSON.stringify(pkg, null, 2)}
 `);
   } catch (error) {
@@ -142,13 +159,18 @@ ${pc.bold("Usage:")}
   npx mcp-app-studio [project-name] [options]
 
 ${pc.bold("Options:")}
-  --help, -h     Show this help message
-  --version, -v  Show version number
+  --help, -h              Show this help message
+  --version, -v           Show version number
+  -y, --yes               Non-interactive mode (use defaults or flag values)
+  --template <name>       Template to use: minimal, poi-map (default: minimal)
+  --include-server        Include MCP server (default when not using -y)
+  --no-server             Do not include MCP server
+  --description <text>    App description
 
 ${pc.bold("Examples:")}
   npx mcp-app-studio my-app
   npx mcp-app-studio .          ${pc.dim("# Use current directory")}
-  npx mcp-app-studio
+  npx mcp-app-studio my-app -y --template poi-map --include-server
 
 ${pc.bold("Learn more:")}
   Documentation: https://github.com/assistant-ui/mcp-app-studio
@@ -175,6 +197,10 @@ var TEMPLATE_EXPORT_CONFIG = {
     exportName: "POIMapSDK"
   }
 };
+var TEMPLATE_DEFAULT_COMPONENT = {
+  minimal: "welcome",
+  "poi-map": "poi-map"
+};
 function generateComponentRegistry(components) {
   const imports = [];
   const entries = [];
@@ -265,6 +291,9 @@ export const workbenchComponents: WorkbenchComponentEntry[] = [
 ${entries.join(",\n")}
 ];
 
+// The main app component (first in the list)
+export const appComponent = workbenchComponents[0]!;
+
 export function getComponent(id: string): WorkbenchComponentEntry | undefined {
   return workbenchComponents.find((c) => c.id === id);
 }
@@ -318,6 +347,37 @@ function updateExportScriptDefaults(targetDir, entryPoint, exportName) {
   );
   fs2.writeFileSync(exportScriptPath, content);
 }
+function generateWorkbenchIndexExport(components) {
+  const exports = [];
+  if (components.includes("welcome")) {
+    exports.push("WelcomeCardSDK");
+  }
+  if (components.includes("poi-map")) {
+    exports.push("POIMapSDK");
+  }
+  return exports.length > 0 ? `export { ${exports.join(", ")} } from "./wrappers";` : "// No SDK exports";
+}
+function updateWorkbenchIndex(targetDir, components) {
+  const indexPath = path2.join(targetDir, "lib/workbench/index.ts");
+  let content = fs2.readFileSync(indexPath, "utf-8");
+  const wrappersExportRegex = /export \{[^}]*\} from "\.\/wrappers";/;
+  const newExport = generateWorkbenchIndexExport(components);
+  if (wrappersExportRegex.test(content)) {
+    content = content.replace(wrappersExportRegex, newExport);
+  } else {
+    content = content.trimEnd() + "\n\n" + newExport + "\n";
+  }
+  fs2.writeFileSync(indexPath, content);
+}
+function updateWorkbenchStoreDefault(targetDir, defaultComponent) {
+  const storePath = path2.join(targetDir, "lib/workbench/store.ts");
+  let content = fs2.readFileSync(storePath, "utf-8");
+  content = content.replace(
+    /selectedComponent: "[^"]+"/,
+    `selectedComponent: "${defaultComponent}"`
+  );
+  fs2.writeFileSync(storePath, content);
+}
 function applyTemplate(targetDir, template) {
   const components = TEMPLATE_COMPONENTS[template];
   const registryPath = path2.join(
@@ -335,6 +395,9 @@ function applyTemplate(targetDir, template) {
     "components/examples/index.ts"
   );
   fs2.writeFileSync(examplesIndexPath, generateExamplesIndex(components));
+  updateWorkbenchIndex(targetDir, components);
+  const defaultComponent = TEMPLATE_DEFAULT_COMPONENT[template];
+  updateWorkbenchStoreDefault(targetDir, defaultComponent);
   const examplesDir = path2.join(targetDir, "components/examples");
   if (!components.includes("welcome")) {
     fs2.rmSync(path2.join(examplesDir, "welcome-card"), {
@@ -394,76 +457,144 @@ async function downloadTemplate(targetDir) {
     fs2.rmSync(tempDir, { recursive: true, force: true });
   }
 }
+function parseArgs(args) {
+  const parsed = {
+    yes: false
+  };
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    const next = args[i + 1];
+    switch (arg) {
+      case "-y":
+      case "--yes":
+        parsed.yes = true;
+        break;
+      case "--template":
+        if (next && (next === "minimal" || next === "poi-map")) {
+          parsed.template = next;
+          i++;
+        }
+        break;
+      case "--include-server":
+        parsed.includeServer = true;
+        break;
+      case "--no-server":
+        parsed.includeServer = false;
+        break;
+      case "--description":
+        if (next && !next.startsWith("-")) {
+          parsed.description = next;
+          i++;
+        }
+        break;
+      default:
+        if (arg && !arg.startsWith("-") && !parsed.projectName) {
+          parsed.projectName = arg;
+        }
+    }
+  }
+  return parsed;
+}
 async function main() {
   ensureSupportedNodeVersion();
-  const args = process.argv.slice(2);
-  if (args.includes("--help") || args.includes("-h")) {
+  const rawArgs = process.argv.slice(2);
+  if (rawArgs.includes("--help") || rawArgs.includes("-h")) {
     showHelp();
     process.exit(0);
   }
-  if (args.includes("--version") || args.includes("-v")) {
+  if (rawArgs.includes("--version") || rawArgs.includes("-v")) {
     console.log(getVersion());
     process.exit(0);
   }
-  const argProjectName = args.find((arg) => !arg.startsWith("-"));
+  const parsedArgs = parseArgs(rawArgs);
+  const nonInteractive = parsedArgs.yes;
   p.intro(pc.bgCyan(pc.black(" mcp-app-studio ")));
-  if (argProjectName) {
-    const pathCheck = isValidProjectPath(argProjectName);
+  if (parsedArgs.projectName) {
+    const pathCheck = isValidProjectPath(parsedArgs.projectName);
     if (!pathCheck.valid) {
       p.log.error(pathCheck.error ?? "Invalid project path");
       process.exit(1);
     }
   }
-  const projectName = argProjectName ? argProjectName : await p.text({
-    message: "Project name:",
-    placeholder: "my-chatgpt-app",
-    validate: (value) => {
-      if (!value) return "Project name is required";
-      const pathCheck = isValidProjectPath(value);
-      if (!pathCheck.valid) return pathCheck.error;
-      if (!isValidPackageName(toValidPackageName(value))) {
-        return "Invalid project name";
+  let projectName;
+  if (parsedArgs.projectName) {
+    projectName = parsedArgs.projectName;
+  } else if (nonInteractive) {
+    p.log.error("Project name is required in non-interactive mode");
+    process.exit(1);
+  } else {
+    projectName = await p.text({
+      message: "Project name:",
+      placeholder: "my-chatgpt-app",
+      validate: (value) => {
+        if (!value) return "Project name is required";
+        const pathCheck = isValidProjectPath(value);
+        if (!pathCheck.valid) return pathCheck.error;
+        if (!isValidPackageName(toValidPackageName(value))) {
+          return "Invalid project name";
+        }
+        return void 0;
       }
-      return void 0;
-    }
-  });
+    });
+  }
   if (p.isCancel(projectName)) {
     p.cancel("Operation cancelled.");
     process.exit(0);
   }
-  const description = await p.text({
-    message: "App description:",
-    placeholder: "A ChatGPT app that helps users...",
-    initialValue: ""
-  });
+  let description;
+  if (parsedArgs.description !== void 0) {
+    description = parsedArgs.description;
+  } else if (nonInteractive) {
+    description = "";
+  } else {
+    description = await p.text({
+      message: "App description:",
+      placeholder: "A ChatGPT app that helps users...",
+      initialValue: ""
+    });
+  }
   if (p.isCancel(description)) {
     p.cancel("Operation cancelled.");
     process.exit(0);
   }
-  const template = await p.select({
-    message: "Choose a starter template:",
-    options: [
-      {
-        value: "minimal",
-        label: "Minimal",
-        hint: "Simple welcome card - perfect starting point"
-      },
-      {
-        value: "poi-map",
-        label: "Locations App",
-        hint: "Interactive map demo with full SDK features"
-      }
-    ],
-    initialValue: "minimal"
-  });
+  let template;
+  if (parsedArgs.template !== void 0) {
+    template = parsedArgs.template;
+  } else if (nonInteractive) {
+    template = "minimal";
+  } else {
+    template = await p.select({
+      message: "Choose a starter template:",
+      options: [
+        {
+          value: "minimal",
+          label: "Minimal",
+          hint: "Simple welcome card - perfect starting point"
+        },
+        {
+          value: "poi-map",
+          label: "Locations App",
+          hint: "Interactive map demo with full SDK features"
+        }
+      ],
+      initialValue: "minimal"
+    });
+  }
   if (p.isCancel(template)) {
     p.cancel("Operation cancelled.");
     process.exit(0);
   }
-  const includeServer = await p.confirm({
-    message: "Include MCP server?",
-    initialValue: true
-  });
+  let includeServer;
+  if (parsedArgs.includeServer !== void 0) {
+    includeServer = parsedArgs.includeServer;
+  } else if (nonInteractive) {
+    includeServer = true;
+  } else {
+    includeServer = await p.confirm({
+      message: "Include MCP server?",
+      initialValue: true
+    });
+  }
   if (p.isCancel(includeServer)) {
     p.cancel("Operation cancelled.");
     process.exit(0);
@@ -478,15 +609,19 @@ async function main() {
     includeServer
   };
   if (!isEmpty(targetDir)) {
-    const overwrite = await p.confirm({
-      message: `Directory "${projectName}" is not empty. Remove existing files?`,
-      initialValue: false
-    });
-    if (p.isCancel(overwrite) || !overwrite) {
-      p.cancel("Operation cancelled.");
-      process.exit(0);
+    if (nonInteractive) {
+      emptyDir(targetDir);
+    } else {
+      const overwrite = await p.confirm({
+        message: `Directory "${projectName}" is not empty. Remove existing files?`,
+        initialValue: false
+      });
+      if (p.isCancel(overwrite) || !overwrite) {
+        p.cancel("Operation cancelled.");
+        process.exit(0);
+      }
+      emptyDir(targetDir);
     }
-    emptyDir(targetDir);
   }
   const s = p.spinner();
   s.start("Downloading template...");
@@ -500,7 +635,12 @@ async function main() {
     process.exit(1);
   }
   s.message("Creating project...");
-  updatePackageJson(targetDir, config.packageName, config.description);
+  updatePackageJson(
+    targetDir,
+    config.packageName,
+    config.description,
+    config.includeServer
+  );
   s.message("Applying template...");
   applyTemplate(targetDir, config.template);
   if (!config.includeServer) {
@@ -512,12 +652,7 @@ async function main() {
   const runCmd = pm === "npm" ? "npm run" : pm === "bun" ? "bun run" : pm;
   const devCmd = `${runCmd} dev`;
   const quotedName = quotePath(projectName);
-  const nextSteps = [`cd ${quotedName}`, installCmd];
-  if (config.includeServer) {
-    nextSteps.push(`cd server && ${installCmd}`);
-    nextSteps.push("cd ..");
-  }
-  nextSteps.push(devCmd);
+  const nextSteps = [`cd ${quotedName}`, installCmd, devCmd];
   if (config.includeServer) {
     nextSteps.push("");
     nextSteps.push(pc.dim("# This starts both Next.js and MCP server"));

package/dist/core/index.d.ts

@@ -412,6 +412,7 @@ interface HostBridge {
     }): void;
 }
 interface ExtendedBridge extends HostBridge {
+    disconnect?(): void;
     onToolInputPartial?(callback: ToolInputPartialCallback): () => void;
     onToolCancelled?(callback: ToolCancelledCallback): () => void;
     onTeardown?(callback: TeardownCallback): () => void;

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-import { Platform, ExtendedBridge, HostContext, HostCapabilities, ToolResult, DisplayMode, ContentBlock, FeatureKey } from './core/index.js';
+import { Platform, ExtendedBridge, ToolResult, HostCapabilities, DisplayMode, FeatureKey, HostContext, ContentBlock } from './core/index.js';
 export { AudioContentBlock, CHATGPT_CAPABILITIES, ChatMessage, ContainerDimensions, ContentBlockAnnotations, ContentBlockIcon, HostBridge, HostContextChangedCallback, HostStyles, ImageContentBlock, MCP_CAPABILITIES, ResourceContentBlock, ResourceLinkContentBlock, TeardownCallback, TextContentBlock, Theme, ToolCancelledCallback, ToolInputCallback, ToolInputPartialCallback, ToolResultCallback, hasFeature, imageBlock, textBlock } from './core/index.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { A as AppCapabilities } from './bridge-BOSEqpaS.js';
+import { A as AppCapabilities } from './bridge-BXW_-p2R.js';
 import '@modelcontextprotocol/ext-apps';
 
 /**
@@ -46,7 +46,7 @@ declare function detectPlatformDetailed(): DetectionResult;
  * 4. iframe has `data-mcp-host` attribute → MCP
  * 5. None of the above → unknown
  *
- * **Debugging tip:** Set `window.__CHATGPT_APP_DEBUG__ = true` before
+ * **Debugging tip:** Set `window.__MCP_APP_STUDIO_DEBUG__ = true` before
  * loading your widget to see detailed detection logs in the console.
  *
  * @returns The detected platform: "chatgpt", "mcp", or "unknown"

package/dist/index.js

@@ -4,10 +4,10 @@ import {
 } from "./chunk-KRCGOYZ5.js";
 import {
   ChatGPTBridge
-} from "./chunk-L2RRNF7V.js";
+} from "./chunk-EPZCYA26.js";
 import {
   MCPBridge
-} from "./chunk-QO43ZGJI.js";
+} from "./chunk-2OPSDEPI.js";
 import {
   CHATGPT_CAPABILITIES,
   MCP_CAPABILITIES,
@@ -20,7 +20,7 @@ var MCP_MARKERS = {
   WINDOW_PROP: "__MCP_HOST__",
   DATA_ATTR: "data-mcp-host"
 };
-var DEBUG_KEY = "__CHATGPT_APP_DEBUG__";
+var DEBUG_KEY = "__MCP_APP_STUDIO_DEBUG__";
 function isDebugMode() {
   if (typeof window === "undefined") return false;
   return window[DEBUG_KEY] === true;
@@ -53,7 +53,11 @@ function detectPlatformDetailed() {
         param: MCP_MARKERS.URL_PARAM,
         platform: "mcp"
       });
-      return { platform: "mcp", detectedBy: `URL param: ${MCP_MARKERS.URL_PARAM}`, checks };
+      return {
+        platform: "mcp",
+        detectedBy: `URL param: ${MCP_MARKERS.URL_PARAM}`,
+        checks
+      };
     }
   } catch {
     debugLog("detectPlatform: URL parsing failed");
@@ -64,7 +68,11 @@ function detectPlatformDetailed() {
       prop: MCP_MARKERS.WINDOW_PROP,
       platform: "mcp"
     });
-    return { platform: "mcp", detectedBy: `window.${MCP_MARKERS.WINDOW_PROP}`, checks };
+    return {
+      platform: "mcp",
+      detectedBy: `window.${MCP_MARKERS.WINDOW_PROP}`,
+      checks
+    };
   }
   try {
     const frameElement = window.frameElement;
@@ -74,7 +82,11 @@ function detectPlatformDetailed() {
         attr: MCP_MARKERS.DATA_ATTR,
         platform: "mcp"
       });
-      return { platform: "mcp", detectedBy: `iframe: ${MCP_MARKERS.DATA_ATTR}`, checks };
+      return {
+        platform: "mcp",
+        detectedBy: `iframe: ${MCP_MARKERS.DATA_ATTR}`,
+        checks
+      };
     }
   } catch {
     debugLog("detectPlatform: Frame element access failed (cross-origin)");
@@ -94,7 +106,9 @@ function isMCP() {
 function enableDebugMode() {
   if (typeof window !== "undefined") {
     window[DEBUG_KEY] = true;
-    console.log("[mcp-app-studio] Debug mode enabled. Platform detection will log to console.");
+    console.log(
+      "[mcp-app-studio] Debug mode enabled. Platform detection will log to console."
+    );
   }
 }
 function disableDebugMode() {
@@ -122,6 +136,7 @@ function UniversalProvider({
   const [platform, setPlatform] = useState("unknown");
   const [ready, setReady] = useState(false);
   useEffect(() => {
+    let cancelled = false;
     const detected = detectPlatform();
     setPlatform(detected);
     let newBridge;
@@ -134,9 +149,20 @@ function UniversalProvider({
       return;
     }
     newBridge.connect().then(() => {
+      if (cancelled) return;
       setBridge(newBridge);
       setReady(true);
+    }).catch((error) => {
+      if (cancelled) return;
+      console.error("[mcp-app-studio] Bridge connection failed:", error);
+      setReady(true);
     });
+    return () => {
+      cancelled = true;
+      if (newBridge && "disconnect" in newBridge) {
+        newBridge.disconnect();
+      }
+    };
   }, [appInfo, appCapabilities]);
   if (!ready) return null;
   return /* @__PURE__ */ jsx(PlatformContext.Provider, { value: platform, children: /* @__PURE__ */ jsx(UniversalContext.Provider, { value: bridge, children }) });
@@ -159,15 +185,30 @@ function useHostContext() {
     if (!bridge) return;
     return bridge.onHostContextChanged((ctx) => {
       setContext(
-        (prev) => prev ? { ...prev, ...ctx } : ctx
+        (prev) => (
+          // On first context update, ctx should contain full context from getHostContext().
+          // On subsequent updates, merge partial updates with existing state.
+          prev ? { ...prev, ...ctx } : ctx
+        )
       );
     });
   }, [bridge]);
   return context;
 }
 function useTheme() {
-  const context = useHostContext();
-  return context?.theme ?? "light";
+  const bridge = useUniversalBridge();
+  const [theme, setTheme] = useState2(
+    () => bridge?.getHostContext()?.theme ?? "light"
+  );
+  useEffect2(() => {
+    if (!bridge) return;
+    return bridge.onHostContextChanged((ctx) => {
+      if (ctx.theme !== void 0) {
+        setTheme(ctx.theme);
+      }
+    });
+  }, [bridge]);
+  return theme;
 }
 function useCapabilities() {
   const bridge = useUniversalBridge();
@@ -204,8 +245,17 @@ function useToolResult() {
 }
 function useDisplayMode() {
   const bridge = useUniversalBridge();
-  const context = useHostContext();
-  const mode = context?.displayMode ?? "inline";
+  const [mode, setModeState] = useState2(
+    () => bridge?.getHostContext()?.displayMode ?? "inline"
+  );
+  useEffect2(() => {
+    if (!bridge) return;
+    return bridge.onHostContextChanged((ctx) => {
+      if (ctx.displayMode !== void 0) {
+        setModeState(ctx.displayMode);
+      }
+    });
+  }, [bridge]);
   const setMode = useCallback(
     async (newMode) => {
       if (!bridge) return;

package/dist/platforms/chatgpt/index.d.ts

@@ -83,6 +83,7 @@ declare class ChatGPTBridge implements ExtendedBridge {
     private connected;
     private get openai();
     connect(): Promise<void>;
+    disconnect(): void;
     private buildHostContext;
     private mapDeviceType;
     private handleGlobalsChange;

package/dist/platforms/chatgpt/index.js

@@ -1,6 +1,6 @@
 import {
   ChatGPTBridge
-} from "../../chunk-L2RRNF7V.js";
+} from "../../chunk-EPZCYA26.js";
 import "../../chunk-4LAH4JH6.js";
 
 // src/platforms/chatgpt/hooks.tsx
@@ -42,8 +42,18 @@ function useHostContext() {
   return context;
 }
 function useTheme() {
-  const context = useHostContext();
-  return context?.theme ?? "light";
+  const bridge = useChatGPTBridge();
+  const [theme, setTheme] = useState(
+    () => bridge.getHostContext()?.theme ?? "light"
+  );
+  useEffect(() => {
+    return bridge.onHostContextChanged((ctx) => {
+      if (ctx.theme !== void 0) {
+        setTheme(ctx.theme);
+      }
+    });
+  }, [bridge]);
+  return theme;
 }
 function useToolInput() {
   const bridge = useChatGPTBridge();
@@ -63,8 +73,16 @@ function useToolResult() {
 }
 function useDisplayMode() {
   const bridge = useChatGPTBridge();
-  const context = useHostContext();
-  const mode = context?.displayMode ?? "inline";
+  const [mode, setModeState] = useState(
+    () => bridge.getHostContext()?.displayMode ?? "inline"
+  );
+  useEffect(() => {
+    return bridge.onHostContextChanged((ctx) => {
+      if (ctx.displayMode !== void 0) {
+        setModeState(ctx.displayMode);
+      }
+    });
+  }, [bridge]);
   const setMode = useCallback(
     async (newMode) => {
       await bridge.requestDisplayMode(newMode);
@@ -76,7 +94,7 @@ function useDisplayMode() {
 function useWidgetState() {
   const bridge = useChatGPTBridge();
   const [state, setState] = useState(
-    bridge.getWidgetState()
+    () => bridge.getWidgetState()
   );
   const setWidgetState = useCallback(
     (newState) => {

package/dist/platforms/mcp/index.d.ts

@@ -1,8 +1,8 @@
-import { A as AppCapabilities } from '../../bridge-BOSEqpaS.js';
-export { M as MCPBridge, a as MCPBridgeOptions } from '../../bridge-BOSEqpaS.js';
+import { A as AppCapabilities } from '../../bridge-BXW_-p2R.js';
+export { M as MCPBridge, a as MCPBridgeOptions } from '../../bridge-BXW_-p2R.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { HostContext, ToolResult, DisplayMode, ContentBlock } from '../../core/index.js';
+import { ToolResult, DisplayMode, HostContext, ContentBlock } from '../../core/index.js';
 import '@modelcontextprotocol/ext-apps';
 
 interface MCPProviderProps {

package/dist/platforms/mcp/index.js

@@ -1,6 +1,6 @@
 import {
   MCPBridge
-} from "../../chunk-QO43ZGJI.js";
+} from "../../chunk-2OPSDEPI.js";
 import "../../chunk-4LAH4JH6.js";
 
 // src/platforms/mcp/hooks.tsx
@@ -8,8 +8,10 @@ import {
   createContext,
   useContext,
   useEffect,
+  useLayoutEffect,
   useState,
-  useCallback
+  useCallback,
+  useRef
 } from "react";
 import { jsx } from "react/jsx-runtime";
 var MCPContext = createContext(null);
@@ -48,8 +50,18 @@ function useHostContext() {
   return context;
 }
 function useTheme() {
-  const context = useHostContext();
-  return context?.theme ?? "light";
+  const bridge = useMCPBridge();
+  const [theme, setTheme] = useState(
+    () => bridge.getHostContext()?.theme ?? "light"
+  );
+  useEffect(() => {
+    return bridge.onHostContextChanged((ctx) => {
+      if (ctx.theme !== void 0) {
+        setTheme(ctx.theme);
+      }
+    });
+  }, [bridge]);
+  return theme;
 }
 function useToolInput() {
   const bridge = useMCPBridge();
@@ -77,31 +89,52 @@ function useToolResult() {
 }
 function useToolCancellation(callback) {
   const bridge = useMCPBridge();
+  const callbackRef = useRef(callback);
+  useLayoutEffect(() => {
+    callbackRef.current = callback;
+  });
   useEffect(() => {
-    return bridge.onToolCancelled(callback);
-  }, [bridge, callback]);
+    return bridge.onToolCancelled((reason) => callbackRef.current(reason));
+  }, [bridge]);
 }
 function useTeardown(callback) {
   const bridge = useMCPBridge();
+  const callbackRef = useRef(callback);
+  useLayoutEffect(() => {
+    callbackRef.current = callback;
+  });
   useEffect(() => {
-    return bridge.onTeardown(callback);
-  }, [bridge, callback]);
+    return bridge.onTeardown(() => callbackRef.current());
+  }, [bridge]);
 }
 function useDisplayMode() {
   const bridge = useMCPBridge();
-  const context = useHostContext();
-  const mode = context?.displayMode ?? "inline";
+  const [mode, setModeState] = useState(
+    () => bridge.getHostContext()?.displayMode ?? "inline"
+  );
+  const [availableModes, setAvailableModes] = useState(
+    () => bridge.getHostContext()?.availableDisplayModes ?? []
+  );
+  useEffect(() => {
+    return bridge.onHostContextChanged((ctx) => {
+      if (ctx.displayMode !== void 0) {
+        setModeState(ctx.displayMode);
+      }
+      if (ctx.availableDisplayModes !== void 0) {
+        setAvailableModes(ctx.availableDisplayModes);
+      }
+    });
+  }, [bridge]);
   const setMode = useCallback(
     async (newMode) => {
-      const available = context?.availableDisplayModes ?? [];
-      if (available.length > 0 && !available.includes(newMode)) {
+      if (availableModes.length > 0 && !availableModes.includes(newMode)) {
         console.warn(
-          `Display mode "${newMode}" not available. Available: ${available.join(", ")}`
+          `Display mode "${newMode}" not available. Available: ${availableModes.join(", ")}`
         );
       }
       await bridge.requestDisplayMode(newMode);
     },
-    [bridge, context?.availableDisplayModes]
+    [bridge, availableModes]
   );
   return [mode, setMode];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcp-app-studio",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "description": "Build interactive apps for AI assistants (ChatGPT, Claude, MCP hosts)",
   "keywords": [
     "chatgpt",
@@ -61,25 +61,10 @@
     "README.md"
   ],
   "sideEffects": false,
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "preview:sync": "tsx scripts/sync-template.ts",
-    "preview:install": "cd .preview && npm install",
-    "preview:dev": "cd .preview && npm run dev",
-    "preview": "tsx scripts/sync-template.ts && cd .preview && npm run dev",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:smoke": "vitest run --config vitest.smoke.config.ts",
-    "test:coverage": "vitest run --coverage",
-    "test:scaffold": "bash scripts/test-scaffold.sh",
-    "typecheck": "tsc --noEmit",
-    "prepack": "pnpm run build"
-  },
   "dependencies": {
     "@clack/prompts": "^0.11.0",
     "picocolors": "^1.1.1",
-    "tar": "^7.5.4"
+    "tar": "^7.5.6"
   },
   "peerDependencies": {
     "@modelcontextprotocol/ext-apps": ">=0.4.0",
@@ -95,16 +80,16 @@
   },
   "devDependencies": {
     "@modelcontextprotocol/ext-apps": "^0.4.0",
-    "@assistant-ui/x-buildutils": "workspace:*",
-    "@types/node": "^25.0.9",
+    "@types/node": "^25.0.10",
     "@types/react": "^19.1.6",
     "@types/tar": "^6.1.13",
-    "@vitest/coverage-v8": "^4.0.17",
+    "@vitest/coverage-v8": "^4.0.18",
     "react": "^19.1.0",
     "tsup": "^8.5.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.17"
+    "vitest": "^4.0.18",
+    "@assistant-ui/x-buildutils": "0.0.1"
   },
   "publishConfig": {
     "access": "public"
@@ -120,5 +105,19 @@
   },
   "engines": {
     "node": ">=20.9.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "preview:sync": "tsx scripts/sync-template.ts",
+    "preview:install": "cd .preview && npm install",
+    "preview:dev": "cd .preview && npm run dev",
+    "preview": "tsx scripts/sync-template.ts && cd .preview && npm run dev",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:smoke": "vitest run --config vitest.smoke.config.ts",
+    "test:coverage": "vitest run --coverage",
+    "test:scaffold": "bash scripts/test-scaffold.sh",
+    "typecheck": "tsc --noEmit"
   }
-}
+}