Google ai studio Preview screen remains black for several days now.
First in chrome but now also in firefox.
Deleting history and cookies has no effect what so ever.
Me, too. It’s getting annoying a full week of it
could you share a screenshot of the same ? are you seeing in errors in the console ?
After making multiple complaint to the ai in the chatscreen and telling it that the previewscreen remained black and added screenshots from different browsers the ai went busy and somehow now it all works perfect again. I have asked mijn google ai studio what it did to fix it:
Copy the code between [the fix] code [end fix] and past it in your google ai studio chat after doing a remix of your creation for backup.
The problem of a black preview screen in Google AI Studio Build is usually caused by incorrect port configuration or a routing conflict within the iframe. Here is a concise text block that others can paste directly into their chat to let the AI fix the most common causes:
[the fix]
Fix the black preview screen: 1. Check ‘package.json’ and ensure the dev script is exactly this: “vite --host 0.0.0.0 --port 3000”. 2. Check ‘App.tsx’ for syntax errors or infinite loops in useEffect hooks. 3. Ensure the routing is compatible with the AI Studio iframe: preferably use a HashRouter or a manual state router instead of the default BrowserRouter. 4. Run ‘npm install’ to ensure all dependencies are present.
[end fix]
Brief explanation of why this works: Port 3000: AI Studio expects the app to run on port 3000. If Vite uses the default port 5173, the preview proxy sees nothing and the screen remains black. 0.0.0.0: This ensures that the server listens on all network interfaces, which is necessary within the container environment. Routing: Because the app runs in an iframe, the default browser URL bar does not always cooperate. A HashRouter (with #/) is much more stable in this environment.