Pieces(1076)

Compact, self-contained widgets that behave like assets. Drop them into any block, card, or page to add a small touch of polish without rewriting the surrounding UI.

"The onboarding flow now ships with three new interactive steps."

beste.co/docs/onboarding

Citation Chip

Inline citation card with a numbered violet circle, a quoted excerpt, and an external link icon with the source path.

FastInstant$0.10 / Mtok
Smart2–4s$1.20 / Mtok

Model Comparison

Two model cards side by side showing name, speed, and cost. The selected card gets a primary border and check.

Context window92.0K / 200K
46% of window in use

Context Gauge

Context-window card with a tokens-used-of-max readout and a violet-to-fuchsia gradient fill bar.

Weekly summary
  • Onboarding ships to GA on Tuesday
  • Pricing experiment lifts conversion by 14%
  • Two critical bugs filed, one already patched
Synthesized from 3 documents

AI Summary

Summary card with a violet sparkle header, bullet list of key points, and a source attribution below.

next_tokentop 5
“The capital of France is”
  • “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.

Feedback Row

Thumbs up and down buttons with tinted active state, alongside copy and share actions.

end_turn248 / 1,024
Response completed normally.

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.

Mountain ridge1
Mountain lake2
Forest canopy3
Starry night4

Image Variants

Two-by-two grid of AI-generated image variants. The selected tile gets a primary border.

ts
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.

Thinking

Thinking Dots

Three staggered violet-to-fuchsia dots inside a pill next to a Thinking label.

42%
Monthly requests4,200 / 10,000resets in 12d

Usage Ring

Monthly quota meter with a tone-colored SVG donut arc, percentage in the middle, used/total request count, and reset countdown.

Suggestion Pills

Wrapping row of pill suggestions that seed the prompt input with common intents.

What's the capital of Japan?
Tokyo. It's been the capital since 1868, after Kyoto held the title for over a thousand years.

Chat Exchange

Paired bubbles: a primary-tinted user message above an assistant reply fronted by a gradient sparkle avatar.

System prompt

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.

Temperature0.7
FocusedCreative

Temperature Control

Slider card with a sky-to-rose gradient track, a circular handle, and Focused to Creative end labels.

Tokens4,820 / 8,192

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.

The smoothest cup of the morning starts with beans roasted just last

Streaming Response

Partial assistant reply bubble with a blinking block cursor on the trailing character.

Write a landing page hero for a coffee roaster

Prompt Input

Chat prompt card with a sparkle glyph, multi-line value, attach button, and a smart send arrow.

Markdown version