Installation
npm install artifactuse
yarn add artifactuse
pnpm add artifactuse
Syntax Highlighting (Optional)
For code syntax highlighting in the panel, add Prism.js:npm install prismjs
<!-- Add to your HTML head -->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-javascript.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-tomorrow.css" rel="stylesheet" />
// If using npm, import in your app entry
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 you prefer
Basic Usage
- Vue 3
- Vue 2
- React
- Svelte
<template>
<div class="app-container">
<div class="chat">
<ArtifactuseAgentMessage
v-for="msg in messages"
:key="msg.id"
:content="msg.content"
:message-id="msg.id"
@form-submit="handleFormSubmit"
@social-copy="handleSocialCopy"
/>
<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'
provideArtifactuse({
theme: 'dark',
// branding: true, // Set to false to hide "Powered by Artifactuse" (requires license)
})
const messages = ref([])
function handleFormSubmit({ formId, values }) {
console.log('Form submitted:', formId, values)
}
function handleSocialCopy({ platform, text }) {
console.log('Copied:', platform, text)
}
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>
<template>
<div class="app-container">
<div class="chat">
<ArtifactuseAgentMessage
v-for="msg in messages"
:key="msg.id"
:content="msg.content"
:message-id="msg.id"
@form-submit="handleFormSubmit"
@social-copy="handleSocialCopy"
/>
<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 "Powered by Artifactuse" (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 with
@vue/composition-api requires an alias. See Vue docs for details.import { useState } from 'react'
import {
ArtifactuseProvider,
ArtifactuseAgentMessage,
ArtifactusePanel,
ArtifactusePanelToggle
} from 'artifactuse/react'
import 'artifactuse/styles'
import './styles.css'
function App() {
return (
<ArtifactuseProvider config={{
theme: 'dark',
// branding: true, // Set to false to hide "Powered by Artifactuse" (requires license)
}}>
<Chat />
</ArtifactuseProvider>
)
}
function Chat() {
const [messages, setMessages] = useState([])
return (
<div className="app-container">
<div className="chat">
{messages.map(msg => (
<ArtifactuseAgentMessage
key={msg.id}
content={msg.content}
messageId={msg.id}
onFormSubmit={handleFormSubmit}
onSocialCopy={handleSocialCopy}
/>
))}
<ArtifactusePanelToggle />
</div>
<ArtifactusePanel onAIRequest={handleAIRequest} />
</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;
}
<!-- +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 />
<style>
:global(html), :global(body) {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
</style>
<!-- Chat.svelte -->
<script>
import {
ArtifactuseAgentMessage,
ArtifactusePanel,
ArtifactusePanelToggle
} from 'artifactuse/svelte'
</script>
<div class="app-container">
<div class="chat">
{#each messages as msg (msg.id)}
<ArtifactuseAgentMessage
content={msg.content}
messageId={msg.id}
on:formSubmit={handleFormSubmit}
on:socialCopy={handleSocialCopy}
/>
{/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>
Add AI Prompts
Install the prompts package to teach your AI how to generate artifacts:npm install @artifactuse/prompts
import { canvasPrompt, videoPrompt } from '@artifactuse/prompts'
const systemPrompt = `
You are a helpful assistant.
${canvasPrompt}
${videoPrompt}
`
const response = await openai.chat.completions.create({
model: 'gpt-4',
messages: [
{ role: 'system', content: systemPrompt },
{ role: 'user', content: 'Create a YouTube thumbnail' }
]
})
Next Steps
Frameworks
Detailed setup for React, Vue, Svelte
Artifacts
Learn about each artifact type
AI Prompts
Configure AI to generate artifacts
Theming
Customize colors and styles