No widget UI showing

[tommy-holmes]

I can't get any UI to show:

I must be missing some step, but I checked all over and can't seem to find out what. I originally wrote my own app based on the examples and faced this issue but since decided to try a really basic "Hello World" demo to see if I could get something to show, but no joy.

Here is the code I added to the pizzaz example:

src/hello_world/index.jsx

import React from "react";
import { createRoot } from "react-dom/client";

function App() {
  return (
    <div className="antialiased w-full text-black p-8 flex items-center justify-center min-h-[200px]">
      <div className="text-center">
        <h1 className="text-6xl font-bold text-blue-600 mb-4">
          HELLO WORLD
        </h1>
        <p className="text-lg text-gray-600">
          This is a simple hello world widget!
        </p>
      </div>
    </div>
  );
}

createRoot(document.getElementById("hello_world-root")).render(<App />);

I've added my tool here (ignore the lack of CSS and JS, I just want to get something to show up), all of the original examples like the pizza map work but my widget just show blank:

pizzaz_server_node/src/server.ts

const widgets: PizzazWidget[] = [
  {
    id: "hello-world",
    title: "Show Hello World",
    templateUri: "ui://widget/hello-world.html",
    invoking: "Displaying hello world",
    invoked: "Showed hello world",
    html: `
<div id="hello_world-root"></div>
    `.trim(),
    responseText: "Displayed hello world!"
  },
  {
    id: "pizza-map",
    title: "Show Pizza Map",
    templateUri: "ui://widget/pizza-map.html",
    invoking: "Hand-tossing a map",
    invoked: "Served a fresh map",
    html: `
<div id="pizzaz-root"></div>
<link rel="stylesheet" href="https://persistent.oaistatic.com/ecosystem-built-assets/pizzaz-0038.css">
<script type="module" src="https://persistent.oaistatic.com/ecosystem-built-assets/pizzaz-0038.js"></script>
    `.trim(),
    responseText: "Rendered a pizza map!"
  },
...
}

Please could someone help me out, spent a few hours on it and cannot see what I am missing (I am new to React!), thanks 🙏🏼

[BrennenRocks]

My first thought is to swap out the css and js assets with a locally built version.

Here is an example from https://developers.openai.com/apps-sdk/build/mcp-server

const KANBAN_JS = readFileSync("web/dist/kanban.js", "utf8");
const KANBAN_CSS = (() => {
  try {
    return readFileSync("web/dist/kanban.css", "utf8");
  } catch {
    return ""; // CSS optional
  }
})();

server.registerResource(
  "kanban-widget",
  "ui://widget/kanban-board.html",
  {},
  async () => ({
    contents: [
      {
        uri: "ui://widget/kanban-board.html",
        mimeType: "text/html+skybridge",
        text: `
<div id="kanban-root"></div>
${KANBAN_CSS ? `<style>${KANBAN_CSS}</style>` : ""}
<script type="module">${KANBAN_JS}</script>
        `.trim(),
      },
    ],
  })
);

This way you're not relying on href="https://persistent.oaistatic.com/ecosystem-built-assets/pizzaz-0038.css"

Make sure your file names match the files in /assets after you run pnpm run build

[gregmercer]

Hi @tommy-holmes
I believe the issue is that you have no .js file referenced in your widget. When you do the build of the react widget using npm run build it will create .js file related to your widget in the assets directory. The build-all.mts file will need to have a reference to your widget.
I have a pull request with a very simple react widget and server, call Test, you can reference. Hopefully that will be helpful. 😄
See pull request #38 "Adding a simpler "test" widget and server."

[tommy-holmes]

Hey thanks @BrennenRocks and @gregmercer - I have tried with a JS and CSS file with my Ngrok domain, with the right routing to the files etc but still nothing :/. It was what led to me stripping back and seeing if I could get something showing up in the UI, but it doesn't seem to work with pure HTML either 🤔

[tommy-holmes]

To clarify, I am now running pnpm build serve on a separate domain which has the assets, but I am getting the following with no console errors but a warning saying the module can't load.

[tommy-holmes]

How are we meant to serve both the assets on on public server and the MCP on another public server if ngrok only allows you to have one at a time? 🤔

[katia-openai]

Hi @tommy-holmes, just pushed an update to use the static assets served from your local server.
Could you try again with this new setup and let me know how it goes? Thanks!

[tommy-holmes]

Hi @tommy-holmes, just pushed an update to use the static assets served from your local server. Could you try again with this new setup and let me know how it goes? Thanks!

Hi @katia-openai, thanks for looking into this though I reset and just pulled main but I still am seeing nothing show up :/. The MCP server is running correctly but through ngrok the static files don't seem to be accessible.

I will also try exposing the static assets on an S3 bucket for now as a workaround.

[katia-openai]

Could you try MCP inspector and check the content when you list resources?

[ziyad188]

@katia-openai I'm also facing same issue just attaching the MCP Inspector screenshots, the steps i have done just build the ui using pnpm build and serve that in localhost 4444 and then started the backend python solar but im getting a blank ui

[mredodos]

same issue i cant render the ui in the chat it seems the model don know how to activate it

[jillbourque]

I was working with the Node version and had the same issue. Here's what worked for me:

• The build process created hashed filenames (pizzaz-list-2d2b.js)
• The HTML files referenced non-hashed filenames (pizzaz-list.js)
• The asset server couldn't find the non-hashed files
• I fixed it by copying the hashed files to the non-hashed names

[Obad94]

Note: Related but not fixed by PR#60.

This PR restores canonical static assets and unblocks widget loads, but #53 also needs the example to actually load/mount its JS bundle (the original report showed an HTML container without a script/mount).

This comment is to link the context.

[alimardani]

This PR 61 will fix the issue. (merge pending)

Root cause:
The build script was renaming JS and CSS files with a hash suffix (e.g., pizzaz.js -> pizzaz-2d2b.js) but the HTML files were still referencing the unhashed filenames. This caused 404 errors when loading widgets via the MCP server.

Note:

• Build the project again
  pnpm run build
  pnpm run serve

• Restart the MCP server (pizzaz_server_node)

• Open the Pizza app in GPT Settings > Apps and Connectors and Click Refresh

[tommy-holmes]

@alimardani - this does the job! Thanks for the help all 🫡

Hallelujah!