Prompt Templates

createPrompt

Variable names are inferred from the template string, so missing or misspelled variables are type errors:

import { createPrompt } from 'vue-llm'

const translate = createPrompt('Translate {{ text }} to {{lang}}.', {
  defaults: { lang: 'English' },
})

translate.render({ text: 'Hola' })            // 'Translate Hola to English.'
translate.render({ text: 'Hola', lang: 'German' })
translate.render({ txt: 'Hola' })             // ✗ type error
translate.variables                           // ['text', 'lang']

• Values may be strings, numbers or booleans.
• A missing value throws Missing prompt variable "name" at runtime.
• Escape a placeholder with a backslash: \ renders as .

usePrompt

A computed render that follows reactive variables:

import { usePrompt, useChat } from 'vue-llm'

const lang = ref('French')
const system = usePrompt('Always reply in {{lang}}.', () => ({ lang: lang.value }))

const chat = useChat({ provider: ai, model: 'gpt-4o', system })

system in useChat, useCompletion and useObject accepts a ref or getter and is read on every request, so changing lang affects the next message.

createChatPrompt

Templates spanning several messages:

import { createChatPrompt } from 'vue-llm'

const tutor = createChatPrompt([
  { role: 'system', content: 'You are a {{level}} tutor.' },
  { role: 'user', content: 'Explain {{topic}}.' },
])

tutor.render({ level: 'patient', topic: 'recursion' })        // ChatMessage[] for provider.chat()
tutor.toUIMessages({ level: 'patient', topic: 'recursion' })  // UIMessage[] for initialMessages

System messages in initialMessages are merged with the system option into a single system prompt.