Artifacts

Overview

Artifacts in LibreChat allow AI models to generate interactive content that renders in a dedicated preview panel. This includes code snippets, HTML pages, React components, Mermaid diagrams, and more.

What Are Artifacts?

Artifacts are structured outputs that can be:

Previewed: Rendered in a side panel during the conversation
Edited: Modified directly in the interface
Versioned: Track changes across iterations
Downloaded: Exported for use outside LibreChat

Think of artifacts as interactive “deliverables” from your AI conversation.

Supported Artifact Types

Code
HTML/Web Pages
Mermaid Diagrams
React Components

Syntax-highlighted code in multiple languages:

Python
JavaScript/TypeScript
HTML/CSS
React/JSX
And more…

# Example Python artifact
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

Interactive HTML with CSS and JavaScript:

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; }
    .card { padding: 20px; border: 1px solid #ddd; }
  </style>
</head>
<body>
  <div class="card">
    <h1>Interactive Demo</h1>
    <button onclick="alert('Hello!')">Click Me</button>
  </div>
</body>
</html>

Interactive React components with state:

function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Creating Artifacts

AI models automatically create artifacts when generating appropriate content. You can also request them explicitly:

Implicit Creation
Explicit Request

Create a calculator with HTML, CSS, and JavaScript.

The AI will automatically create an artifact with the interactive calculator.

Generate a Python function to sort a list of dictionaries.
Create it as an artifact so I can copy the code.

Artifact Syntax

AI models use a special directive syntax to create artifacts:

:::artifact{title="My Calculator" type="html" identifier="calc-v1"}
<!DOCTYPE html>
<html>...
:::

Artifact Attributes

title: Display name of the artifact
type: Content type (html, python, javascript, react, mermaid, etc.)
identifier: Unique ID for tracking versions

Enabling Artifacts

Artifacts must be enabled for agents:

Configure in librechat.yaml

# librechat.yaml
endpoints:
  agents:
    capabilities:
      - artifacts  # Enable artifact generation

Enable in Agent Builder

When creating or editing an agent:

Open the agent configuration
Toggle Artifacts in the capabilities section
Save the agent

Artifacts work best with models that support structured output, like GPT-4, Claude, and Gemini.

Artifact Panel Features

Preview Mode

View the rendered output of your artifact:

HTML: Fully interactive web pages
Code: Syntax-highlighted with line numbers
Mermaid: Rendered diagrams
React: Live component previews

Edit Mode

Modify artifacts directly in the code editor:

Syntax highlighting
Auto-completion
Line numbers
Real-time preview updates

Version Control

Track changes across iterations:

// Artifact versioning
{
  id: "calculator_html_calc-v1",
  identifier: "calc-v1",
  index: 1,
  lastUpdateTime: 1709502123456
}

Each time the AI modifies an artifact, a new version is created. Use the version panel to compare or revert changes.

Download Artifacts

Export artifacts for use outside LibreChat:

Click the download icon in the artifact panel
Choose file format (HTML, Python, etc.)
Save to your local machine

Example Use Cases

Data Visualization

Create an interactive bar chart showing sales by quarter.
Use this data: Q1: $45k, Q2: $52k, Q3: $48k, Q4: $61k

The AI creates an HTML artifact with Chart.js or D3.js visualization.

Code Generators

Generate a Python class for managing a todo list with
methods to add, remove, and list items.

Returns a formatted Python code artifact ready to copy.

UI Prototypes

Create a landing page for a SaaS product with:
- Hero section with CTA
- Feature grid (3 columns)
- Pricing table
- Footer with links

Generates a complete HTML/CSS artifact you can iterate on.

Documentation Diagrams

Create a Mermaid sequence diagram showing the OAuth flow
between client, auth server, and resource server.

Produces a Mermaid artifact rendered as a diagram.

Advanced Features

Artifact Context

Artifacts maintain context across the conversation:

// Artifact tracking
const artifact = {
  messageId: "msg-123",
  index: 2,  // 2nd artifact in this message
  content: "...",
  lastUpdateTime: Date.now()
}

Throttled Updates

Artifacts update smoothly during streaming:

// Updates throttled to 25ms for performance
throttle(updateFn, 25)

Route-Specific Rendering

Artifacts only render on the chat route:

if (!isArtifactRoute(location.pathname)) {
  // Skip rendering in other contexts
}

Best Practices

Be specific: Clearly describe what you want the artifact to do
Iterate: Refine artifacts across multiple messages
Test previews: Use preview mode to verify functionality
Download early: Save artifacts you want to keep
Version awareness: Track which version you’re working with

Configuration Reference

# librechat.yaml
endpoints:
  agents:
    capabilities:
      - artifacts

# File size limits for artifact downloads
fileConfig:
  imageGeneration:
    percentage: 100  # Or fixed px: 1024

Troubleshooting

Artifact not rendering

Check that artifacts are enabled for the agent
Verify the artifact type is supported
Look for syntax errors in the generated code
Check browser console for errors

Preview shows blank page

HTML artifacts may have JavaScript errors
Check browser console
Try editing the artifact to fix issues

Download button not working

Ensure the artifact has fully loaded
Check file size limits in configuration
Try a different browser

Get Started

Core Features

Configuration

Deployment

User Management

Overview

What Are Artifacts?

Supported Artifact Types

Creating Artifacts

Artifact Syntax

Enabling Artifacts

Artifact Panel Features

Preview Mode

Edit Mode

Version Control

Download Artifacts

Example Use Cases

Advanced Features

Artifact Context

Throttled Updates

Route-Specific Rendering

Best Practices

Configuration Reference

Troubleshooting

Build docs developers (and LLMs) love

Get Started

Core Features

Configuration

Deployment

User Management

​Overview

​What Are Artifacts?

​Supported Artifact Types

​Creating Artifacts

​Artifact Syntax

​Enabling Artifacts

​Artifact Panel Features

​Preview Mode

​Edit Mode

​Version Control

​Download Artifacts

​Example Use Cases

​Advanced Features

​Artifact Context

​Throttled Updates

​Route-Specific Rendering

​Best Practices

​Configuration Reference

​Troubleshooting

​Related Features

Build docs developers (and LLMs) love

Overview

What Are Artifacts?

Supported Artifact Types

Creating Artifacts

Artifact Syntax

Enabling Artifacts

Artifact Panel Features

Preview Mode

Edit Mode

Version Control

Download Artifacts

Example Use Cases

Advanced Features

Artifact Context

Throttled Updates

Route-Specific Rendering

Best Practices

Configuration Reference

Troubleshooting

Related Features