AI template recommender — natural language template search

[anurag629]

Phase 4 — AI Template Recommender

Let users describe what they need in plain English and get the best matching templates from 120+ options.

User Flow

1. User opens template picker in the editor
2. Instead of browsing 12 categories, types a natural language query:
   • "dark minimal blog card for a Python tutorial"
   • "colorful SaaS product launch announcement"
   • "clean dev portfolio with GitHub stats"
3. AI matches against available templates and returns top 3-5 results
4. User sees template previews with relevance reasoning
5. User clicks to select → template loads with contextual default values

UI

Search Input in Template Picker

```
┌──────────────────────────────────────────────────┐
│ ✨ Describe your OG image... │
│ ┌──────────────────────────────────────────┐ │
│ │ dark tech blog card with code snippets │ │
│ └──────────────────────────────────────────┘ │
│ │
│ Best Matches │
│ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │████████│ │████████│ │████████│ │
│ │████████│ │████████│ │████████│ │
│ │ Dev │ │ Blog │ │ Blog │ │
│ │ Termi- │ │ Code │ │ Minimal│ │
│ │ nal │ │ Dark │ │ Dark │ │
│ │ │ │ │ │ │ │
│ │ 95% │ │ 88% │ │ 82% │ │
│ └────────┘ └────────┘ └────────┘ │
│ │
│ "Terminal-style template is the best match │
│ for a dark tech blog with code focus." │
└──────────────────────────────────────────────────┘
```

Technical

Approach

• Send the user's query + a compact list of all templates (ID, category, name, description) to AI
• AI returns top 3-5 template IDs with match percentage and reasoning
• No embedding/vector DB needed — the template catalog is small enough to send in context

Prompt

```
Here are the available OG image templates:
[{ id, category, name, description }, ...]

User is looking for: "{query}"

Return the top 5 best matching templates as JSON:
[{ "id": "...", "score": 95, "reason": "..." }]
```

Response

```json
[
{ "id": "developer-terminal", "score": 95, "reason": "Dark terminal aesthetic matches tech blog theme" },
{ "id": "blog-code-dark", "score": 88, "reason": "Code-focused blog template with dark background" }
]
```

Acceptance Criteria

• Natural language input in template picker
• AI returns relevant template matches with scores
• Template thumbnails displayed for matches
• Brief reasoning shown for each match
• Clicking a match loads the template in the editor
• Debounced input (don't call AI on every keystroke — wait for pause or Enter)
• Falls back to existing category browsing if AI fails
• Existing search/filter still works alongside AI search