librechat-react-artifacts

Files (1)

• SKILL.md

SKILL.md (first lines)

# LibreChat React Artifacts

Build interactive React components directly in LibreChat's side panel. This is one of the most powerful features — use it constantly for demos, dashboards, calculators, and interactive tools.

## Overview

React artifacts render actual React components in a sandboxed environment with:
- Full JSX support
- Tailwind CSS for styling
- shadcn/ui components pre-installed
- React hooks (useState, useEffect, etc.)
- Real-time interactivity

## When to Use React Artifacts

**ALWAYS consider a React artifact when discussing:**

| Scenario | React Artifact Use |
|----------|-------------------|
| UI/UX ideas | Build the actual component |
| Data visualization | Interactive charts, dashboards |
| Calculators/tools | Working calculators, converters |
| Forms/interfaces | Input validation, multi-step flows |
| Prototypes | Clickable demos of features |
| Admin panels | CRUD interfaces, data tables |
| Configurators | Pricing calculators, product builders |
| Timers/counters | Working countdowns, progress trackers |
| Games | Simple interactive games |
| Surveys/wizards | Multi-step user flows |

**Don't wait to be asked** — proactively say:
> "Want me to build this as a working React component so you can interact with it?"

## Syntax

```
:::artifact{identifier="unique-name" type="application/vnd.react" title="Descriptive Title"}
```jsx
import { useState } from 'react';
import { Button, Card, Input } from '@/components/ui';

export default function ComponentName() {
  const [state, setState] = useState(initialValue);
  
  return (
    <div className="p-4">
      {/* Your JSX here */}
    </div>
  );
}
```
:::
```

## Available Imports

**React:**
```jsx
import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
```

**shadcn/ui Components:**
```jsx
import { 
  Button, Card, Input, Label, Select, 
  Tabs, Dialog, DropdownMenu, Badge,
  Table, Textarea, Switch, Checkbox,
  RadioGroup, Slider, Progress, Alert,
  Avatar, Separator, Skeleton, Tooltip
} from '@/components/ui';
```

**Icons:**
```jsx
import { 
  Search, Plus, Trash, Edit, Save, 
  Check, X, ChevronDown, Menu, Settings,
  User, Bell, Home, Calendar, Clock
} from 'lucide-react';
```

**Utilities:**
```jsx
import { cn } from '@/lib/utils';  // clsx + tailwind-merge
```

## Examples by Use Case

### 1. Interactive Calculator
```jsx
:::artifact{identifier="price-calculator" type="application/vnd.react" title="Pricing Calculator"}
```jsx
import { useState } from 'react';
import { Card, Button, Input, Label } from '@/components/ui';

export default function PriceCalculator() {
  const [users, setUsers] = useState(10);
  const [pricePerUser] = useState(29);
  
  const total = users * pricePerUser;
  
  return (
    <Card className="p-6 max-w-md">
      <h2 className="text-xl font-bold mb-4">Pricing Calculator</h2>
      <div className="space-y-4">
        <div>
          <Label>Number of Users</Label>
          <Input 
            type="number" 
            value={users} 
            onChange={(e) => setUsers(Number(e.target.value))}
          />
        </div>
        <div className="pt-4 border-t">
          <div className="flex justify-between text-lg">
            <span>Total per month:</span>
            <span className="font-bold">${total}</span>
          </div>
        </div>
      </div>

From consuelohq/openengineer, MIT.

More from consuelohq/openengineer