Skip to main content

​
Installation

npm install artifactuse

​
Setup

Initialize Artifactuse with setArtifactuseContext in your layout: 
<!-- +layout.svelte -->
<script>
  import { setArtifactuseContext } from 'artifactuse/svelte'
  import 'artifactuse/styles'
  
  setArtifactuseContext({ 
    theme: 'dark',
    // branding: true, // Set to false to hide "Powered by Artifactuse" (requires license)
  })
</script>

<slot />

​
Syntax Highlighting (Optional)

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

<!-- +layout.svelte -->
<script>
  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
  
  import { setArtifactuseContext } from 'artifactuse/svelte'
  import 'artifactuse/styles'
  
  setArtifactuseContext({ theme: 'dark' })
</script>

<slot />

​
Components

ArtifactuseAgentMessage

Render AI messages with artifact detection

ArtifactusePanel

Side panel for previews and code

ArtifactusePanelToggle

Toggle button with badge

​
Quick Reference

<script>
  import { 
    ArtifactuseAgentMessage, 
    ArtifactusePanel, 
    ArtifactusePanelToggle 
  } from 'artifactuse/svelte'
</script>

<ArtifactuseAgentMessage 
  content={message.content}
  messageId={message.id}
  typing={isStreaming}
  on:formSubmit={handleFormSubmit}
  on:socialCopy={handleSocialCopy}
  on:mediaOpen={handleMediaOpen}
/>

<ArtifactusePanel 
  on:aiRequest={handleAIRequest}
  on:save={handleSave}
  on:export={handleExport}
/>

<ArtifactusePanelToggle />

​
Context

​
getArtifactuseContext

Access Artifactuse state and methods: 
<script>
  import { getArtifactuseContext } from 'artifactuse/svelte'
  
  const {
    // Stores (reactive)
    state,
    activeArtifact,
    artifactCount,
    hasArtifacts,
    
    // Methods
    processMessage,
    openArtifact,
    closePanel,
    togglePanel,
    toggleFullscreen,
    setViewMode,      // 'preview' | 'code' | 'split'
    getPanelUrl,
    getTheme,
    setTheme,
    
    // Events
    on,
    off,
  } = getArtifactuseContext()
</script>

<button on:click={togglePanel}>
  Artifacts ({$artifactCount})
</button>

​
Events

<script>
  import { getArtifactuseContext } from 'artifactuse/svelte'
  import { onMount } from 'svelte'
  
  const { on } = getArtifactuseContext()
  
  onMount(() => {
    on('ai:request', async ({ prompt, context }) => {
      const response = await yourAI.chat(prompt)
    })
    
    on('form:submit', ({ formId, values }) => {
      console.log('Form submitted:', values)
    })
    
    on('social:copy', ({ platform, text }) => {
      console.log('Copied:', platform, text)
    })
    
    on('media:open', ({ type, src }) => {
      console.log('Media opened:', type, src)
    })
  })
</script>

​
Full Example

<!-- +page.svelte -->
<script>
  import { 
    ArtifactuseAgentMessage, 
    ArtifactusePanel, 
    ArtifactusePanelToggle,
    getArtifactuseContext
  } from 'artifactuse/svelte'
  import { onMount } from 'svelte'
  
  // Optional: Prism.js for syntax highlighting
  import Prism from 'prismjs'
  import 'prismjs/components/prism-javascript'
  import 'prismjs/themes/prism-tomorrow.css'
  
  let messages = []
  
  const { on } = getArtifactuseContext()
  
  onMount(() => {
    on('form:submit', ({ formId, values }) => {
      sendMessage(`Form submitted: ${JSON.stringify(values)}`)
    })
  })
  
  function handleFormSubmit(event) {
    console.log('Form:', event.detail)
  }
  
  function handleSocialCopy(event) {
    console.log('Copied:', event.detail)
  }
  
  function handleMediaOpen(event) {
    console.log('Media opened:', event.detail)
  }
  
  async function handleAIRequest(event) {
    const { prompt, context } = event.detail
    const response = await yourAI.chat(prompt)
  }
</script>

<div class="app-container">
  <div class="chat">
    {#each messages as msg (msg.id)}
      <ArtifactuseAgentMessage 
        content={msg.content}
        messageId={msg.id}
        typing={msg.isStreaming}
        on:formSubmit={handleFormSubmit}
        on:socialCopy={handleSocialCopy}
        on:mediaOpen={handleMediaOpen}
      />
    {/each}
    
    <ArtifactusePanelToggle />
  </div>
  
  <ArtifactusePanel on:aiRequest={handleAIRequest} />
</div>

<style>
  .app-container {
    display: flex;
    height: 100%;
    overflow: hidden;
  }
  
  .chat {
    flex: 1;
    padding: 20px;
    min-width: 0;
    overflow-y: auto;
  }
</style>