Eidetic

AI Prompt Templates

AI
Authoring
Block

Library component for saving, organizing, and reusing prompt templates. Supports favorites, categories, search, and multiple display variants.

Preview

Full template library with search, categories, and expandable items

Prompt Templates

4 templates · 2 favorites

Save prompts you use frequently for quick access

Grid Variant

Compact grid layout for template selection

Prompt Templates

4 templates available

Select a template to use it as your prompt

Compact Variant

Minimal dropdown-style template picker

Without Stats

Hide usage statistics for cleaner display

Prompt Templates

4 templates · 2 favorites

Save prompts you use frequently for quick access

Props

AIPromptTemplates component API reference

PropTypeDefaultDescription
templatesPromptTemplate[](Sample templates)Array of prompt templates to display
categoriesPromptCategory[](Sample categories)Array of category filters
onSelect(template: PromptTemplate) => void—Callback when a template is selected for use
onCopy(template: PromptTemplate) => void—Callback when a template is copied to clipboard
onDelete(templateId: string) => void—Callback when a template is deleted
onEdit(template: PromptTemplate) => void—Callback when edit is clicked on a template
onToggleFavorite(templateId: string) => void—Callback when favorite status is toggled
onCreate() => void—Callback when "New Template" is clicked
variant'list' | 'grid' | 'compact''list'Display variant
showSearchbooleantrueShow search input
showCategoriesbooleantrueShow category filter tabs
showStatsbooleantrueShow usage statistics (usage count, last used)
defaultCategorystring'all'Default selected category
emptyMessagestring'No templates found'Message when no templates match filters

PromptTemplate Type

PropTypeDefaultDescription
id*string—Unique template identifier
name*string—Template display name
prompt*string—The actual prompt text
descriptionstring—Short description of the template
categorystring—Category for filtering
tagsstring[]—Tags for search and organization
isFavoriteboolean—Whether template is favorited
isBuiltInboolean—Whether template is system-provided
usageCountnumber—Number of times used
lastUsedDate—Last usage timestamp
createdAtDate—Creation timestamp

Usage

Import and implementation example

import { AIPromptTemplates, type PromptTemplate } from '@/blocks/ai-tools/ai-prompt-templates'


export default function Example() {
 const [templates, setTemplates] = useState<PromptTemplate[]>([
 {
 id: '1',
 name: 'Summarize Text',
 description: 'Create a concise summary',
 prompt: 'Please summarize the following text:\n\n[Your text here]',
 category: 'writing',
 tags: ['summary', 'content'],
 isFavorite: true,
 },
 {
 id: '2',
 name: 'Code Review',
 description: 'Get a detailed code review',
 prompt: 'Please review the following code:\n\n```\n[Your code]\n```',
 category: 'development',
 tags: ['code', 'review'],
 },
 ])


 const handleSelect = (template: PromptTemplate) => {
 // Use the template prompt
 setPromptInput(template.prompt)
 }


 const handleToggleFavorite = (id: string) => {
 setTemplates(prev =>
 prev.map(t => t.id === id ? { ...t, isFavorite: !t.isFavorite } : t)
 )
 }


 return (
 <AIPromptTemplates
 templates={templates}
 onSelect={handleSelect}
 onToggleFavorite={handleToggleFavorite}
 onCreate={() => openCreateModal()}
 variant="list"
 />
 )
}

Built With

3 components

This block uses the following UI components from the design system:

BadgeButtonInput

Features

Built-in functionality

  • Three variants: List, grid, and compact dropdown views
  • Category filtering: Filter templates by category or favorites
  • Search: Search by name, description, or tags
  • Favorites: Star templates for quick access
  • Usage statistics: Track usage count and last used time
  • Copy to clipboard: One-click copy with feedback
  • Expandable preview: Click to expand and see full prompt
  • Built-in protection: Built-in templates cannot be edited/deleted
  • Tags support: Organize with searchable tags
  • Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

All interactive elements are native buttonsSearch input has placeholder textExpanded state visually indicated with chevron

Keyboard Navigation

KeyAction
TabNavigate between elements
Enter / SpaceSelect template or toggle expansion

Notes

  • Consider adding aria-expanded to expandable items
  • Copy confirmation provides visual feedback
  • Empty states provide clear messaging

Related Components

AI Prompt InputAI Welcome StateAI Suggestion Chips