Prompt Library

Searchable, filterable library of prompt templates with {{variables}} filled in a dialog before use.

Import

import { PromptLibrary } from '@marbleui/ui'

Props

<PromptLibrary>

Prop	Type	Default
prompts *required	`PromptTemplate[]`	`—`
allLabel	`string`	`'All'`
className	`string`	`—`
onUse	`(text: string) => void`	`—`

Usage notes

Searchable, category-filtered grid of prompt templates. {{variables}} become fields in a dialog before the prompt is sent or copied. For a few starter prompts in an empty chat use PromptSuggestions.

<PromptLibrary
  prompts={[
    { id: 'meeting', title: 'Summarize a meeting', category: 'Writing', body: 'Summarize the {{meeting}} notes into decisions and owners.', uses: 128 },
    { id: 'sql', title: 'Explain a SQL query', category: 'Engineering', body: 'Explain what this {{dialect}} query does.' },
  ]}
  onUse={(text) => sendMessage(text)}
/>

Variable names are word characters ({{due_date}} is labelled “due date”). Empty blanks stay as {{name}}; sending isn’t blocked.
“Send to chat” calls onUse with the filled text, clears the fields and closes the dialog. The copy icon copies the raw body.
Search matches title and body. uses is display-only.
Each card’s buttons are named after the prompt (“Use Summarize a meeting”, “Copy Summarize a meeting template”).
The “All” filter is separate from your categories, so a category called “All” works; rename the filter with allLabel. A status line announces the match count after a search or filter change.

Example source · show

import { useState } from 'react'
import { PromptLibrary } from './prompt-library'

const prompts = [
  { id: '1', title: 'Summarize a meeting', category: 'Writing', body: 'Summarize the {{meeting}} notes below into decisions, owners and deadlines. Keep it under {{words}} words.', uses: 128 },
  { id: '2', title: 'Explain a SQL query', category: 'Engineering', body: 'Explain what this {{dialect}} query does, step by step, and suggest one performance improvement.', uses: 94 },
  { id: '3', title: 'Churn risk report', category: 'Analytics', body: 'List the {{count}} accounts most at risk of churning this quarter, with the top reason for each.', uses: 61 },
  { id: '4', title: 'Launch email', category: 'Writing', body: 'Write a launch email for {{feature}} aimed at {{audience}}. Friendly, under 120 words, one CTA.', uses: 210 },
]
function Demo() {
  const [sent, setSent] = useState('')
  return <div className="flex w-[40rem] max-w-full flex-col gap-3"><PromptLibrary prompts={prompts} onUse={setSent} />{sent && <p aria-live="polite" className="rounded-lg bg-accent-soft p-3 text-sm text-accent-soft-fg">Sent: {sent}</p>}</div>
}
export const styles = { Default: Demo }

Source: packages/ui/src/prompt-library/prompt-library.tsx

Catalog