Skip to main content

​
Installation

npm install artifactuse

​
Setup

Wrap your app with ArtifactuseProvider: 
import { ArtifactuseProvider } from 'artifactuse/react'
import 'artifactuse/styles'

function App() {
  return (
    <ArtifactuseProvider config={{ 
      theme: 'dark',
      // branding: true, // Set to false to hide "Powered by Artifactuse" (requires license)
    }}>
      <YourApp />
    </ArtifactuseProvider>
  )
}

​
Syntax Highlighting (Optional)

For code syntax highlighting, add Prism.js: 
npm install prismjs

// In your app entry (e.g., App.jsx or _app.jsx)
import Prism from 'prismjs'
import 'prismjs/components/prism-javascript'
import 'prismjs/components/prism-typescript'
import 'prismjs/components/prism-python'
import 'prismjs/themes/prism-tomorrow.css' // or any theme

​
Components

ArtifactuseAgentMessage

Render AI messages with artifact detection

ArtifactusePanel

Side panel for previews and code

ArtifactusePanelToggle

Toggle button with badge

​
Quick Reference

import { 
  ArtifactuseAgentMessage, 
  ArtifactusePanel, 
  ArtifactusePanelToggle 
} from 'artifactuse/react'

<ArtifactuseAgentMessage 
  content={message.content}
  messageId={message.id}
  typing={isStreaming}
  onFormSubmit={({ formId, values }) => {}}
  onSocialCopy={({ platform, text }) => {}}
  onMediaOpen={({ type, src }) => {}}
/>

<ArtifactusePanel 
  onAIRequest={async ({ prompt, context }) => {}}
  onSave={({ artifactId, data }) => {}}
  onExport={({ artifactId, blob, filename }) => {}}
/>

<ArtifactusePanelToggle />

​
Hooks

​
useArtifactuse

Access Artifactuse state and methods: 
import { useArtifactuse } from 'artifactuse/react'

function MyComponent() {
  const {
    // State
    state,
    activeArtifact,
    artifactCount,
    hasArtifacts,
    
    // Methods
    processMessage,
    openArtifact,
    closePanel,
    togglePanel,
    toggleFullscreen,
    setViewMode,      // 'preview' | 'code' | 'split'
    getPanelUrl,
    getTheme,
    setTheme,
    
    // Events
    on,
    off,
  } = useArtifactuse()
  
  return (
    <button onClick={togglePanel}>
      Artifacts ({artifactCount})
    </button>
  )
}

​
Events

const { on } = useArtifactuse()

useEffect(() => {
  const unsubscribe = on('ai:request', async ({ prompt, context }) => {
    const response = await yourAI.chat(prompt)
  })
  
  return unsubscribe
}, [])
EventPayloadDescription
ai:request{ prompt, context, requestId }AI assistance requested
save:request{ artifactId, data }Save requested
export:complete{ artifactId, blob, filename }Export completed
form:submit{ formId, action, values }Form submitted
form:cancel{ formId }Form cancelled
social:copy{ platform, text }Social text copied
media:open{ type, src, alt, caption }Media opened in lightbox

​
Full Example

import { useState, useEffect } from 'react'
import { 
  ArtifactuseProvider,
  ArtifactuseAgentMessage, 
  ArtifactusePanel, 
  ArtifactusePanelToggle,
  useArtifactuse 
} from 'artifactuse/react'
import 'artifactuse/styles'
import './styles.css'

// Optional: Prism.js for syntax highlighting
import Prism from 'prismjs'
import 'prismjs/components/prism-javascript'
import 'prismjs/themes/prism-tomorrow.css'

function App() {
  return (
    <ArtifactuseProvider config={{ 
      theme: 'dark',
      // branding: true, // Set to false to hide branding (requires license)
    }}>
      <Chat />
    </ArtifactuseProvider>
  )
}

function Chat() {
  const [messages, setMessages] = useState([])
  const { on } = useArtifactuse()
  
  useEffect(() => {
    on('form:submit', ({ formId, values }) => {
      // Send form data back to AI
      sendMessage(`Form submitted: ${JSON.stringify(values)}`)
    })
  }, [])
  
  return (
    <div className="app-container">
      <div className="chat">
        {messages.map(msg => (
          <ArtifactuseAgentMessage 
            key={msg.id}
            content={msg.content}
            messageId={msg.id}
            typing={msg.isStreaming}
          />
        ))}
        
        <ArtifactusePanelToggle />
      </div>
      
      <ArtifactusePanel />
    </div>
  )
}

/* styles.css */
html, body, #root {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.app-container {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.chat {
  flex: 1;
  padding: 20px;
  min-width: 0;
  overflow-y: auto;
}