librechat-artifacts

Files (1)

• SKILL.md

SKILL.md (first lines)

# LibreChat Artifacts Skill

Generate interactive, rendered content in LibreChat's side panel using the Artifacts feature.

## Overview

Artifacts allow creating living documents that render in a separate UI panel — not just text responses. Use these for visual explanations, interactive demos, and executable code.

## Artifact Types

| Type | MIME Type | Best For |
|------|-----------|----------|
| **Mermaid** | `application/vnd.mermaid` | Flowcharts, sequence diagrams, ER diagrams, Gantt charts, mind maps |
| **React** | `application/vnd.react` | Interactive UI components, dashboards, forms |
| **HTML** | `text/html` | Full web pages, styled content, sandpack apps |
| **SVG** | `image/svg+xml` | Vector graphics, custom illustrations, icons |

## Syntax

Use the artifact wrapper with a unique identifier:

```
:::artifact{identifier="unique-id" type="MIME_TYPE" title="Descriptive Title"}
```LANG
content here
```
:::
```

## When to Use Each Type

### Mermaid Diagrams
**Use when:** Explaining workflows, system architecture, decision trees, processes, timelines

```
:::artifact{identifier="auth-flow" type="application/vnd.mermaid" title="Authentication Flow"}
```mermaid
flowchart TD
    A[User Login] --> B{Valid?}
    B -->|Yes| C[Generate Token]
    B -->|No| D[Show Error]
    C --> E[Redirect to App]
```
:::
```

### React Components
**Use when:** Building interactive demos, showing UI concepts, prototyping interfaces

```
:::artifact{identifier="counter-demo" type="application/vnd.react" title="Counter Component"}
```jsx
import { useState } from 'react';
import { Button } from '@/components/ui/button';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div className="p-4">
      <h2 className="text-xl mb-4">Count: {count}</h2>
      <Button onClick={() => setCount(c => c + 1)}>Increment</Button>
    </div>
  );
}
```
:::
```

### HTML
**Use when:** Creating styled documents, landing pages, interactive forms

```
:::artifact{identifier="styled-card" type="text/html" title="Info Card"}
```html
<div style="padding: 20px; border-radius: 8px; background: #f0f0f0;">
  <h2 style="color: #333;">Hello World</h2>
  <p>This is a styled HTML artifact.</p>
</div>
```
:::
```

### SVG
**Use when:** Custom graphics, data visualizations, icons, illustrations

```
:::artifact{identifier="custom-icon" type="image/svg+xml" title="Custom Icon"}
```svg
<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#4CAF50" />
  <text x="50" y="55" text-anchor="middle" fill="white" font-size="20">OK</text>
</svg>
```
:::
```

## Proactive Triggers

**ALWAYS offer an artifact when the user discusses:**

1. **System design or architecture** → Mermaid flowchart/diagram
2. **Decision trees or logic** → Mermaid flowchart
3. **UI/UX ideas or components** → React or HTML artifact
4. **Data relationships** → Mermaid ER diagram
5. **Processes or workflows** → Mermaid sequence diagram
6. **Visual concepts** → SVG or HTML artifact
7. **Code that should be executable** → Code Interpreter (see below)

**Don't wait to be asked** — proactively say:
> "Want me to visualize this as a [mermaid diagram/react component/etc]?"

## Code Interpreter API

For executing code and showing output, use the Code Interpreter capability:

- **Languages:** Python, Node.js/TS, Go, C/C++, Java, PHP, Rust, Fortran, R
- **Use for:** Data analysis, calculations, file processing, testing code
- **Note:** Requires API subscription at code.librechat.ai

When enabled, the "Run Code" button appears on code blocks.

From consuelohq/openengineer, MIT.

More from consuelohq/openengineer