# Artifacts - Generative UI (https://www.librechat.ai/docs/features/artifacts)

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](/docs/features/agents).
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](/docs/configuration/librechat_yaml/object_structure/agents#capabilities).

<div align="center">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/GfTj7O4gmd0?si=NrtqGoodGpfANBfT" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen={true}></iframe>
</div>

## 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](https://sandpack.codesandbox.io/) 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.](https://sandpack.codesandbox.io/docs/guides/hosting-the-bundler)

### Why Self-Host the Sandpack Bundler?

[Self-hosting the bundler](https://sandpack.codesandbox.io/docs/guides/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:

```bash
# `.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](https://github.com/LibreChat-AI/codesandbox-client) tailored for LibreChat deployment, including the removal of telemetry from Sandpack.