From a058b0d3bd5c45c2c239b600bf09da20cbf4bb99 Mon Sep 17 00:00:00 2001 From: Josh Campbell Date: Tue, 3 Dec 2024 14:21:02 -0800 Subject: [PATCH] docs: Content-Security-Policy and loading HTML apps with Artifacts (#158) I put LibreChat on a VPS and was trying out the Artifacts feature but noticed the apps wouldn't load. The right panel would show: ``` "This content is blocked. Contact the site owner to fix the issue." ``` and then ``` 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 ``` I updated my web server's Content-Security-Policy to include `frame-src 'self' https://*.codesandbox.io` and that fixed the issue. I figured I would document that here for others. --- pages/docs/user_guides/artifacts.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/pages/docs/user_guides/artifacts.mdx b/pages/docs/user_guides/artifacts.mdx index f92724d..b1b3374 100644 --- a/pages/docs/user_guides/artifacts.mdx +++ b/pages/docs/user_guides/artifacts.mdx @@ -24,6 +24,10 @@ description: Discover LibreChat's revolutionary Artifacts feature for instant cr Experience the future of UI/UX design and development with LibreChat's generative capabilities. Bring your ideas to life faster than ever before! +## Content-Security-Policy + +You may need to need to update your web server's Content-Security-Policy to include `frame-src 'self' https://*.codesandbox.io` in order to load generated HTML apps in the Artifacts panel. This is a dependency of the [sandpack](https://sandpack.codesandbox.io/) library. + --- AI News 2024: The Original and BEST Open-Source AI Chat Platform, LibreChat Releases Code Artifacts! This Generative UI Tool Can Generate React, HTML & Diagrams Instantly from a Single Prompt in Your Browser with Any LLM, OpenAI, Anthropic, LLAMA, Mistral, DeepSeek Coder & More Thanks to OLLAMA Integration.