LibreChat Artifacts: Enable, Use, and Troubleshoot
Enable LibreChat Artifacts to render interactive HTML, React, and Mermaid in chat. Setup guide covering modes, limits, security, and troubleshooting tips.
- Artifacts render interactive HTML, React, SVG, Markdown, and Mermaid diagrams directly in chat, replacing static code blocks.
- Enable artifacts globally in admin settings, choose a rendering mode (public CodeSandbox or self-hosted), then enable per agent.
- File size limit is 128 MB; most artifacts run under 1 MB and render instantly in the browser.
- Self-hosted rendering keeps code on-premises but adds Docker infrastructure overhead compared to public CDN.
- ChatGPT Canvas was removed May 28, 2026; Claude Artifacts and LibreChat Artifacts are the remaining interactive options.
LibreChat Artifacts let your AI models render interactive HTML, React components, Mermaid diagrams, and more directly in the chat interface. Instead of showing code blocks, artifacts display functional previews. You can enable them per agent, set the rendering mode, and choose between public CodeSandbox or self-hosted servers. This guide walks through setup, capabilities, limits, and security tradeoffs.
What Are LibreChat Artifacts?
Artifacts are sandboxed previews of code, rendered in a side panel next to the chat. Your AI model generates HTML, React, SVG, or Markdown. LibreChat detects artifact-tagged code blocks and displays them live instead of plain text. You can interact with the artifact: click buttons, fill forms, run calculations, or edit the code. Code blocks remain available; artifacts are opt-in per conversation and agent.
This differs from traditional code blocks in one core way: execution. A code block is inert text. An artifact is an interactive environment. Your team can prototype without leaving the chat. Design tools, data visualizers, and interactive forms all work. The artifact stays live in the panel; the conversation continues below. You reference it, refine it, and iterate without jumping between tabs.
LibreChat uses CodeSandbox's Sandpack as the default rendering engine. Sandpack is a lightweight browser-based bundler that runs in an iframe, isolated from your instance. You can also self-host the bundler for air-gapped deployments or compliance reasons. This flexibility means artifacts fit both fast prototyping and regulated environments.
What Can Artifacts Render?
Artifacts support React (JSX), HTML5, SVG, Markdown, and Mermaid diagrams. Each type has a use case. React is for interactive UIs: dashboards, forms, data tables. HTML5 is for static or interactive pages: landing pages, presentations, infographics. SVG is for vector graphics and animations. Markdown is for formatted text and documentation previews. Mermaid is for flowcharts, sequence diagrams, and architecture diagrams.
Examples: A model could generate a React component that calculates loan payments with sliders. It could output an HTML page with a color picker and live preview. It could render a Mermaid flowchart showing your onboarding process. It could show SVG animations or a Markdown resume. Artifacts auto-detect the language (React, HTML, Markdown, Mermaid, SVG) based on the code block syntax the model uses.
The rendering panel shows the live output. Below it, you see the code. You can edit the code directly in the artifact editor, and the preview updates in real-time. You can also download the artifact as a file, open it in a new browser window, or copy the code to reuse elsewhere. This makes artifacts useful for both exploration and production.
How to Enable Artifacts in Your Agent
Enable artifacts at the instance level first, then per agent. Log in as an admin to your LibreChat instance. Navigate to Artifacts in the configuration. Enable the feature globally. Then set the rendering mode: CodeSandbox (default, public CDN), or self-hosted bundler. If you choose self-hosted, you will deploy the static-browser-server or codesandbox-client Docker image. This adds infrastructure but gives you control over rendering and keeps code on-premises.
Once enabled globally, go to your agent settings. Check "Enable Artifacts" in the agent configuration. Save. Now that agent will create artifacts when the model outputs code in the right format. For users: artifacts appear automatically when an agent is configured to use them and the model generates artifact-tagged code. Users do not enable them manually; they see the panel appear. Users can open artifacts in fullscreen, download them, or copy the code. They cannot disable artifacts if the agent has them on.
For teams using managed LibreChat hosting, the global setup is already complete. You only need to enable artifacts per agent.
Understanding Artifact Modes
LibreChat supports three rendering modes: Normal, shadcn/ui, and Custom. Normal mode renders your code as-is, in an iframe. The model generates React, HTML, Mermaid, SVG, or Markdown. LibreChat executes it. No styling is applied; your code controls the appearance. Use Normal if you want full control and the model's output is complete and styled.
shadcn/ui mode wraps React components in a pre-built UI library. shadcn/ui is a collection of accessible React components based on Radix UI and Tailwind CSS. If your model generates partial React code, LibreChat can inject it into a shadcn/ui context. This adds consistent styling and layout without your code defining it. Use shadcn/ui if you want fast, styled UIs from minimal model output.
Custom mode lets you define a wrapper or template. You specify a custom HTML template or React layout. LibreChat injects the model's output into it. Use Custom if you have branded styling or a specific layout you want every artifact to follow. This requires template setup in your instance configuration.
Most teams use Normal or shadcn/ui. Normal is safer and more predictable. shadcn/ui is faster for prototyping. The choice depends on your model's sophistication and your styling needs.
Working with the Artifact Panel
The artifact panel appears on the right side of the chat (on desktop) or below the chat (on mobile). It shows the live preview at the top, code editor below. The toolbar above the code offers several controls. Edit mode toggles whether you can modify code. Download lets you save the artifact as a file (HTML, JSX, SVG, Markdown). Open in New Window opens the artifact fullscreen in a new browser tab. Copy Code copies the code to your clipboard. Fullscreen maximizes the editor.
The code editor is a basic Monaco editor (VS Code-like). Syntax highlighting, line numbers, and indentation are built in. Changes you make update the preview live. You can edit alongside the model as the model generates updates, or you can refactor after the model finishes.
If rendering fails, you see an error message in the preview area. Common errors: syntax errors in React or HTML, missing dependencies, CSP (Content Security Policy) blocks. The error includes line numbers and stack traces. Copy it and ask the model to fix it. The error message tells you exactly what went wrong.
Practical Limits and Best Practices
File size limit is 128 MB by default. Artifacts exceeding this fail to render. In practice, 128 MB is vast for code; most interactive prototypes are under 1 MB. If your artifact is near the limit, it is likely over-complicated or over-loaded with data. Split it or cache data on a backend.
Supported libraries in React mode include React itself, commonly used npm packages like lodash, moment, axios, and react-query, if available in the Sandpack CDN. Not all npm packages are supported; the bundler has a curated list. If you need a library not in the list, you cannot import it from CDN. Self-hosted bundlers can be customized to include additional packages, but this requires Docker and instance management.
Performance limits: Complex React components with heavy re-renders, large datasets, or real-time updates can lag in Sandpack. The iframe has browser memory limits. If your artifact uses 100 MB of data or complex graphics libraries, rendering slows. Keep artifacts focused and responsive. Use pagination or virtual scrolling for large datasets. Best practice: Ask your model to generate simple, readable code. Avoid bloated frameworks or heavy dependencies. Mermaid diagrams and SVG animations are lightweight and render fast.
LibreChat Artifacts vs Claude Artifacts vs ChatGPT Canvas
Claude Artifacts (from Anthropic's Claude products) and LibreChat Artifacts both render code in a side panel. ChatGPT Canvas existed (Canvas was a separate panel for document editing and code generation, launched in October 2024), but it was removed on May 28, 2026. You cannot use Canvas anymore on ChatGPT. If you were using Canvas, you need to migrate to Claude Artifacts or LibreChat Artifacts.
Feature comparison: Both Claude and LibreChat render React, HTML, SVG. Claude also renders HTML documents and offers export to PDF or file. LibreChat supports Mermaid diagrams, which Claude does not natively expose in the same way. Both use browser-based sandboxing, but Claude is cloud-hosted (proprietary infrastructure); LibreChat is self-hosted or managed. With Opsily managed hosting, you get a managed instance at $16/month, and artifacts are included.
Sharing: Claude Artifacts can be shared via URL (claude.ai/share/...). LibreChat artifacts are not shareable via public URL; they live in your chat history. If you need to share artifacts, you download the code and send it, or use LibreChat's team sharing if your instance supports it.
Canvas is gone, so do not plan around it. Claude Artifacts are proprietary and cloud-based. LibreChat Artifacts are open-source and yours to control. Choose based on your infrastructure preference: managed cloud (Claude) or self-hosted / managed (LibreChat).
Security: Public CDN vs Self-Hosted Rendering
By default, LibreChat uses CodeSandbox's Sandpack from a public CDN. Sandpack runs in an iframe on their servers. Your artifact code is sent to CodeSandbox, rendered, and the preview is displayed in your browser. CodeSandbox is GDPR-compliant and widely used; it is a reasonable default. However, if your artifacts contain proprietary code, sensitive data, or you are in a regulated industry (finance, healthcare), sending code to a public CDN may violate policy.
Self-hosted rendering is the alternative. LibreChat offers the static-browser-server and codesandbox-client Docker images. You host these on your own infrastructure or private cloud. Artifacts are rendered locally, never sent to external CDNs. This adds deployment complexity: you must run two additional Docker containers, ensure they are updated, and monitor them. But it keeps all code and data on-premises. With managed LibreChat, you control the artifact endpoint while we handle the LLM side.
HTML and React in artifacts can include scripts. If an artifact is malicious (deliberately or by mistake), the script could access the browser context (cookies, local storage, other tabs). The iframe sandbox mitigates this but is not foolproof. Always trust your source. If users upload code to your instance, audit it before rendering. CSP (Content Security Policy) headers restrict what resources artifacts can load, adding a layer of protection.
Troubleshooting Common Issues
Artifact does not appear: Check that artifacts are enabled globally (admin settings) and on the agent (agent configuration). Verify that your model is actually generating artifact-tagged code. Some models (like smaller open-source models) may not understand the artifact format. Ask the model explicitly: "Create an artifact with React code for [task]."
Artifact appears but preview is blank: Check browser console for errors. Often this is a CSP (Content Security Policy) block. LibreChat has CSP headers that restrict what resources artifacts can load. If an artifact tries to load an image or stylesheet from a CDN not in the CSP allowlist, it fails silently. Solution: whitelist the CDN in your instance CSP settings, or use base64-encoded data URIs for images.
Code is malformed or fails to render: Look at the error message in the artifact preview. React syntax errors, missing dependencies, or undefined variables all surface here. Ask the model to fix the code. You can also edit the code directly in the artifact editor and see the preview update in real-time. This is often the fastest way to iterate.
Self-hosted rendering not working: If you chose self-hosted mode, verify that the static-browser-server or codesandbox-client container is running and accessible from your LibreChat instance. Check logs for connection errors. Verify the URL you configured points to the correct endpoint. If you are using managed LibreChat, contact support to confirm the bundler URL is reachable.
Model not generating artifacts: Some models do not understand the artifact protocol. Try rephrasing your prompts. Instead of "write code," try "create an artifact with HTML code that..." or "Write an interactive React component that..." Larger models (GPT-4, Claude 3.5) are more reliable at following artifact syntax.
Frequently Asked Questions
What are LibreChat Artifacts?
Sandboxed previews of code rendered live in a chat panel. Your model generates HTML, React, SVG, Markdown, or Mermaid. LibreChat displays them interactively instead of as plain text blocks. You can interact with them and edit the code live.
How do I enable Code Artifacts in LibreChat?
Enable artifacts globally in admin settings (Artifacts feature toggle), choose a rendering mode (CodeSandbox or self-hosted), then enable artifacts on your agent. Users see them automatically when the agent is configured.
What file types can LibreChat Artifacts render?
React (JSX), HTML5, SVG, Markdown, and Mermaid diagrams. Each type serves a different purpose, from interactive forms (React) to flowcharts (Mermaid) to static documentation (Markdown).
How do LibreChat Artifacts compare to Claude Artifacts?
Both render code in a side panel and use browser sandboxing. Claude is cloud-hosted and proprietary; LibreChat is self-hosted and open-source. Claude offers PDF export; LibreChat supports Mermaid diagrams natively. Claude requires a subscription; LibreChat is free or managed for a monthly fee.
Can you self-host LibreChat Artifacts rendering?
Yes. Deploy the static-browser-server or codesandbox-client Docker image on your infrastructure. Configure LibreChat to use your local bundler via URL. This keeps all code on-premises and ensures data never leaves your network.
Do LibreChat Artifacts work offline?
Artifacts require a browser and connection to the rendering engine. If you self-host the bundler, internet is not required; everything stays on your network. Public CodeSandbox rendering requires internet access to their CDN.
What security risks are there with rendering HTML in Artifacts?
HTML and React can include scripts. Iframes sandbox them, but always trust your source. Malicious code could access browser context (cookies, local storage). CSP headers restrict resource loading, adding protection. If users submit code, audit it first.
How do I troubleshoot artifacts not displaying?
Check that artifacts are enabled globally and on the agent. Check browser console for CSP errors. Verify the model is generating artifact-tagged code. If self-hosting, check rendering endpoint logs and verify the container is running.
The Bottom Line
LibreChat Artifacts turn chat into a collaborative IDE. Your team generates interactive prototypes, documents, and diagrams without leaving the conversation. Setup is straightforward for public rendering; self-hosted adds complexity but keeps proprietary code on-premises.
Limits are practical (128 MB file size, CDN library constraints), not prohibitive. Security depends on your choice: public CDN is simpler, self-hosted is more control. Canvas is gone; Claude Artifacts and LibreChat Artifacts are your current options.
The main tradeoff is infrastructure. Opsily's hosted LibreChat service handles setup and scaling so you can focus on using artifacts, not managing servers.