Artifacts not loading

[bubbaspaarx]

What happened?

I'm running LibreChat through Docker on my local machine, and it was functioning properly until recently when artifacts stopped working. I saw that there is a new tutorial for creating a static browser server for sandpack to work. But as I'm running this locally and did have (until recently) it running well, I wonder if there's something else I'm missing before adding the overhead from the tutorial.

All I seem to get from the network tab is a cancelled request to codesandbox.io and the error message in the sandpack ui.

Version Information

librechat latest d22a4b3749e3 2 hours ago 2.34GB
ghcr.io/danny-avila/librechat-dev latest 88a93468f3a2 3 days ago 1.86GB
ghcr.io/danny-avila/librechat-rag-api-dev-lite latest 42ef0aa9a8fa 10 days ago 2.02G

Steps to Reproduce

1. Get the chat to generate an artifact
2. Watch artifact code being written
3. click on preview and get error message

What browsers are you seeing the problem on?

Chrome

Relevant log output

Request URL
https://2-19-8-sandpack.codesandbox.io/
Referrer Policy
strict-origin-when-cross-origin

Screenshots

Code of Conduct

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

[danny-avila]

If running sandpack locally, you would also need to run:

https://github.com/LibreChat-AI/codesandbox-client

Both that repo and the tutorial you shared are for learning/dev purposes. Ideally you would have your own HTTPS API acting as a CDN for the static files serving for both templates

[bubbaspaarx]

Thank you Danny,
I set this all up and got the same issues. After several hours of debugging I opened it in safari and all was fine. I had a chrome specific issue which was blocking the calls. Refreshed cache and all started working again.

[liHai001]

If running sandpack locally, you would also need to run:

https://github.com/LibreChat-AI/codesandbox-client

Both that repo and the tutorial you shared are for learning/dev purposes. Ideally you would have your own HTTPS API acting as a CDN for the static files serving for both templates

hi,
How to set sandpack locally.
I just run the docker follow the github: https://github.com/[LibreChat-AI/codesandbox-client](https://github.com/LibreChat-AI/codesandbox-client) as docker run -p 8084:80 ghcr.io/librechat-ai/codesandbox-client/bundler:latest
and edit .env file: SANDPACK_BUNDLER_URL=http://localhost:8084
but it didn't work. Got error:
`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: create-react-app
ERROR: TIME_OUT`

[Odrec]

If running sandpack locally, you would also need to run:
https://github.com/LibreChat-AI/codesandbox-client
Both that repo and the tutorial you shared are for learning/dev purposes. Ideally you would have your own HTTPS API acting as a CDN for the static files serving for both templates

hi, How to set sandpack locally. I just run the docker follow the github: [https://github.com/LibreChat-AI/codesandbox-client](https://github.com/%5BLibreChat-AI/codesandbox-client%5D(https://github.com/LibreChat-AI/codesandbox-client)) as docker run -p 8084:80 ghcr.io/librechat-ai/codesandbox-client/bundler:latest and edit .env file: SANDPACK_BUNDLER_URL=http://localhost:8084 but it didn't work. Got error: `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: create-react-app ERROR: TIME_OUT`

Your bundler container should be in the same network as your LibreChat container. For example this is in our docker compose

  sandpack:
    image: ghcr.io/librechat-ai/codesandbox-client/bundler:latest
    container_name: sandpack-bundler
    restart: always
    ports:
      - "8080:80"
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:80/"]
      interval: 30s
      timeout: 10s
      retries: 3
      start_period: 40s
    networks:
      - librechat

Notice the networks parameter.

[liHai001]

@Odrec Thank you very much. I have set bundle container same networks with LibreChat.

And, I have another question, how to config SANDPACK_BUNDLER_URL in the .env file? Where can i set or get this value.

[Odrec]

@Odrec Thank you very much. I have set bundle container same networks with LibreChat.

And, I have another question, how to config SANDPACK_BUNDLER_URL in the .env file? Where can i set or get this value.

That depends on your setup (for example if you're running a reverse proxy or not) but you should set that to your librechat ip/url not localhost. Localhost will only be reachable from within the computer the server is running on so if you want to reach it from an outside computer in your network it should be:

SANDPACK_BUNDLER_URL=http://YOUR_SERVER_IP:8084

[uje-m]

@bubbaspaarx
can you share your config?
i cant make it to work at all

[tatwong]

Experiencing similar problem, possible to share config?

[Ritesh-2001]

Did you find a solution?

[ddadaal]

I finally got it working in localhost. The key point is that both the API and the sandpack must be served though HTTPS. Fortunately caddy makes serving HTTPS locally pretty easy. My setup is as follows:

1. Create a docker-compose.override.yml with the following content. It creates a sandpack service as well as a caddy that creates 2 HTTPS ports that proxies to the internal services:

• 13080 to 3080 which is the port the api service is serving at
• 8080 which serves the sandpack

services:
  api:
    ports: []
    volumes:
      - type: bind
        source: ./librechat.yaml
        target: /app/librechat.yaml

  sandpack:
    image: ghcr.io/librechat-ai/codesandbox-client/bundler:latest
    container_name: sandpack-bundler
    restart: always
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:80/"]
      interval: 30s
      timeout: 10s
      retries: 3
      start_period: 40s

  caddy:
    image: caddy:latest
    container_name: caddy-proxy
    restart: always
    ports:
      - "13080:3080"
      - "8080:8080"
    volumes:
      - caddy_data:/data
    configs:
      - source: caddyfile
        target: /etc/caddy/Caddyfile
    depends_on:
      - api
      - sandpack

configs:
  caddyfile:
    content: |
      {
          local_certs
      }

      https://:3080 {
          tls internal {
              on_demand
          }
          reverse_proxy api:${PORT}
      }

      https://:8080 {
          tls internal {
              on_demand
          }
          reverse_proxy sandpack:80
      }

volumes:
  caddy_data:

2. Add the following to the .env. Replace the {local network ip} to your local network IP

SANDPACK_BUNDLER_URL=https://{local network ip}:8080

3. docker compose up and access the instance by https://{local network ip}:13080 and continue with self signed certificates