Artifacts

Artifacts let an agent hand you something you can look at and run instead of a wall of code: a React component, an HTML page, an SVG, a Markdown document, or a Mermaid diagram. The result opens in a panel next to the chat, where you can preview it, read and edit the source, and download it.

Turn on artifacts for an agent

Artifacts belong to an agent, so the agent you chat with decides whether you get them.

The mode controls which instructions LibreChat gives the model about artifacts:

• Normal: the standard instructions. The agent can produce React, HTML, SVG, Markdown, and Mermaid artifacts.
• shadcn/ui: adds instructions for the shadcn/ui component library, which helps when you want polished interface mockups built from prebuilt components.
• Custom: keeps the panel and rendering on but sends no built-in instructions. Your agent's own instructions have to teach the model the artifact syntax and which types it may use.

For Custom mode, the instructions need to show the wrapper LibreChat looks for:

:::artifact{identifier="unique-id" type="text/html" title="Short Title"}
```
Artifact content here
```
:::

type is one of text/html, application/vnd.react, image/svg+xml, application/vnd.mermaid, or text/markdown.

Opening an artifact

When the agent writes an artifact, the message shows a row with the artifact's title and type instead of the raw code. Click it to open the panel, and click it again to close it. If a conversation produced several artifacts, a version menu in the panel header lets you switch between them.

Mermaid code blocks render as compact diagram cards in any chat, whether or not the agent has artifacts enabled. Use Open as artifact on a diagram to move it into the panel.

Working in the panel

• Preview renders the artifact. Refresh reloads the preview, which is useful after an interactive component gets into a bad state.
• Code shows the source in an editor. You can edit it once the response has finished streaming, and your changes are saved back to the message, so the preview and later visits show the edited version.
• The copy button copies the source. Download saves it as a file named after the artifact's title. A file that came from code execution downloads as the original file if you haven't edited it; edited or preview-only content gets .preview in its name so you don't mistake it for the original.
• Mermaid diagrams have Export as SVG and Export as PNG instead, both in the panel and on the inline diagram.
• Enter full screen expands the preview to the whole screen; press Escape to leave. The button is hidden when your browser doesn't allow full screen.
• Open in new window moves the panel into a separate browser window, which is handy on a second monitor. The artifact keeps updating while the response streams, and unsaved code edits come along. Keep the chat tab open, since closing it also closes the window. Dock back to panel (or closing the window) brings it back, and LibreChat remembers the window's size and position. If nothing opens, allow pop-ups for your LibreChat site. The button isn't shown on narrow mobile layouts.

The preview runs in a sandboxed iframe using CodeSandbox's Sandpack. React artifacts can import a fixed set of common libraries; the model is told what is available, and anything else will fail to load.

Files that code execution writes, such as HTML reports, Word documents, spreadsheets, and slide decks, also open in this panel. See Code Interpreter for how those previews work.

Setup

Artifacts are on by default for agents: the artifacts agent capability is enabled unless an admin removes it, and each agent still needs Artifacts added in its tools. Admins can also enable artifacts on a model spec, self-host the Sandpack bundler, or turn off the new-window option. See Artifacts configuration.