Skip to main content

Overview

The @artifactuse/prompts package provides system prompts that teach AI models how to generate Artifactuse artifacts.

Installation

npm install @artifactuse/prompts

Usage

Include prompts in your AI’s system message:
import { canvasPrompt, videoPrompt, formPrompt } from '@artifactuse/prompts'

const systemPrompt = `
You are a helpful assistant.

${canvasPrompt}
${videoPrompt}
${formPrompt}
`

const response = await openai.chat.completions.create({
  model: 'gpt-4',
  messages: [
    { role: 'system', content: systemPrompt },
    { role: 'user', content: 'Create a YouTube thumbnail' }
  ]
})

Available Prompts

ImportUse CaseSize
canvasPromptGraphics, banners, logos~4.7KB
videoPromptVideo intros, animations~6.8KB
formPromptInput forms, wizards~1.7KB
socialPromptSocial media previews~1.5KB
htmlPromptWeb pages~0.6KB
jsxPromptReact components~0.7KB
vuePromptVue components~0.5KB
javascriptPromptJavaScript code~0.5KB
pythonPromptPython code~0.5KB
jsonPromptJSON data~0.4KB
svgPromptVector graphics~0.6KB
diffPromptCode diffs~0.5KB
fullPromptAll artifacts~20KB

Selective Import

Only include what you need to minimize token usage:
// Just canvas and video
import { canvasPrompt, videoPrompt } from '@artifactuse/prompts'

// Everything
import { fullPrompt } from '@artifactuse/prompts'

Helper Functions

import { getPrompt, getPrompts } from '@artifactuse/prompts'

// Get single prompt
const prompt = getPrompt('canvas')

// Get multiple prompts combined
const prompts = getPrompts(['canvas', 'video', 'form'])

CommonJS

const { canvasPrompt, videoPrompt } = require('@artifactuse/prompts')

Example: Creative Assistant

import { canvasPrompt, videoPrompt } from '@artifactuse/prompts'

const systemPrompt = `
You are a creative assistant that helps users design graphics and videos.

When users ask for:
- Logos, banners, thumbnails, diagrams → use canvas
- Video intros, animations, title sequences → use video

${canvasPrompt}
${videoPrompt}
`

How Prompts Work

Each prompt contains:
  1. Trigger conditions - When to generate the artifact
  2. Format specification - Code block syntax
  3. Schema - Required and optional properties
  4. Rules - Constraints and best practices
The AI learns to output properly formatted code blocks that Artifactuse can render.