Pieces/AI(45)
AI pieces from Beste UI, drop-in widgets built with shadcn/ui and Tailwind CSS.
API Key Input
Masked API key field with a show/hide eye toggle and a copy button, tagged with the env var name.
"The onboarding flow now ships with three new interactive steps."
Citation Chip
Inline citation card with a numbered violet circle, a quoted excerpt, and an external link icon with the source path.
Model Comparison
Two model cards side by side showing name, speed, and cost. The selected card gets a primary border and check.
Context Gauge
Context-window card with a tokens-used-of-max readout and a violet-to-fuchsia gradient fill bar.
- Onboarding ships to GA on Tuesday
- Pricing experiment lifts conversion by 14%
- Two critical bugs filed, one already patched
AI Summary
Summary card with a violet sparkle header, bullet list of key points, and a source attribution below.
- “Paris”64.3%
- “the”18.7%
- “located”8.1%
- “also”4.2%
- “a”2.1%
Top-K Tokens
Debugger-style panel showing the language model's next-token probabilities, with the top candidate highlighted and bars scaled to softmax weight.
Stop Reason
Completion stop reason card where the icon tile color flips per reason (end_turn, stop_sequence, tool_use, max_tokens) and shows the token count.
1
2
3
4Image Variants
Two-by-two grid of AI-generated image variants. The selected tile gets a primary border.
const slug = (s: string) => s.toLowerCase().replace(/\s+/g, '-');
Generated Code
AI code output card with a language tag, copy and regenerate actions, and a monospace block below.
Usage Ring
Monthly quota meter with a tone-colored SVG donut arc, percentage in the middle, used/total request count, and reset countdown.
Chat Exchange
Paired bubbles: a primary-tinted user message above an assistant reply fronted by a gradient sparkle avatar.
You are a concise copywriter. Reply in 2 sentences max and avoid em dashes.
System Prompt
Dashed-border card with a violet scroll icon, uppercase label, and an edit button for the system instructions.
Temperature Control
Slider card with a sky-to-rose gradient track, a circular handle, and Focused to Creative end labels.
Token Counter
Token-usage card with used of total readout and a fill bar that shifts emerald to amber to rose.
Typing Indicator
Chat bubble with three bouncing dots signaling that the assistant is composing a reply.
Model Selector
Gradient sparkle tile inside a pill showing the model name, a speed caption, and a dropdown arrow.