Artifacts - Generative UI

Artifacts let LibreChat Agents render generated React components, HTML, SVG, Markdown, and Mermaid content in a dedicated interactive view. Users can continue the conversation to revise the result while keeping the generated content separate from the chat response.

Enable Artifacts for an Agent

1. Create or edit an Agent.
2. Open Add tools and select Artifacts.
3. Choose an artifact instruction mode.
4. Save the agent.

The available modes are:

• Normal: Injects LibreChat's standard instructions for React, HTML, SVG, Markdown, and Mermaid artifacts.
• shadcn/ui: Adds shadcn/ui component-library guidance for more polished generated interfaces.
• Custom: Keeps artifact rendering enabled but injects no built-in instructions. Put the complete artifact behavior you want in the agent's instructions.

Agent-level configuration is preferred because each agent can use the mode and instructions appropriate to its purpose. The administrator can hide Artifacts by removing the artifacts agent capability.

What Artifacts Support

• Interactive React components and HTML pages
• SVG images and Mermaid diagrams
• Rendered Markdown documents
• Iterative updates through follow-up messages
• Any model available to the configured agent

Preview and Export

Use the fullscreen control in a rendered artifact preview to expand it to the complete browser display. The control follows browser Fullscreen API state, exits normally with Escape or browser controls, and is hidden when fullscreen is unavailable.

Mermaid diagrams appear as compact inline cards that can open in the artifact panel. Export a diagram as SVG or PNG from either the inline card or the panel. Mermaid previews render directly rather than loading the Sandpack bundler; PNG export applies bounded canvas dimensions to protect the browser from oversized diagrams.

Content-Security-Policy

You may 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 library.

Self-Hosting the Sandpack Bundler

Artifacts in LibreChat use CodeSandbox's Sandpack library to securely render HTML/JS code. By default, LibreChat connects to CodeSandbox's public CDN, which may also transmit telemetry for its usage.

For enhanced privacy, security compliance, or isolated network environments, you can self-host the bundler.

Why Self-Host the Sandpack Bundler?

Self-hosting the bundler provides several advantages:

• Privacy & Security: Keep code execution within your own infrastructure
• Reliability: Remove dependency on external services
• Performance: Reduce latency by hosting the bundler in your network
• Compliance: Meet organizational data handling requirements
• Control: Configure and customize to your specific needs

Configuration

Once you have a self-hosted bundler set up, simply configure LibreChat to use it by setting the environment variable:

# `.env` file
SANDPACK_BUNDLER_URL=http://your-bundler-url

General Considerations

Self-hosting the bundler introduces some additional overhead:

• CORS Configuration: You'll need to manage cross-origin resource sharing policies
• Security Management: You become responsible for the security of the bundler service
• Maintenance: Updates and patches will need to be applied manually
• Resource Requirements: Additional server resources will be needed to host the bundler

For detailed instructions on setting up and maintaining your self-hosted bundler, refer to the forked CodeSandbox repository tailored for LibreChat deployment, including the removal of telemetry from Sandpack.