Skip to main content

​
Installation

npm install artifactuse

​
Setup

Initialize Artifactuse with provideArtifactuse: 
<script setup>
import { provideArtifactuse } from 'artifactuse/vue'
import 'artifactuse/styles'

provideArtifactuse({
  theme: 'dark',
  // branding: true, // Set to false to hide "Powered by Artifactuse" (requires license)
})
</script>

​
Syntax Highlighting (Optional)

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

<script setup>
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 { provideArtifactuse } from 'artifactuse/vue'
import 'artifactuse/styles'

provideArtifactuse({ theme: 'dark' })
</script>

​
Components

ArtifactuseAgentMessage

Render AI messages with artifact detection

ArtifactusePanel

Side panel for previews and code

ArtifactusePanelToggle

Toggle button with badge

​
Quick Reference

<template>
  <ArtifactuseAgentMessage 
    :content="message.content"
    :message-id="message.id"
    :typing="isStreaming"
    @form-submit="onFormSubmit"
    @social-copy="onSocialCopy"
    @media-open="onMediaOpen"
  />

  <ArtifactusePanel 
    @ai-request="handleAIRequest"
    @save="handleSave"
    @export="handleExport"
  />

  <ArtifactusePanelToggle />
</template>

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

​
Composables

​
useArtifactuse

Access Artifactuse state and methods: 
<script setup>
import { useArtifactuse } from 'artifactuse/vue'

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

<template>
  <button @click="togglePanel">
    Artifacts ({{ artifactCount }})
  </button>
</template>

​
Events

<script setup>
import { useArtifactuse } from 'artifactuse/vue'
import { onMounted, onUnmounted } from 'vue'

const { on } = useArtifactuse()

onMounted(() => {
  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>

​
Vue 2

For Vue 2 projects, import from artifactuse/vue2: 
<template>
  <div class="app-container">
    <div class="chat">
      <ArtifactuseAgentMessage 
        v-for="msg in messages" 
        :key="msg.id"
        :content="msg.content"
        :message-id="msg.id"
        :typing="msg.isStreaming"
        @form-submit="handleFormSubmit"
        @social-copy="handleSocialCopy"
        @media-open="handleMediaOpen"
      />
      
      <ArtifactusePanelToggle />
    </div>
    
    <ArtifactusePanel @ai-request="handleAIRequest" />
    
    <!-- Required: Portal target for fullscreen/mobile -->
    <portal-target name="artifactuse" />
  </div>
</template>

<script>
import { 
  ArtifactuseAgentMessage,
  ArtifactusePanel,
  ArtifactusePanelToggle,
  provideArtifactuse 
} from 'artifactuse/vue2'
import 'artifactuse/styles'

export default {
  components: {
    ArtifactuseAgentMessage,
    ArtifactusePanel,
    ArtifactusePanelToggle
  },
  setup() {
    provideArtifactuse({ 
      theme: 'dark',
      // branding: true, // Set to false to hide branding (requires license)
    })
    
    // ... your setup code
  }
}
</script>

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#app {
  height: 100%;
}

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

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

​
Vue 2.6 + @vue/composition-api

If you’re using Vue 2.6 with @vue/composition-api or @nuxtjs/composition-api, add this alias to your build config: 
// nuxt.config.js
export default {
  build: {
    extend(config) {
      config.resolve.alias['vue'] = '@vue/composition-api';
    }
  }
}
Vue 2.7+ has the Composition API built-in and works without any alias configuration.

​
Full Example

<template>
  <div class="app-container">
    <div class="chat">
      <ArtifactuseAgentMessage 
        v-for="msg in messages" 
        :key="msg.id"
        :content="msg.content"
        :message-id="msg.id"
        :typing="msg.isStreaming"
        @form-submit="handleFormSubmit"
        @social-copy="handleSocialCopy"
        @media-open="handleMediaOpen"
      />
      
      <ArtifactusePanelToggle />
    </div>
    
    <ArtifactusePanel @ai-request="handleAIRequest" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { 
  ArtifactuseAgentMessage, 
  ArtifactusePanel, 
  ArtifactusePanelToggle,
  provideArtifactuse
} from 'artifactuse/vue'
import 'artifactuse/styles'

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

provideArtifactuse({
  theme: 'dark',
  // branding: true, // Set to false to hide branding (requires license)
})

const messages = ref([])

function handleFormSubmit({ formId, values }) {
  // Send form data back to AI
  sendMessage(`Form submitted: ${JSON.stringify(values)}`)
}

function handleSocialCopy({ platform, text }) {
  console.log('Copied:', platform, text)
}

function handleMediaOpen({ type, src }) {
  console.log('Media opened:', type, src)
}

async function handleAIRequest({ prompt, context }) {
  const response = await yourAI.chat(prompt)
}
</script>

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#app {
  height: 100%;
}

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

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