Artifacts

This page covers the admin side of Artifacts. Users turn artifacts on per agent in the Agent Builder; the settings here decide whether that option exists and where the previews load from.

Enabling artifacts

Artifacts are an agent capability. artifacts is in the default endpoints.agents.capabilities list, so it is available unless you set your own list without it. If you override capabilities, include artifacts to keep the option in the Agent Builder.

To give a model spec artifacts without building an agent, set artifacts on the spec. true uses the default mode; you can also pass a mode name: default, shadcnui, or custom.

Opening the panel in a new window

The panel has an Open in new window button that moves it into a separate browser window. It is on by default. If your deployment runs somewhere pop-ups do not work, such as an embedded webview, turn it off with interface.artifactUndocking: false; the docked panel keeps working.

Content-Security-Policy

LibreChat's own CSP allows HTTPS frames, so the default CodeSandbox bundler loads without changes. If a reverse proxy or CDN in front of LibreChat sets a stricter Content-Security-Policy, allow the bundler origin in frame-src: https://*.codesandbox.io for the public bundler, or your own bundler URLs if you self-host. When you only need to extend LibreChat's built-in policy, use CSP_FRAME_SRC_EXTRA.

React previews also load Tailwind from cdn.tailwindcss.com, so that host must be reachable from users' browsers.

Self-hosting the Sandpack bundler

Previews are rendered by Sandpack, which by default fetches its bundler from CodeSandbox's public CDN. That CDN also sends usage telemetry. For private networks, compliance requirements, or to remove the dependency on an outside service, host the bundler yourself.

LibreChat-AI/codesandbox-client is a fork prepared for LibreChat with the telemetry requests removed, including container images.

LibreChat uses two bundlers. SANDPACK_BUNDLER_URL serves React artifacts, and SANDPACK_STATIC_BUNDLER_URL serves the static template behind HTML, SVG, Markdown, code, and Office-file previews. Set both when you self-host: with only one set, the other artifact types still load from the public CDN. Both are listed in the .env reference. Mermaid diagrams render directly in the page and don't use either bundler.

Running your own bundler means you own its CORS settings, security updates, and hosting resources. Restart LibreChat after changing these variables; the URLs are sent to the browser in the startup config.