Preset Templates

Preset templates are pre-built slide layouts provided by the @blockslides/ai-context package. They offer ready-made slide structures for common presentation patterns like two-column layouts, title slides, image galleries, and accent cards. Each template generates a complete slide JSON structure with configured columns, content blocks, and styling attributes.

Installation

pnpm add @blockslides/ai-context
# or
npm install @blockslides/ai-context

Using Preset Templates

Import the preset template functions from the templates module:

import { templatesV1 } from '@blockslides/ai-context'

// List all available templates
const templates = templatesV1.listPresetTemplates()

// Build a specific template
const slide = templatesV1.buildPresetTemplate('tpl.titleAndSubheader')

Available preset keys

Basic layouts:

tpl.titleAndSubheader
Centered title and subtitle

tpl.titleWithBullets
Header with bullet list

tpl.fullImage
Edge-to-edge image

Two-column layouts:

tpl.imageAndText
Image left, text right

tpl.textAndImage
Text left, image right

tpl.twoColumns
Two balanced text columns

tpl.twoColumnsWithHeader
Header with two columns below

tpl.twoImageColumns
Header with two image cards

tpl.titleBulletsAndImage
Bullets left, image right

Multi-column layouts:

tpl.threeColumns
Three equal text columns

tpl.threeColumnsWithHeader
Header with three columns

tpl.fourColumns
Four equal text columns

tpl.fourColumnsWithHeader
Header with four columns

Accent layouts:

tpl.accentLeft
Full-height accent band left, text right

tpl.accentRight
Full-height accent band right, text left

tpl.accentTop
Full-width accent band top, text below

tpl.accentLeftFit
Compact image card left, text right

tpl.accentRightFit
Compact image card right, text left

Template Metadata

Each template includes metadata describing its purpose and appearance:

const templates = templatesV1.listPresetTemplates()

templates.forEach(template => {
  console.log(template.key)          // Unique identifier
  console.log(template.label)        // Display name
  console.log(template.description)  // Description
  console.log(template.icon)         // SVG icon (optional)
})

Building Templates

Basic usage

import { templatesV1 } from '@blockslides/ai-context'

// Build a single template
const titleSlide = templatesV1.buildPresetTemplate('tpl.titleAndSubheader')

// Create a document with multiple templates
const doc = {
  type: 'doc',
  content: [
    templatesV1.buildPresetTemplate('tpl.titleAndSubheader'),
    templatesV1.buildPresetTemplate('tpl.twoColumns'),
    templatesV1.buildPresetTemplate('tpl.fullImage')
  ]
}

Template structure

Each template returns a slide JSON object with the slide type and content blocks:

{
  type: 'slide',
  attrs: {
    id: 'slide-1',
    size: '16x9',
    className: ''
  },
  content: [
    // Column or columnGroup blocks
  ]
}

Integration with AI Context

Using Presets to Improve AI Output

To increase the likelihood of your AI producing valid schemas, feed a preset template slide as an example in your prompt. The AI can then edit the content while maintaining the proper structure:

Preset templates are part of the @blockslides/ai-context package, which provides context strings, schemas, and builders for AI-assisted slide generation. While the templates themselves are JavaScript functions that return JSON, they're designed to work alongside the AI context system.

The templates demonstrate valid slide structures that match the schemas and contexts provided to LLMs:

import { templatesV1, bundlesV1 } from '@blockslides/ai-context'

// Templates show valid JSON structures
const exampleSlide = templatesV1.buildPresetTemplate('tpl.twoColumns')

// Context strings teach LLMs the same patterns
const aiContext = bundlesV1.minimalCreate

Templates use the same attribute names, layout patterns, and block structures described in the AI contexts, making them useful for both direct generation and as examples for LLM guidance.