Skip to content

AI prompt template gallery

ai-ui specs/ai-ui/prompt-gallery.kmd

Grid filterable de prompt templates: categoria + tag + author + provider. Preview, variable fill dialog (JSON Schema-driven; compat MCP prompts/list), favorite/star, share via Hub. Reuses koder_kit prompt input field semantics.

When this spec applies

Primary triggers

All triggers

Specification body

Spec — AI prompt gallery

Backend: services/ai/prompt/. Compat: MCP prompts/list schema. Companion: system-prompt-editor.kmd (#122 — power-user authoring).

Princípios

  1. Schema-driven fill — variables in prompts use JSON Schema; dialog auto-renders.
  2. Discovery via facets — categoria + tag + author + provider filters.
  3. Favorite + share — user-level star list; share via Hub.
  4. MCP-compat — gallery consumes MCP prompts/list + Koder native registry transparently.

R1 — Anatomia

┌─────────────────────────────────────────────────────┐
│ [🔍 Search]   [Filters ▾]            [+ New]        │
├─────────────────────────────────────────────────────┤
│ Categories: [All] [Coding] [Writing] [Research] ... │
├─────────────────────────────────────────────────────┤
│ ┌───────────┐ ┌───────────┐ ┌───────────┐           │
│ │ Card 1    │ │ Card 2    │ │ Card 3    │           │
│ │ Title     │ │           │ │           │           │
│ │ Snippet   │ │           │ │           │           │
│ │ ⭐ 42 · MCP│ │           │ │           │           │
│ └───────────┘ └───────────┘ └───────────┘           │
└─────────────────────────────────────────────────────┘

Card slots: title, snippet (first ~80 chars rendered), variable count, star count, provider chip (MCP server / Koder native / Hub-shared).

Tap card → opens fill dialog (R3).

R2 — Filters

FilterSource
CategoryFrontmatter category (coding/writing/research/...)
TagFrontmatter tags array
Authorauthor field (user / AI / Koder team / 3rd-party)
ProviderMCP server slug OR "Koder native" OR "Hub"
Min starsnumeric threshold

Multi-filter ANDed. Search literal substring across title + body.

R3 — Fill dialog

Variables declared in prompt body via mustache-style {var_name} OR JSON Schema in frontmatter:

---
name: code-review
category: coding
variables:
  language:
    type: string
    enum: [python, dart, go, rust]
  file_path:
    type: string
    description: Path to file
---
Review this {language} file: {file_path}

Dialog renders schema-driven form (R3 same logic as mcp-elicitation.kmd R1 form mode — reuse component).

Preview area shows rendered prompt with vars filled.

Submit → either: (a) inserts to composer; (b) directly invokes gateway with prompt.

R4 — Favorite / star

User-level per (koder_user_id, workspace_id, prompt_id). Stars persist; aggregated count public-shared prompts.

R5 — Share via Hub

Author can publish prompt as hub.koder.dev/prompts/<slug>:

  • Private (default): only workspace.
  • Workspace public: members visible.
  • Hub public: anyone with link can install.

Install flow: tap shared link → "Add to my gallery" → copies to user's workspace.

R6 — MCP compat

When user attaches MCP server (cross-link mcp-server-state.kmd #104), server's prompts/list is auto-imported into gallery under provider section <server_slug>.

User cannot edit imported MCP prompts (read-only); can star + use.

Server updates prompts/list → gallery refreshes automatically.

R7 — Surface bindings

SurfaceAPI
FlutterKoderPromptGallery({onSelect, onStar, onShare}) em koder_kit/lib/src/ai/prompt_gallery.dart
Web<koder-prompt-gallery>
Compose/SwiftUIfuturo
CLI / TUIkoder prompts list + koder prompts use <id> + koder prompts star <id>

R8 — Acessibilidade

  • Grid: role="list"; cards role="listitem".
  • Card: <button> with full title aria-label.
  • Filters: role="group" with combobox semantics.
  • Search: role="searchbox".
  • Keyboard nav full.

R9 — i18n

Keyen-USpt-BR
ai.prompts.title"Prompt gallery""Galeria de prompts"
ai.prompts.action.new"New prompt""Novo prompt"
ai.prompts.action.use"Use""Usar"
ai.prompts.action.star"Star""Favoritar"
ai.prompts.action.share"Share""Compartilhar"
ai.prompts.fill.title"Fill variables""Preencher variáveis"
ai.prompts.fill.submit"Use this prompt""Usar este prompt"
ai.prompts.filter.category"Category""Categoria"
ai.prompts.filter.tags"Tags""Tags"
ai.prompts.search.placeholder"Search prompts...""Buscar prompts..."

R10 — Multi-tenant

Workspace-scoped per (koder_user_id, workspace_id). Hub public prompts cross-tenant visible but install creates per-workspace copy.

R11 — Per-preset

Cosmetic only.

T-suite

  • T1 Mount: grid populates from local + MCP imports.
  • T2 Search: filter cards.
  • T3 Star: persists.
  • T4 Use: tap card → fill dialog appears (if variables) OR direct insert.
  • T5 Variables fill: schema-driven form correct.
  • T6 MCP import: attach MCP server with prompts/list → cards appear under provider section.
  • T7 Hub share: publish prompt → accessible via hub URL.
  • T8 Install from share: tap shared link → "Add to gallery" → copy created.
  • T9 A11y: keyboard nav cards.
  • N1 Cross-tenant: workspace B can't access workspace A private prompt directly.

References