​

What is Artifactuse?

​

Features

• 🎨 Rich Content Detection - Automatically detect and render code blocks, images, videos, maps, embeds
• 📦 Artifact Cards - Beautiful inline cards for panel artifacts
• 👁️ Inline Code Preview - Truncated syntax-highlighted code previews with click-to-open
• 🖼️ Media Lightbox - Click images and PDFs to view fullscreen with zoom and download
• 🖥️ Panel Viewer - Side panel with preview, code view, and split mode
• 📝 Interactive Forms - Inline and panel forms with 17+ field types
• 📱 Social Previews - Platform-accurate previews for Twitter, LinkedIn, Instagram
• 🌗 Theme Support - Dark/light mode with customizable colors
• 🔌 Framework Agnostic - Works with Vue 3, Vue 2, React, Svelte, or vanilla JS
• 📡 Event System - Hook into AI requests, form submissions, exports

​

Packages

​

Artifact Types

​

Panel Artifacts

​

Inline Artifacts

​

How It Works

AI Response → processMessage()
           ↓
    extractCodeBlockArtifacts()
           ↓
    Returns { html, artifacts[] }
           ↓
    ArtifactuseAgentMessage renders:
           ↓
    ┌─────────────────────────────────────┐
    │ type: form + inline  → <InlineForm> │
    │ type: social         → <SocialPreview> │
    │ type: code           → <Card> → Panel │
    │ type: form + panel   → <Card> → Panel │
    │ images/PDFs          → <Viewer> lightbox │
    └─────────────────────────────────────┘

​

Framework Support