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
- Display gallery of AI prompt templates
All triggers
- Build prompt-aware AI surface with reusable templates
- Expose MCP prompts/list to user
Specification body
Spec — AI prompt gallery
Backend:
services/ai/prompt/. Compat: MCPprompts/listschema. Companion:system-prompt-editor.kmd(#122 — power-user authoring).
Princípios
- Schema-driven fill — variables in prompts use JSON Schema; dialog auto-renders.
- Discovery via facets — categoria + tag + author + provider filters.
- Favorite + share — user-level star list; share via Hub.
- 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
| Filter | Source |
|---|---|
| Category | Frontmatter category (coding/writing/research/...) |
| Tag | Frontmatter tags array |
| Author | author field (user / AI / Koder team / 3rd-party) |
| Provider | MCP server slug OR "Koder native" OR "Hub" |
| Min stars | numeric 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
| Surface | API |
|---|---|
| Flutter | KoderPromptGallery({onSelect, onStar, onShare}) em koder_kit/lib/src/ai/prompt_gallery.dart |
| Web | <koder-prompt-gallery> |
| Compose/SwiftUI | futuro |
| CLI / TUI | koder prompts list + koder prompts use <id> + koder prompts star <id> |
R8 — Acessibilidade
- Grid:
role="list"; cardsrole="listitem". - Card:
<button>with full title aria-label. - Filters:
role="group"with combobox semantics. - Search:
role="searchbox". - Keyboard nav full.
R9 — i18n
| Key | en-US | pt-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.
Cross-link
- Companion:
mcp-tool-invocation.kmd,mcp-server-state.kmd,system-prompt-editor.kmd(#122) - Backend:
services/ai/prompt/ - Hub:
products/dev/hub/ - Policies:
multi-tenant-by-default.kmd
References
meta/docs/stack/specs/ai-ui/mcp-tool-invocation.kmdmeta/docs/stack/specs/ai-ui/system-prompt-editor.kmdmeta/docs/stack/policies/multi-tenant-by-default.kmd