Sandpack error when using artifacts / inconsistent use of artifacts

[thomas-333]

What happened?

I've been testing out the new artifact support which is great. However when trying to preview code I get an error. Viewing code works fine.

I have tried on Firefox and Edge with exactly the same error.

Also I'm uncertain when artifacts are meant to be used and if the artifacts prompt is always sent. For example "Write me a game in Python" does not use artifacts. However if I manually prompt with "Write me a game in Python. Use code artifacts." it does.

Steps to Reproduce

1. Use gpt-4o-mini
2. Prompt "Write me a game in Python. Use code artifacts."
3. Artifacts windows appears and code is shown in the "code" tab
4. Select "preview" tab and Sandpack error is shown after a short period

What browsers are you seeing the problem on?

Firefox, Microsoft Edge

Relevant log output

Couldn't connect to server

This means sandpack cannot connect to the runtime or your network is having some issues. Please check the network tab in your browser and try again. If the problem persists, report it via email or submit an issue on GitHub.

ENV: static
ERROR: TIME_OUT

Screenshots

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[danny-avila]

Like it says, it’s a network error. The frontend will request the packages needed to render the iframe correctly and something in your network is blocking it

[danny-avila]

As for when it should be used, yes the prompt always needs to be sent; however only if you’re requesting mermaid, HTML, React should it be used as it will only support these renderings. For more flexibility, you can enable custom prompt mode, and rely on manual prompting either via presets, assistants instructions or premade prompts.

[thomas-333]

Thanks for your replies.

I have worked out the Sandpack error. I'm serving over http and hence the service workers wouldn't run as they require https.

I phrased my other question badly. "Create a playable snake game" for example automatically uses artifacts. While for Python I need to use a prompt such as "Write me a game in Python. Use code artifacts." or artifacts aren't used. I know that Python won't be executed, however artifacts are useful when making changes to code.

[danny-avila]

Yes absolutely. I realized in hindsight that I should support other languages even if it's simply to render the code side-by-side with no execution. However, there's something exciting regarding python execution in the works!

[kapustor]

Hi @thomas-333 , can you please share how did you fixed the Sandpack error? Facing the same issue and I don't understand which network error this is - between my browser and the internet, between librechat host and the browser or other? Thanks in advance!

[thomas-333]

Hi. Browsers will by default only run service workers, which is what are used for artifacts, over https. Hence you need to set up a SSL certificate for the connection. In my case since I'm self hosting on my internal network I used a reverse proxy along with a self signed certificate. I'm using Nginx Proxy Manager, however there are lots of other ways of doing this depending on your configuration and preference.

[kapustor]

Thank you @thomas-333 , I managed it with Nginx Proxy! Works awesome.