Components

24 design system components for building slides declaratively. Compose them in a CSS Flexbox spec and render with POST /v1/render/spec. Deterministic, <1s, $0.03-$0.05. No LLM needed.

Component Categories

metrics (4)

Metric, KPIGrid, ScoreCard, Gauge

charts (5)

BarList, BarChart, StackedBar, DonutChart, Sparkline

layouts (4)

Card, Grid, Columns, SplitPane

content (4)

TextBlock, BulletList, Quote, Callout

diagrams (4)

Steps, Timeline, Funnel, FlowChart

status (3)

Tracker, RAGStatus, ProgressBar

GET /v1/components

List all components. Each includes name, description, category, param schema, and example spec. Filter by category.

curl

# List all components
curl https://api.slideforge.dev/v1/components \
  -H "Authorization: Bearer sf_live_YOUR_KEY"

# Filter by category
curl "https://api.slideforge.dev/v1/components?category=charts" \
  -H "Authorization: Bearer sf_live_YOUR_KEY"

POST /v1/components/search

Semantic search for the best component for your content. Returns ranked matches with schemas and example specs.

curl

# Semantic search for components
curl -X POST https://api.slideforge.dev/v1/templates/search \
  -H "Authorization: Bearer sf_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{"query": "project status with red amber green indicators"}'

Workflow: components → spec → render

Browse or search components to find the right building blocks
Compose a spec using CSS Flexbox layout (direction, gap, flex)
Render with POST /v1/render/spec

Or use POST /v1/suggest-layout to have the LLM generate a spec from a natural language brief — then modify and render.

Example: compose and render

# Compose a spec using components, then render
curl -X POST https://api.slideforge.dev/v1/render/spec \
  -H "Authorization: Bearer sf_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "spec": {
      "chrome": {"title": "Q1 Dashboard"},
      "body": {
        "display": "flex",
        "direction": "column",
        "gap": 20,
        "children": [
          {"component": "Metric", "params": {"metrics": [
            {"value": "$3.2M", "label": "ARR", "trend": "+22%", "trend_dir": "up"}
          ]}},
          {"component": "BarList", "params": {"items": [
            {"name": "Enterprise", "value": 64},
            {"name": "Mid-Market", "value": 28}
          ]}}
        ]
      }
    }
  }'