ngx-prompt-kit

Showcase

Blocks

Composed patterns that combine multiple ngx-prompt-kit components into copy-pasteable recipes. Pick a block to see it in isolation.

Empty-state onboarding preview (light)

Empty-state onboarding

First-message experience: hero, suggestion grid, and prompt input wired together.

Streaming assistant message preview (light)

Streaming assistant message

Live response with markdown, fenced code, and a Stop / Regenerate button.

Tool call approval flow preview (light)

Tool call approval flow

Agent proposes a tool, user approves, then the steps timeline shows execution.

Reasoning / thinking pane preview (light)

Reasoning / thinking pane

"Show your work" pattern: a shimmering status line collapses into a chain-of-thought timeline.

Branch navigation + edit preview (light)

Branch navigation + edit

Edit a sent message to re-prompt; navigate sibling responses with branch-nav.

Attachments above input preview (light)

Attachments above input

Drop files anywhere or click attach; staged chips render above the textarea.

Sidebar header preview (light)

Sidebar header

Persistent left rail: conversation list, active model, and usage at a glance.

Source-attributed answer (RAG) preview (light)

Source-attributed answer (RAG)

Assistant message with inline citations that hover-preview the source.

Cost + token meter preview (light)

Cost + token meter

Compose footer: live token count, running cost, and budget threshold colour.

System notice + retry preview (light)

System notice + retry

Stream error → system message → retry control → ask for feedback after recovery.

Scrollable chat thread preview (light)

Scrollable chat thread

Auto-sticky scroll thread with floating back-to-bottom button.

Model marketplace preview (light)

Model marketplace

OpenRouter-style split-pane model picker with search, filters, and pricing detail.

Image generation result preview (light)

Image generation result

Assistant returns a grid of generated images via base64 payloads.

Voice input preview (light)

Voice input

Mic button toggles recording; a spartan shimmer overlays during transcription.

Code review thread preview (light)

Code review thread

User pastes a snippet; assistant returns markdown commentary + a suggested diff.

Onboarding tour preview (light)

Onboarding tour

First-run hero plus a setup checklist driven by spartan empty + steps.

Long-running agent task preview (light)

Long-running agent task

Shimmering status line + chain-of-thought + live tool card during a multi-step agent run.

Notification stack preview (light)

Notification stack

Toast centre composed of dismissible spartan alert rows of mixed variants.

Markdown showcase preview (light)

Markdown showcase

One reply with headings, fenced code, LaTeX math, and a Mermaid diagram.

Regenerate variants preview (light)

Regenerate variants

Tone presets via prompt-suggestion chips swap the assistant message in place.

AI-driven plan preview (light)

AI-driven plan

Agent emits a pk-todo-list, ticks items off as it executes, auto-collapses on done.