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
First-message experience: hero, suggestion grid, and prompt input wired together.
Streaming assistant message
Live response with markdown, fenced code, and a stream-controls button.
Tool call approval flow
Agent proposes a tool, user approves, then the steps timeline shows execution.
Reasoning / thinking pane
"Show your work" pattern: a thinking bar collapses into a chain-of-thought timeline.
Branch navigation + edit
Edit a sent message to re-prompt; navigate sibling responses with branch-nav.
Attachments above input
Drop files anywhere or click attach; staged chips render above the textarea.
Sidebar header
Persistent left rail: conversation list, active model, and usage at a glance.
Source-attributed answer (RAG)
Assistant message with inline citations that hover-preview the source.
Cost + token meter
Compose footer: live token count, running cost, and budget threshold colour.
System notice + retry
Stream error → system message → retry control → ask for feedback after recovery.
Scrollable chat thread
Auto-sticky scroll thread with floating back-to-bottom button.
Model marketplace
OpenRouter-style split-pane model picker with search, filters, and pricing detail.
Image generation result
Assistant returns a grid of generated images via base64 payloads.
Voice input
Mic button toggles recording; text-shimmer overlays during transcription.
Code review thread
User pastes a snippet; assistant returns markdown commentary + a suggested diff.
Onboarding tour
First-run hero plus a setup checklist driven by chat-empty + steps.
Long-running agent task
Thinking bar + chain-of-thought + live tool card during a multi-step agent run.
Notification stack
Toast centre composed of dismissible system-message rows of mixed variants.
Markdown showcase
One reply with headings, fenced code, LaTeX math, and a Mermaid diagram.
Regenerate variants
Tone presets via prompt-suggestion chips swap the assistant message in place.
AI-driven plan
Agent emits a pk-todo-list, ticks items off as it executes, auto-collapses on done.