Skip to main content

​
What is Artifactuse?

Artifactuse is a lightweight SDK that transforms AI-generated content into rich, interactive artifacts. Support for code previews, video editors, canvas/whiteboards, forms, social media previews, and more.

​
Features

  • 🎨 Rich Content Detection - Automatically detect and render code blocks, images, videos, maps, embeds
  • 📦 Artifact Cards - Beautiful inline cards for panel artifacts
  • 🖼️ 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

PackageDescription
artifactuseCore SDK with React, Vue, Svelte support
@artifactuse/promptsSystem prompts to teach AI models artifact generation

​
Artifact Types

​
Panel Artifacts

Open in side panel with preview and code view:

Canvas ⭐

Graphics, banners, logos (Pro)

Video ⭐

Intros, animations (Pro)

Code Runtime ⭐

JS & Python execution (Pro)

HTML

Web pages

React

Components

Vue

SFCs

JSON

Preview

Diff

Preview

SVG

Preview
⭐ Pro panels require a Pro subscription. All other panels are free and open source.

​
Inline Artifacts

Render directly in the message:

Forms

Quick inputs, buttons

Social

7 platform previews

Images

Auto-detected with lightbox

Videos

YouTube, Vimeo, Loom

Maps

Google Maps, OpenStreetMap

Embeds

Figma, CodePen, 20+ more

​
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

FrameworkImport PathStatus
Vue 3 / Nuxt 3artifactuse/vue✅
Vue 2 / Nuxt 2artifactuse/vue2✅
React / Next.jsartifactuse/react✅
Svelte / SvelteKitartifactuse/svelte✅