🪄 feat: Customize Sandpack bundlerURL for Artifacts (#6191)

api/server/routes/config.js

@@ -80,6 +80,7 @@ router.get('/', async function (req, res) {
       publicSharedLinksEnabled,
       analyticsGtmId: process.env.ANALYTICS_GTM_ID,
       instanceProjectId: instanceProject._id.toString(),
+      bundlerURL: process.env.SANDPACK_BUNDLER_URL,
     };
 
     if (ldap) {

client/src/components/Artifacts/ArtifactCodeEditor.tsx

@@ -8,8 +8,8 @@ import {
 import { SandpackProviderProps } from '@codesandbox/sandpack-react/unstyled';
 import type { CodeEditorRef } from '@codesandbox/sandpack-react';
 import type { ArtifactFiles, Artifact } from '~/common';
+import { useEditArtifact, useGetStartupConfig } from '~/data-provider';
 import { sharedFiles, sharedOptions } from '~/utils/artifacts';
-import { useEditArtifact } from '~/data-provider';
 import { useEditorContext } from '~/Providers';
 
 const createDebouncedMutation = (
@@ -124,6 +124,17 @@ export const ArtifactCodeEditor = memo(function ({
   sharedProps: Partial<SandpackProviderProps>;
   editorRef: React.MutableRefObject<CodeEditorRef>;
 }) {
+  const { data: config } = useGetStartupConfig();
+  const options: typeof sharedOptions = useMemo(() => {
+    if (!config) {
+      return sharedOptions;
+    }
+    return {
+      ...sharedOptions,
+      bundlerURL: config.bundlerURL,
+    };
+  }, [config]);
+
   if (Object.keys(files).length === 0) {
     return null;
   }
@@ -135,7 +146,7 @@ export const ArtifactCodeEditor = memo(function ({
         ...files,
         ...sharedFiles,
       }}
-      options={{ ...sharedOptions }}
+      options={options}
       {...sharedProps}
       template={template}
     >

client/src/components/Artifacts/ArtifactPreview.tsx

@@ -7,6 +7,7 @@ import {
 import type { SandpackPreviewRef } from '@codesandbox/sandpack-react/unstyled';
 import type { ArtifactFiles } from '~/common';
 import { sharedFiles, sharedOptions } from '~/utils/artifacts';
+import { useGetStartupConfig } from '~/data-provider';
 import { useEditorContext } from '~/Providers';
 
 export const ArtifactPreview = memo(function ({
@@ -23,6 +24,8 @@ export const ArtifactPreview = memo(function ({
   previewRef: React.MutableRefObject<SandpackPreviewRef>;
 }) {
   const { currentCode } = useEditorContext();
+  const { data: config } = useGetStartupConfig();
+
   const artifactFiles = useMemo(() => {
     if (Object.keys(files).length === 0) {
       return files;
@@ -38,6 +41,17 @@ export const ArtifactPreview = memo(function ({
       },
     };
   }, [currentCode, files, fileKey]);
+
+  const options: typeof sharedOptions = useMemo(() => {
+    if (!config) {
+      return sharedOptions;
+    }
+    return {
+      ...sharedOptions,
+      bundlerURL: config.bundlerURL,
+    };
+  }, [config]);
+
   if (Object.keys(artifactFiles).length === 0) {
     return null;
   }
@@ -48,7 +62,7 @@ export const ArtifactPreview = memo(function ({
         ...artifactFiles,
         ...sharedFiles,
       }}
-      options={{ ...sharedOptions }}
+      options={options}
       {...sharedProps}
       template={template}
     >

package-lock.json

@@ -43146,7 +43146,7 @@
     },
     "packages/data-provider": {
       "name": "librechat-data-provider",
-      "version": "0.7.6997",
+      "version": "0.7.6998",
       "license": "ISC",
       "dependencies": {
         "axios": "^1.7.7",

packages/data-provider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "librechat-data-provider",
-  "version": "0.7.6997",
+  "version": "0.7.6998",
   "description": "data services for librechat apps",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

packages/data-provider/src/config.ts

@@ -531,6 +531,7 @@ export type TStartupConfig = {
   publicSharedLinksEnabled: boolean;
   analyticsGtmId?: string;
   instanceProjectId: string;
+  bundlerURL?: string;
 };
 
 export const configSchema = z.object({