Problem with local development

ChatGPT Apps SDK
1

Has anyone else had any issues with local development lately? ie. using tunneling services like ngrok doesn’t render the widgets properly. All I get is html text, no css, no js. It works fine when I test in MCPJam or if I publish to vercel and use the vercel url, but using ngrok hasn’t been working for me. It seemed to have been working fine a couple weeks ago, but now, not at all.

2

Same issue here. I developed an app based on the vercel chatgpt app template which used to work locally via ngrok tunnel. My guess is that OpenAI changed something along their CORS settings which holds your browser back to load resources from localhost.

I have no solution though other than disabling CORS for development purposes via browser extension..

3

Guys, do you mind sharing your network tab from the browser?

I personally use ngrok + nextjs and it’s working fine

4

3 things potentially:

  1. Are you setting CSP? Could be that you are not setting it so that your ngrok tunnel is a permitted domain for fetching your assets
  2. Since the iframe is hosted under OpenAI’s domain, it could be trying to fetch the JS/CSS from a relative host rather than the tunnel, a good way to check for this is checking your network tab in ChatGPT and seeing if the requests are being found
  3. ngrok stopped working for me cause I was on the “Free” plan and I hit my limits. Solution here is to upgrade OR move over to Cloudflare tunnels. I did the latter and everything worked!
5

So I figured out the issue, and it was on my end. I’m using the Next.js template from Vercel and the issue was with next.config.ts, specifically nextConfig.assetPrefix. It’s set to baseUrl, which, during development is set to localhost:3000. But baseUrl needs to be set to the tunnel URL you’re using (be it ngrok, cloudflare tunnel, etc). So I just modified baseUrl.ts:

export function getBaseURL() {
  if (process.env.NODE_ENV == 'development') {
    if (process.env.NEXT_PUBLIC_TUNNEL_URL !== undefined) {
      return process.env.NEXT_PUBLIC_TUNNEL_URL;
    }
    return 'http://localhost:3000';
  }

  return (
  'https://' +
    (process.env.VERCEL_ENV === 'production'
      ? process.env.VERCEL_PROJECT_PRODUCTION_URL
      : process.env.VERCEL_BRANCH_URL || process.env.VERCEL_URL)
  );

}

export const baseURL = getBaseURL();

NEXT_PUBLIC_TUNNEL_URL=<ngrok url>

I don’t know why the previous way stopped working, but maybe it was due to an update to the SDK.

1 Like
6

I think my solution above may work for you as well.

7

I think its because during development as u mentioned, it was a relative path for your assets so it didn’t work

When using MCPJam relative paths worked cause it doesn’t render it in a custom domain like Apps SDK does

When deployed to Vercel, it worked cause the base URL for ur assets was set correctly

Great solution, i did something similar

8

yep. setting the assetPrefix in next.config is the way to go. Also, I added this

    allowedDevOrigins: [

      new URL(baseUrl).hostname,

'*.web-sandbox.oaiusercontent.com', //chatgpt iframe

    ],
1 Like