waiting for openai mount

eli6 · eli6 · commit b2fa435cc679 · 2025-12-06T19:00:09.000+01:00
diff --git a/src/server.ts b/src/server.ts
@@ -193,7 +193,7 @@ app.get("/", (req, res) => {
   `);
 });
 
-app.listen(PORT, async () => {
+app.listen(PORT, '0.0.0.0', async () => {
   const TOOL_MODE = (process.env.TOOL_MODE || "basic").toLowerCase();
   console.log(`🚀 MCP server listening on http://localhost:${PORT}/mcp`);
   console.log(`📦 Tool mode: ${TOOL_MODE}`);
diff --git a/src/tools/ui-react.ts b/src/tools/ui-react.ts
@@ -38,18 +38,17 @@ export function registerTools(mcp: McpServer) {
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Greet</title>
-  </head>
-  <body>
-    <div id="root"></div>
     <script type="importmap">
       {
         "imports": {
           "react": "https://esm.sh/react@18",
-          "react-dom": "https://esm.sh/react-dom@18",
           "react-dom/client": "https://esm.sh/react-dom@18/client"
         }
       }
     </script>
+  </head>
+  <body>
+    <div id="root"></div>
     <script type="module">
       ${greetBundle || 'console.error("React bundle not loaded. Run npm run build:web");'}
     </script>
diff --git a/web/src/components/greet.tsx b/web/src/components/greet.tsx
@@ -35,15 +35,33 @@ export function GreetWidget() {
   const [greeting, setGreeting] = useState('');
   const [isLoading, setIsLoading] = useState(false);
 
-  // Hydrate from initial tool output
+  // Hydrate from initial tool output and listen for updates
   useEffect(() => {
-    const toolOutput = (window.openai?.toolOutput as ToolOutput) || {};
-    if (toolOutput.greeting) {
-      setGreeting(toolOutput.greeting);
-    }
-    if (toolOutput.name) {
-      setName(toolOutput.name);
-    }
+    const updateFromToolOutput = () => {
+      const toolOutput = (window.openai?.toolOutput as ToolOutput) || {};
+      if (toolOutput.greeting) {
+        setGreeting(toolOutput.greeting);
+      }
+      if (toolOutput.name) {
+        setName(toolOutput.name);
+      }
+    };
+
+    // Initial load
+    updateFromToolOutput();
+
+    // Listen for updates from the host
+    const handleSetGlobals = (event: Event) => {
+      const customEvent = event as CustomEvent<{ globals?: Partial<{ toolOutput?: ToolOutput }> }>;
+      if (customEvent.detail?.globals?.toolOutput !== undefined) {
+        updateFromToolOutput();
+      }
+    };
+
+    window.addEventListener('openai:set_globals', handleSetGlobals);
+    return () => {
+      window.removeEventListener('openai:set_globals', handleSetGlobals);
+    };
   }, []);
 
   const handleGreet = async () => {
@@ -150,11 +168,32 @@ export function GreetWidget() {
   );
 }
 
-// Mount the component when used standalone (for MCP server build)
-if (typeof window !== 'undefined' && !document.getElementById('root')) {
-  const root = document.createElement('div');
-  document.body.appendChild(root);
-  const reactRoot = createRoot(root);
-  reactRoot.render(<GreetWidget />);
+// Wait for window.openai to be available before mounting
+function waitForOpenAI() {
+  if (window.openai) {
+    mountComponent();
+  } else {
+    // Listen for the openai:set_globals event
+    window.addEventListener('openai:set_globals', mountComponent, { once: true });
+    // Fallback: check periodically (in case event doesn't fire)
+    const checkInterval = setInterval(() => {
+      if (window.openai) {
+        clearInterval(checkInterval);
+        mountComponent();
+      }
+    }, 50);
+    // Cleanup after 5 seconds if still not available
+    setTimeout(() => clearInterval(checkInterval), 5000);
+  }
 }
 
+function mountComponent() {
+  const root = document.getElementById('root');
+  if (root) {
+    const reactRoot = createRoot(root);
+    reactRoot.render(<GreetWidget />);
+  }
+}
+
+waitForOpenAI();
+
